Chrome扩展开发中TensorFlow.js人脸关键点检测加载脚本报错求助

核心问题分析 #

错误根源是当前的内容安全策略（CSP）未允许加载cdn.jsdelivr.net域名下的脚本，且web_accessible_resources配置错误——该字段用于将扩展包内的本地资源暴露给网页，不能直接配置外部CDN链接。

具体修复步骤 #

1. 更新Content Security Policy (CSP) #

在content_security_policy的extension_pages和sandbox字段中添加目标CDN域名（需明确指定https协议）：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'wasm-unsafe-eval' https://cdn.jsdelivr.net http://localhost:* http://127.0.0.1:*; object-src 'self'",
  "sandbox": "sandbox allow-scripts; script-src 'self' 'wasm-unsafe-eval' https://cdn.jsdelivr.net http://localhost:* http://127.0.0.1:*; object-src 'self'"
}

注意：如果是在content script中加载外部脚本，content script的CSP受宿主网页限制，建议将MediaPipe的加载逻辑转移到扩展后台服务工作者（background service worker）或popup页面，这些页面受扩展自身CSP管控。

2. 修正web_accessible_resources配置 #

删除字段内的外部CDN链接，若无需暴露扩展内资源，可直接设为空数组：

"web_accessible_resources": []

如果有扩展本地资源需要暴露给网页，保留如下格式（示例为暴露assets目录下所有文件）：

"web_accessible_resources": [
  {
    "resources": ["assets/*"],
    "matches": ["<all_urls>"]
  }
]

3. 脚本加载的正确实现 #

• 在popup/background中加载：直接通过动态创建script标签加载

// 示例：popup.js中动态加载脚本
const script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/face_mesh_solution_packed_assets_loader.js';
script.onload = () => {
  // 此处初始化MediaPipe逻辑
};
document.head.appendChild(script);

• 在content script中加载：由于受宿主页面CSP限制，推荐通过消息通信让background处理：
  1. content script向background发送加载请求
  2. background加载脚本并执行逻辑
  3. background将处理结果返回给content script

验证修复 #

修改manifest.json后，在Chrome扩展管理页面点击「重新加载」，测试是否仍出现CSP错误。

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