first commit

popup.js

@@ -0,0 +1,168 @@
+// 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 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].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 {
+    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');
+      }
+    });
+
+    // 更新 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, sender, sendResponse) => {
+  if (request.action === 'blurModeDisabled') {
+    isBlurMode = false;
+    updateUI();
+  }
+});