Manifest V3 Chrome扩展加载Google Places API报CSP错误

1. 你当前通过动态注入内联脚本的方式完全违反Manifest V3的默认内容安全策略：MV3默认禁止所有未声明哈希/nonce的内联脚本执行，直接把接口返回的JS代码写入script标签内容的做法必然被拦截。
2. host_permissions 仅授权扩展发起跨域网络请求的权限，不会授权扩展页面加载对应域名的外部脚本。MV3扩展页面默认只允许加载本地打包的脚本，要加载外部脚本必须显式在CSP中声明可信源，且Google Maps JS运行时会动态加载同域名下的多个子脚本，需要把对应域名完整加入允许列表。
3. 你不需要在service worker里fetch脚本内容再回传注入，直接在options页合法引入外部脚本即可。

第一步：修改manifest.json配置 #

需要补全内容安全策略配置，给扩展页面开放Google Maps域名的脚本加载权限，保留你原有其他配置，新增content_security_policy字段即可：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "host_permissions": [
    "https://maps.googleapis.com/*"
  ],
  "permissions": [
    "storage",
    "activeTab",
    "scripting"
  ],
  "options_page": "options.html",
  "content_security_policy": {
    "extension_pages": "script-src 'self' https://maps.googleapis.com; object-src 'self'"
  }
}

说明：CSP中添加的https://maps.googleapis.com规则会覆盖该域名下所有子路径的脚本加载权限，Google Maps动态加载的同域名子脚本会被自动放行，不需要额外配置子路径。

第二步：清理background.js冗余逻辑 #

你不需要在service worker中拉取Maps JS代码，直接删除之前写的autocomplete消息监听逻辑即可，保留其他业务代码。

第三步：调整options.html脚本引入方式 #

删除预留的空script标签，直接在页面中引入Google Maps脚本，通过回调参数确保库加载完成后再执行初始化：

<head>
    ...
    <link rel="stylesheet" href="options.css">
    <script defer src="https://maps.googleapis.com/maps/api/js?key=替换为你自己的API_KEY&libraries=places&callback=initAutocomplete"></script>
    ...
</head>
<body>
    ...
    <input id="autocomplete_input" type="text">
    ...
    <script src="autocomplete.js"></script>
</body>

第四步：重写autocomplete.js逻辑 #

删除原有的发消息拉取脚本、注入内联代码的逻辑，直接实现初始化回调函数：

function initAutocomplete() {
  const input = document.getElementById('autocomplete_input');
  new google.maps.places.Autocomplete(input);
}
// 兜底处理：如果脚本已提前加载完成，直接触发初始化
if (window.google?.maps?.places) {
  initAutocomplete();
}

• 绝对不要尝试在MV3配置中添加unsafe-inline放开内联脚本权限，Chrome应用商店会直接拒绝审核包含该配置的扩展提交。
• 前端代码中暴露API Key是Google Maps前端JS API的正常使用方式，你可以在云控制台给API Key设置来源白名单，仅允许你的扩展ID对应的来源调用，避免密钥被盗用。
• 之前遇到的动态加载common.js被拦截的问题，在正确配置CSP脚本源后会自动解决。

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