Chrome扩展V3添加谷歌翻译触发CSP报错求助

问题根源 #

Chrome扩展V3默认的extension_pages CSP策略限制严格，仅允许从'self'加载脚本，且未显式设置script-src-elem时会 fallback 到script-src规则，导致无法加载谷歌翻译的外部脚本；同时内联脚本也会触发CSP限制。

解决方案步骤 #

1. 调整Manifest的CSP配置

在manifest.json中更新content_security_policy，允许谷歌翻译的脚本源，并明确script-src-elem规则：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://translate.google.com; script-src-elem 'self' https://translate.google.com; object-src 'none';"
  }
}

2. 移除内联脚本，改用外部JS文件

将弹窗中的内联googleTranslateElementInit函数移到单独的popup.js文件中：

// popup.js
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}

3. 修改弹窗HTML代码

更新popup.html，引入外部JS文件，并确保谷歌翻译脚本使用HTTPS协议：

<!DOCTYPE html>
<html lang="en-US">
<body>
  <h1>My Web Page</h1>
  <p>Hello everybody!</p>
  <p>Translate this page:</p>
  <div id="google_translate_element"></div>

  <!-- 引入外部JS文件 -->
  <script src="popup.js"></script>
  <!-- 使用HTTPS加载谷歌翻译脚本 -->
  <script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</body>
</html>

关键说明 #

• 避免使用sandbox：弹窗属于extension_pages上下文，sandbox页面是隔离环境，无法直接作为弹窗使用，因此调整extension_pages的CSP才是正确方向。
• 移除内联脚本：V3的CSP默认禁止unsafe-inline，将函数移到外部文件可避免触发该限制，无需额外添加unsafe-inline规则。

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