Manifest V3版本浏览器扩展如何引入Google reCAPTCHA等外部脚本？

报错根因 #

• 第一个CSP报错是因为浏览器扩展默认的内容安全策略仅允许加载扩展包内的脚本，不允许直接加载远程第三方脚本。
• 第二个报错存在两个问题：一是你为外部域名额外添加了单引号，CSP配置中远程域名不需要包裹单引号；二是Manifest V3的extension_pages作用域下，script-src禁止直接添加远程HTTPS域名，这是MV3的强制安全限制，不允许在扩展的核心页面（popup、配置页、后台页）直接引入远程可执行代码。

外部脚本支持说明 #

Manifest V3没有完全禁止使用外部脚本，只是不允许在extension_pages作用域下直接加载，第三方脚本需要通过官方允许的合规方式接入。

正确实现方式（reCAPTCHA场景） #

方案1：使用沙箱页面加载（最推荐） #

沙箱页面是Manifest V3官方提供的第三方脚本加载方案，可单独配置宽松的CSP规则，与扩展核心逻辑隔离：

1. 修改manifest.json配置，添加沙箱声明和对应的CSP规则：

{
  "manifest_version": 3,
  // 其他基础配置...
  "sandbox": {
    "pages": ["sandbox.html"]
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'",
    "sandbox": "script-src 'self' https://www.google.com https://www.gstatic.com; object-src 'none'"
  }
}

注意：reCAPTCHA需要加载谷歌静态资源，因此需要额外添加https://www.gstatic.com域名。

2. 创建沙箱页面sandbox.html，在页面内正常引入reCAPTCHA脚本：

<!DOCTYPE html>
<html>
<body>
  <div id="recaptcha-container"></div>
  <script src="https://www.google.com/recaptcha/api.js?onload=onloadcallback&render=explicit"></script>
  <script>
    // reCAPTCHA加载完成回调
    function onloadcallback() {
      grecaptcha.render('recaptcha-container', {
        'sitekey': '替换为你的reCAPTCHA站点密钥',
        'callback': (verifyToken) => {
          // 验证完成后通过postMessage将结果传递给扩展主页面
          window.parent.postMessage({
            type: 'recaptcha_success',
            token: verifyToken
          }, '*')
        }
      })
    }
  </script>
</body>
</html>

3. 在扩展的核心页面（如popup.html）中通过iframe嵌入沙箱页面，监听message事件获取验证结果即可。

方案2：内容脚本注入加载（网页场景适用） #

如果你的reCAPTCHA是在浏览的网页上下文使用，可通过内容脚本注入到页面中加载，网页上下文不受扩展extension_pages的CSP限制：

• 在manifest.json中配置对应站点的内容脚本匹配规则
• 内容脚本中动态创建script标签插入到页面DOM中，加载reCAPTCHA的api.js，验证逻辑直接在内容脚本中处理即可。

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