JS转Chrome扩展失效，请求协助排查页面监控脚本问题

我来帮你一步步排查解决这个问题，Chrome扩展的后台运行和页面脚本交互确实有几个容易踩的坑，咱们逐个攻破：

一、先搞定按钮点击无反应的问题 #

首先，Chrome扩展的触发按钮（就是浏览器右上角的小图标）需要正确配置manifest和绑定事件，很多时候没反应都是这两步出错了：

1. 检查manifest.json的核心配置 #

你得确保manifest里声明了必要的权限和按钮配置，这里给你一个适配Manifest V3（Chrome最新推荐版本）的示例：

{
  "manifest_version": 3,
  "name": "自动刷新监控工具",
  "version": "1.0",
  "permissions": ["activeTab", "scripting", "tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png" // 随便整个16x16的图标就行，没有的话可以先注释掉
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

重点要注意：

• 必须声明activeTab（获取当前激活标签）、scripting（注入页面脚本）、tabs（访问标签页信息）这几个权限
• 用service_worker代替旧版的background page，这是V3的核心变化

2. 给按钮绑定正确的点击事件 #

按钮的点击逻辑不能直接写在popup里（因为popup关闭后JS就停止了），要把核心逻辑放到后台service worker里，popup只负责发指令：

比如你的popup.html可以这样写：

<!DOCTYPE html>
<html>
<body style="width: 150px; padding: 10px;">
  <button id="start-btn" style="width: 100%; margin-bottom: 8px;">开始监控</button>
  <button id="stop-btn" style="width: 100%;">停止监控</button>
  <script src="popup.js"></script>
</body>
</html>

然后popup.js里绑定事件：

// 监听开始按钮点击
document.getElementById('start-btn').addEventListener('click', async () => {
  // 获取当前激活的标签页
  const [currentTab] = await chrome.tabs.query({active: true, currentWindow: true});
  // 给后台脚本发指令，启动监控
  chrome.runtime.sendMessage({action: "startMonitor", tabId: currentTab.id});
  window.close(); // 关闭弹窗，避免占用资源
});

// 监听停止按钮点击
document.getElementById('stop-btn').addEventListener('click', async () => {
  chrome.runtime.sendMessage({action: "stopMonitor"});
  window.close();
});

二、实现特定标签页的后台持续监控 #

原来的脚本刷新页面就失效，是因为页面刷新后JS环境重置了。我们需要让后台service worker来调度，每次页面刷新后自动重新注入检查脚本，这样就能持续运行：

1. 后台background.js的核心逻辑 #

这个脚本会负责定时检查目标标签页，注入检查脚本，并且处理停止指令：

let monitorTabId = null;
let checkInterval = null;

// 监听来自popup的消息
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.action === "startMonitor") {
    monitorTabId = msg.tabId;
    startAutoCheck();
    sendResponse({status: "监控已启动"});
  } else if (msg.action === "stopMonitor") {
    stopAutoCheck();
    sendResponse({status: "监控已停止"});
  }
});

// 启动定时检查
function startAutoCheck() {
  // 每隔5秒检查一次，可根据需求调整间隔
  checkInterval = setInterval(async () => {
    try {
      // 先确认目标标签页还存在
      const targetTab = await chrome.tabs.get(monitorTabId);
      if (!targetTab) {
        stopAutoCheck();
        return;
      }
      // 向目标标签页注入检查脚本
      await chrome.scripting.executeScript({
        target: {tabId: monitorTabId},
        func: checkTargetTd
      });
    } catch (err) {
      console.error("监控出错:", err);
      stopAutoCheck();
    }
  }, 5000);
}

// 停止监控
function stopAutoCheck() {
  if (checkInterval) {
    clearInterval(checkInterval);
    checkInterval = null;
    monitorTabId = null;
  }
}

// 注入到页面的检查函数（这里替换成你的逻辑）
function checkTargetTd() {
  // 替换成你要监控的<td>选择器，比如带特定类名或ID的
  const targetTd = document.querySelector('td.target-class');
  if (!targetTd) return;

  const tdText = targetTd.textContent.trim();
  // 检查是否为有效数字
  if (!isNaN(parseFloat(tdText)) && isFinite(tdText)) {
    // 达到条件，通知后台停止监控
    chrome.runtime.sendMessage({action: "stopMonitor"});
    alert("目标元素已变为数字！");
    return;
  }
  // 没达到条件，刷新页面
  window.location.reload();
}

三、测试和排查要点 #

1. 加载扩展：把所有文件放到同一个文件夹，Chrome扩展管理页面开启「开发者模式」，点击「加载已解压的扩展程序」选择这个文件夹
2. 查看后台日志：如果还是没反应，去扩展管理页面找到你的扩展，点击「service worker」链接打开后台控制台，看有没有报错信息
3. 权限验证：确保manifest里的权限都加对了，少了任何一个都可能导致脚本无法注入或标签页无法访问

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