Chrome扩展Manifest V3如何指定外部脚本及权限问题咨询

核心结论 #

Manifest V3 并非完全禁止使用外部脚本，而是严格限制了扩展页面（如popup、options页面）的script-src指令，不允许直接添加远程URL。你遇到的报错正是因为在extension_pages的CSP中尝试引入远程FontAwesome脚本导致的。

针对FontAwesome需求的解决方案 #

方案1：本地引入FontAwesome资源

将FontAwesome的字体文件、CSS/JS文件下载到扩展目录中，通过本地路径引用，完全符合CSP的'self'要求：

1. 下载FontAwesome资源包到扩展的vendor/fontawesome目录
2. 在popup.html中引用本地资源：

<link rel="stylesheet" href="vendor/fontawesome/css/all.min.css">
<!-- 若需JS功能，同样引用本地文件 -->
<script src="vendor/fontawesome/js/all.min.js"></script>

3. 保持CSP的script-src为默认的'self'即可。

方案2：用FontAwesome CSS替代JS（更轻量）

如果仅需图标展示功能，多数场景下无需引入FontAwesome的JS文件，仅通过本地CSS即可满足需求，彻底规避JS的CSP限制。

通用外部脚本引入方案（非图标类） #

若扩展需加载其他第三方远程脚本，可通过以下方式绕过extension_pages的CSP限制：

• Content Script动态注入：在manifest中配置content script，在content script内动态创建<script>标签加载外部脚本。Content Script执行环境与扩展页面隔离，脚本注入受宿主页面CSP约束，主流网站通常允许常见第三方脚本。
• Service Worker获取后注入：用fetch API获取远程脚本内容，再通过chrome.scripting.executeScript API将脚本内容注入到目标页面或扩展页面（需配置对应权限）。

Manifest配置修正建议 #

• 移除CSP中尝试添加远程URL的配置，恢复为V3要求的严格模式：

"content_security_policy": {
  "extension_pages": "script-src 'self'; object-src 'self'"
}

• web_accessible_resources中matches为空数组无意义，无需对外暴露资源可直接删除该字段，若需暴露则补充对应匹配规则。

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