Chrome扩展空白新标签页中Content Script无法工作的问题咨询

核心问题原因 #

1. Content Script匹配规则不覆盖扩展内部页面：chrome-extension://协议的页面默认不在<all_urls>的有效匹配范围内，导致content.js无法注入到inject.html页面。
2. 消息发送时机过早：tabs.create的回调触发时，页面可能还未完全加载完成，此时发送消息会因content.js未注入而失败。

具体修复步骤 #

1. 修改manifest.json，让Content Script匹配扩展内部页面 #

更新content_scripts的matches规则，明确匹配扩展内部的inject.html页面，同时修正原配置中的拼写错误：

{
  "manifest_version": 2,
  "name": "Content Script test",
  "description": "Content Script test.",
  "version": "1.0",
  "icons": {
    "16": "icon-16.png",
    "48": "icon-48.png"
  },
  "permissions": [
    "tabs"
  ],
  "background": {
    "persistent": false, // 修正原拼写错误：persistant → persistent
    "scripts": ["background.js"]
  },
  "content_scripts": [
    {
      "matches": ["chrome-extension://*/inject.html"], // 匹配扩展内部的inject.html页面
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    "inject.js"
  ],
  "browser_action": {
    "default_icon": "icon-16.png",
    "default_title": "Contents Script test"
  }
}

2. 调整background.js，等待页面加载完成后发送消息 #

通过chrome.tabs.onUpdated监听页面加载状态，确保页面完全加载后再发送消息：

chrome.browserAction.onClicked.addListener(function () {
  chrome.tabs.create(
    {
      url: chrome.extension.getURL('inject.html'),
      active: true
    },
    function (tab) {
      // 监听页面加载完成事件
      const loadListener = function(tabId, changeInfo) {
        if (tabId === tab.id && changeInfo.status === "complete") {
          chrome.tabs.sendMessage(tabId, {});
          chrome.tabs.onUpdated.removeListener(loadListener); // 移除监听避免重复触发
        }
      };
      chrome.tabs.onUpdated.addListener(loadListener);
    }
  );
});

替代方案：直接在inject.html中引入脚本（更简洁） #

若无需依赖Content Script的隔离环境，可直接在inject.html中引入脚本，跳过Content Script注入流程：

<html>
  <head>
    <script src="content.js"></script>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

这种方式下脚本直接运行在页面上下文，同样能正常接收后台发送的消息。

验证效果 #

修改后重新加载扩展，点击浏览器图标打开新标签页：

• content.js中的alert('test content')会正常弹出
• 页面加载完成后，alert('test msg')也会弹出，说明消息发送成功

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