如何在Chrome扩展的内部页面中正常运行content script？

问题根因 #

Chrome扩展的content_scripts配置项原生不支持匹配chrome-extension://协议的页面，属于浏览器的安全限制，即便将该协议加入matches规则也不会生效。

解决方案 #

你需要注入的是自身扩展的内部页面，不需要依赖content script机制，有两种可靠的实现方式：

方案1：直接在内部HTML页面引入静态资源（最推荐） #

直接在对应的扩展内部HTML文件中，和普通网页一样手动引入需要的JS和CSS文件即可：

<head>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- 页面原有内容 -->

  <!-- 按依赖顺序引入脚本 -->
  <script src="polyfills.js"></script>
  <script src="runtime.js"></script>
  <script src="main.js"></script>
  <script src="contentPage.js"></script>
</body>

该方式不需要额外配置权限，脚本可以直接访问扩展API，不存在注入失败的问题。

方案2：用chrome.scriptingAPI主动注入（适合脚本复用场景） #

如果这套JS/CSS同时需要给外部网页和内部页面使用，不想维护两套逻辑，可以采用主动注入的方式：

1. 先在manifest.json中添加权限配置：

{
  "manifest_version": 3,
  "permissions": ["scripting"],
  "host_permissions": ["chrome-extension://{你的扩展ID}/*"]
  // 其余原有配置保留
}

2. 在后台服务工作线程（service worker）中监听页面加载事件，检测到自身扩展页面加载完成后执行注入：

// service-worker.js 代码示例
chrome.tabs.onUpdated.addListener(async (tabId, changeInfo, tab) => {
  if (changeInfo.status === 'complete' && tab.url.startsWith('chrome-extension://{你的扩展ID}/')) {
    // 注入CSS
    await chrome.scripting.insertCSS({
      target: { tabId: tabId },
      files: ["styles.css"]
    })
    // 按顺序注入JS
    await chrome.scripting.executeScript({
      target: { tabId: tabId },
      files: ["contentPage.js", "polyfills.js", "runtime.js", "main.js"]
    })
  }
})

补充说明 #

• 开发阶段可以在manifest.json中添加key字段固定扩展ID，避免每次本地加载扩展ID变化导致匹配规则失效。
• 原有content_scripts配置中的chrome-extension://*/*规则可以删除，该规则不会生效。

内容的提问来源于stack exchange，提问作者The.Wolfgang.Grimmer