如何让Chrome扩展中executeScript像内容脚本一样自动运行

你的代码目前只能在特定上下文（比如popup打开时）执行，无法自动监听页面跳转。要实现像内容脚本一样在新页面加载时自动运行，需要借助Chrome扩展的后台脚本事件监听，具体步骤如下：

1. 配置manifest权限 #

首先确保你的manifest.json（以Manifest V3为例）包含必要的权限和后台脚本配置：

{
  "manifest_version": 3,
  "name": "Auto Inject Script",
  "version": "1.0",
  "permissions": ["tabs", "scripting"],
  "host_permissions": ["<all_urls>"], // 或指定你需要的域名
  "background": {
    "service_worker": "background.js"
  }
}

如果是Manifest V2，将background字段改为：

"background": {
  "scripts": ["background.js"]
}

2. 后台脚本监听页面加载 #

在background.js中使用tabs.onUpdated事件监听页面加载完成，自动注入脚本：

const page = () => {
  alert("popup");
};

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // 仅在页面完全加载且是HTTP/HTTPS页面时执行
  if (changeInfo.status === 'complete' && tab.url.startsWith('http')) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      func: page
    }).catch(err => console.error('脚本注入失败:', err));
  }
});

关键说明 #

• 后台脚本（service worker/background script）是扩展的常驻上下文，能监听浏览器的页面事件，不会像popup一样关闭后停止运行。
• tabs.onUpdated事件会在页面状态变化时触发，通过changeInfo.status === 'complete'判断页面是否加载完成。
• 过滤tab.url.startsWith('http')是为了避免在Chrome内部页面（如chrome://settings）注入脚本导致权限错误。

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