Chrome扩展：当前标签触发事件调用background.js函数报错排查

你遇到的resetTime is not defined错误和函数传递失效问题，核心原因有两个：

1. 函数无法跨上下文序列化传递：chrome.scripting.executeScript的args参数仅支持JSON可序列化的数据（字符串、数字、普通对象等），函数无法被序列化，所以你传入的resetTime在页面执行上下文里会变成undefined，调用自然报错。
2. 页面上下文无扩展API权限：即使函数能传过去，页面上下文（普通网页环境）也没有权限直接调用chrome.storage.sync，执行resetTime时会触发新的权限错误。

不需要完全在executeScript内重写重置逻辑，更合理的做法是通过消息通信让页面事件通知扩展后台执行重置操作，具体调整如下：

修改后的代码 #

后台脚本（原代码所在文件） #

let time = 0;

function resetTime() {
  time = 0;
  chrome.storage.sync.set({ time: time });
  console.log("Timer reset");
}

setInterval(() => {
  chrome.storage.sync.get(["time"], (result) => {
    console.log("Current time: " + result.time);
  });
}, 1000);

// 新增：监听来自页面的重置请求
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "resetTime") {
    resetTime();
    sendResponse({ status: "timer reset" });
  }
});

chrome.tabs.onActivated.addListener((activeInfo) => {
  chrome.tabs.get(activeInfo.tabId, (tab) => {
    chrome.scripting.executeScript({
      target: { tabId: activeInfo.tabId },
      // 注入页面的逻辑改为发送消息给扩展后台
      function: () => {
        const triggerReset = () => {
          chrome.runtime.sendMessage({ action: "resetTime" }, (res) => {
            console.log(res.status);
          });
        };

        document.addEventListener("mousemove", triggerReset);
        document.addEventListener("mousedown", triggerReset);
      }
      // 不再需要传递resetTime作为args
    });
  });
});

关键调整说明 #

• 扩展后台新增chrome.runtime.onMessage监听，接收页面发来的重置请求，调用原有的resetTime函数。
• 注入到页面的脚本不再依赖外部函数，而是通过chrome.runtime.sendMessage向后台发送指令，触发重置逻辑。
• 避免了跨上下文传递函数的问题，同时保证chrome.storage.sync的调用始终在有权限的扩展后台上下文执行。

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