blurweb/popup.js

// popup.js - 弹出窗口逻辑
let isBlurMode = false;
let currentMode = 'element'; // 'element' or 'selection'

console.log('[BlurText] Popup script loaded');

// 获取页面元素
const toggleBtn = document.getElementById('toggleBlur');
const toggleText = document.getElementById('toggleText');
const clearAllBtn = document.getElementById('clearAll');
const blurIntensitySlider = document.getElementById('blurIntensity');
const intensityValue = document.getElementById('intensityValue');
const statusDiv = document.getElementById('status');
const modeElementBtn = document.getElementById('modeElement');
const modeSelectionBtn = document.getElementById('modeSelection');
const modeAreaBtn = document.getElementById('modeArea');
const usageTip = document.getElementById('usageTip');

// 从存储中加载模糊强度
chrome.storage.local.get(['blurIntensity'], (result) => {
  if (result.blurIntensity) {
    blurIntensitySlider.value = result.blurIntensity;
    intensityValue.textContent = result.blurIntensity + 'px';
  }
});

// 模糊强度滑块变化
blurIntensitySlider.addEventListener('input', (e) => {
  const value = e.target.value;
  intensityValue.textContent = value + 'px';

  // 保存到存储
  chrome.storage.local.set({ blurIntensity: value });

  // 通知 content script 更新强度
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    chrome.tabs.sendMessage(tabs[0].id, {
      action: 'updateIntensity',
      intensity: value
    });
  });
});

// 模式切换
[modeElementBtn, modeSelectionBtn, modeAreaBtn].forEach(btn => {
  btn.addEventListener('click', () => {
    const mode = btn.dataset.mode;
    currentMode = mode;

    // 更新UI
    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');

    // 更新使用提示
    updateUsageTip(mode);

    // 如果已经在模糊模式中，通知 content script 切换模式
    if (isBlurMode) {
      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
        chrome.tabs.sendMessage(tabs[0].id, {
          action: 'switchMode',
          mode: mode
        });
      });
    }
  });
});

// 更新使用提示
function updateUsageTip(mode) {
  if (mode === 'element') {
    usageTip.innerHTML = `
      <strong>元素模式：</strong><br>
      1. 点击"开启模糊模式"<br>
      2. 鼠标悬停元素查看高亮<br>
      3. 点击元素进行模糊<br>
      4. 再次点击取消模糊
    `;
  } else if (mode === 'selection') {
    usageTip.innerHTML = `
      <strong>文本选择模式：</strong><br>
      1. 点击"开启模糊模式"<br>
      2. 拖动鼠标选择文本<br>
      3. 点击浮动按钮模糊文本<br>
      4. 可多次选择和模糊
    `;
  } else if (mode === 'area') {
    usageTip.innerHTML = `
      <strong>区域模式：</strong><br>
      1. 点击"开启模糊模式"<br>
      2. 拖动鼠标绘制矩形区域<br>
      3. 释放鼠标创建模糊区域<br>
      4. 点击区域恢复
    `;
  }
}

// 切换模糊模式
toggleBtn.addEventListener('click', async () => {
  try {
    console.log('[BlurText] Toggle button clicked');
    const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

    if (!tab) {
      console.error('[BlurText] No active tab found');
      statusDiv.innerHTML = '<span class="icon">⚠️</span> 无法获取当前标签页';
      return;
    }

    isBlurMode = !isBlurMode;
    console.log('[BlurText] New blur mode state:', isBlurMode);

    // 发送消息给 content script
    chrome.tabs.sendMessage(tab.id, {
      action: 'toggleBlurMode',
      enabled: isBlurMode,
      mode: currentMode,
      intensity: blurIntensitySlider.value
    }, (response) => {
      if (chrome.runtime.lastError) {
        console.error('[BlurText] Error sending message:', chrome.runtime.lastError);
        statusDiv.innerHTML = '<span class="icon">⚠️</span> 请刷新页面后重试';
        statusDiv.className = 'status';
        isBlurMode = !isBlurMode; // 恢复状态
      } else {
        console.log('[BlurText] Message sent successfully, response:', response);
      }
    });

    // 更新 UI
    updateUI();
  } catch (error) {
    console.error('[BlurText] Error in toggle:', error);
    statusDiv.innerHTML = '<span class="icon">❌</span> 发生错误，请重试';
  }
});

// 清除所有模糊
clearAllBtn.addEventListener('click', async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.tabs.sendMessage(tab.id, {
    action: 'clearAll'
  });

  statusDiv.innerHTML = '<span class="icon">✅</span> 已清除所有模糊效果';
  statusDiv.className = 'status';

  setTimeout(() => {
    statusDiv.innerHTML = '<span class="icon">💡</span> 点击下方按钮开始使用';
  }, 2000);
});

// 更新 UI 状态
function updateUI() {
  if (isBlurMode) {
    toggleText.textContent = '关闭模糊模式';
    toggleBtn.classList.remove('btn-primary');
    toggleBtn.classList.add('btn-secondary');
    statusDiv.innerHTML = '<span class="icon">✨</span> 模糊模式已开启，点击网页文字进行模糊';
    statusDiv.className = 'status active';
  } else {
    toggleText.textContent = '开启模糊模式';
    toggleBtn.classList.add('btn-primary');
    toggleBtn.classList.remove('btn-secondary');
    statusDiv.innerHTML = '<span class="icon">💡</span> 点击下方按钮开始使用';
    statusDiv.className = 'status';
  }
}

// 监听来自 content script 的消息
chrome.runtime.onMessage.addListener((request) => {
  if (request.action === 'blurModeDisabled') {
    isBlurMode = false;
    updateUI();
  }
});