Manifest V3浏览器扩展如何配置以正常调用外部API

Manifest V3对内容安全策略做了结构性重构，同时收紧了权限执行规则，按以下步骤修改即可正常调用外部API、运行扩展逻辑：

核心规则变更点 #

• V3不再支持V2版本的单字符串格式content_security_policy配置，改为按扩展运行上下文拆分的对象结构
• V3扩展核心上下文（service worker、popup页、扩展自有页面）强制禁止加载远程脚本、禁止unsafe-inline/unsafe-eval，这两个规则无法通过配置绕过
• 原V2的browser_action字段统一替换为action，background.scripts替换为Service Worker机制，站点访问权限从permissions拆分到独立的host_permissions字段，web_accessible_resources格式变更为「资源列表+匹配域名」的结构
• 外部API调用域名不需要加到script-src规则下，接口请求归connect-src规则管控

可直接使用的适配后清单配置 #

{
  "short_name": "Twitter PAY Extension",
  "name": "Twitter PAY Extension",
  "version": "1.1",
  "manifest_version": 3,
  "action": {
    "default_icon": {
      "128": "ext.png",
      "16": "ext.png",
      "48": "ext.png"
    },
    "default_title": "Twitter EXT"
  },
  "description": "Twitter EXT",
  "icons": {
    "128": "ext.png",
    "16": "ext.png",
    "48": "ext.png"
  },
  "background": {
    "service_worker": "app/bg.js"
  },
  "content_scripts": [
    {
      "matches": ["https://twitter.com/*"],
      "css": ["/css/root.css", "/static/css/content.css", "/css/modal.css"],
      "js": ["/static/js/content.js"]
    }
  ],
  "permissions": [],
  "host_permissions": [
    "https://api.devnet.solana.com/*",
    "https://solarity.muhash.com/*",
    "https://twitter.com/*"
  ],
  "web_accessible_resources": [
    {
      "resources": ["/static/css/content.css", "/static/media/*", "/app/*"],
      "matches": ["https://twitter.com/*"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; connect-src 'self' https://api.devnet.solana.com https://solarity.muhash.com;",
    "sandbox": "script-src 'self' https://unpkg.com https://aframe.io https://cdn.jsdelivr.net/ 'unsafe-inline' 'unsafe-eval'; connect-src *;"
  }
}

必须同步完成的代码调整 #

• 原V2配置中允许从unpkg、cdn.jsdelivr.net、aframe.io加载的远程JS文件，不能直接在Service Worker、内容脚本中加载执行，必须将这类文件下载到本地打包进扩展安装包；如果确实需要动态加载远程脚本、使用eval/内联脚本，把相关逻辑放到独立的HTML沙箱页中，通过postMessage和扩展主逻辑通信，使用沙箱页需要在manifest中增加声明："sandbox": {"pages": ["你的沙箱页路径.html"]}
• 原background节点下的多脚本引入方式不再支持，需要在bg.js最顶部用importScripts('./const.js', './jquery.js', './inject.js')引入依赖；注意Service Worker没有DOM环境，如果jQuery、inject.js中用到了window/document这类DOM API，需要把对应逻辑挪到离屏页面（Offscreen Document）或者内容脚本中执行，不能在Service Worker中运行
• 如果接口请求从内容脚本发起，不需要额外调整CSP，内容脚本的请求会继承所在页面的权限，只要在host_permissions中添加了对应域名就不会被跨域拦截
• 非必要不要开启<all_urls>权限，只把实际用到的API域名、业务域名加到host_permissions即可，减少权限申请范围也更容易通过扩展商店审核

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