基于Chrome扩展实现网站数据更新检测功能的技术问询

1. 弹窗与后台的通信逻辑 #

弹窗是临时页面，关闭后会销毁，所以必须用**Service Worker（后台服务线程）**来维持持续检测。弹窗通过消息传递给后台，触发开始/停止指令：

• 弹窗按钮绑定事件：

  // popup.js
  document.getElementById('start-btn').addEventListener('click', () => {
    chrome.runtime.sendMessage({ action: 'startMonitoring' });
    window.close(); // 可选，关闭弹窗不影响后台检测
  });
  
  document.getElementById('stop-btn').addEventListener('click', () => {
    chrome.runtime.sendMessage({ action: 'stopMonitoring' });
  });
  

• 后台监听消息并管理检测状态：

  // service-worker.js
  let monitorTimer = null;
  let baseTableData = [];
  
  chrome.runtime.onMessage.addListener((msg, sender) => {
    if (msg.action === 'startMonitoring') {
      // 先获取当前表格的初始数据作为基准
      chrome.scripting.executeScript({
        target: { tabId: sender.tab.id },
        func: getTableRows
      }).then(res => {
        baseTableData = res[0].result;
        // 启动定时检测
        monitorTimer = setInterval(() => {
          chrome.scripting.executeScript({
            target: { tabId: sender.tab.id },
            func: getTableRows
          }).then(res => {
            const currentData = res[0].result;
            // 筛选新增数据（排除初始已存在的项）
            const newRows = currentData.filter(row => !baseTableData.includes(row));
            if (newRows.length > 0) {
              // 存入chrome.storage，这里用local存储，也可换成sync实现跨设备同步
              chrome.storage.local.get('newTableData').then(stored => {
                const updatedData = [...(stored.newTableData || []), ...newRows];
                chrome.storage.local.set({ newTableData: updatedData });
              });
              // 更新基准数据，避免重复存储
              baseTableData = currentData;
            }
          });
        }, 1500); // 1.5秒检测一次，可按需调整
      });
    } else if (msg.action === 'stopMonitoring') {
      if (monitorTimer) {
        clearInterval(monitorTimer);
        monitorTimer = null;
        baseTableData = [];
      }
    }
  });
  
  // 注入到页面的函数，提取表格行数据
  function getTableRows() {
    const targetRows = document.querySelectorAll('table#target-table tr'); // 替换为你的表格选择器
    return Array.from(targetRows).map(row => {
      // 按需格式化行数据，比如转为字符串或对象
      return Array.from(row.cells).map(cell => cell.textContent.trim()).join('|');
    });
  }
  

2. 核心API说明 #

• chrome.runtime.sendMessage/onMessage：实现弹窗与后台的跨上下文通信，传递控制指令。
• chrome.scripting.executeScript：后台向目标页面注入函数，获取DOM数据（需在manifest.json中声明scripting权限）。
• chrome.storage.local/sync：存储新增数据，local仅当前设备可用，sync可同步到用户Chrome账号。
• setInterval/clearInterval：控制定时检测的启停。

3. 清单文件权限配置（manifest.json） #

必须声明所需权限才能正常运行：

{
  "manifest_version": 3,
  "name": "表格新增数据监控",
  "version": "1.0",
  "permissions": ["scripting", "storage", "activeTab"],
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

4. 优化建议 #

• 改用内容脚本持久化注入：可以在页面加载时注入内容脚本，后台通过消息触发内容脚本检测，减少跨上下文通信的开销。
• 基于唯一标识对比：如果表格行有唯一ID，用ID对比比全内容对比更高效，避免因内容微小变化误判为新增。
• 动态调整检测间隔：根据场景设置合理频率，避免占用过多资源。

内容的提问来源于stack exchange，提问作者Ivan Mishakivskiy