Chrome扩展Manifest V3集成Filerobot编辑器遇CSP及加载问题求助

一、修复Content Script无法加载的问题 #

Manifest V3 禁止在content_scripts中引用远程CDN资源，必须使用本地文件：

1. 从CDN下载filerobot-image-editor.min.js到你的扩展目录（建议新建vendor文件夹统一存放第三方脚本）
2. 修改manifest的content_scripts配置，指向本地文件路径：

{
  "manifest_version": 3,
  "name": "Your Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "vendor/filerobot-image-editor.min.js"
      ]
    }
  ]
}

二、解决内联脚本违反CSP的问题 #

Manifest V3默认CSP规则极严，需根据脚本行为针对性调整：

场景1：脚本自身包含内联执行代码 #

如果是Filerobot脚本内部的内联代码触发CSP错误，需计算该内联代码的哈希值并加入CSP白名单：

1. 在Chrome开发者工具的控制台中，复制触发错误的完整内联脚本内容
2. 计算该内容的SHA-256哈希（可通过命令行：echo -n "内联脚本内容" | openssl dgst -sha256 -binary | base64，或在线哈希工具生成）
3. 在manifest中添加content_security_policy字段：

{
  "manifest_version": 3,
  "name": "Your Extension",
  "version": "1.0",
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval' 'sha256-你的哈希值'; object-src 'self';"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "vendor/filerobot-image-editor.min.js"
      ]
    }
  ]
}

场景2：脚本向宿主页面注入内联脚本 #

如果是脚本主动向页面注入内联代码导致的错误，需通过安全方式注入脚本：

1. 创建自定义注入脚本（比如inject-editor.js）：

// inject-editor.js
const script = document.createElement('script');
script.src = chrome.runtime.getURL('vendor/filerobot-image-editor.min.js');
script.onload = () => script.remove();
(document.head || document.documentElement).appendChild(script);

2. 修改manifest，添加web_accessible_resources允许脚本被页面访问，同时调整CSP：

{
  "manifest_version": 3,
  "name": "Your Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "inject-editor.js"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["vendor/filerobot-image-editor.min.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';",
    "sandbox": "sandbox allow-scripts allow-same-origin;"
  }
}

注：若脚本依赖eval功能，需在script-src中额外添加'unsafe-eval'，但优先通过哈希方式避免使用该指令。

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