Chrome扩展迁移Manifest V3触发unsafe-eval相关EvalError如何解决

1. Manifest V3 中extension_pages作用域的默认内容安全策略禁止使用unsafe-eval，你当前配置里的content_security_policy的extension_pages字段仅配置了object-src规则，没有显式配置script-src，会默认使用Chrome官方给定的默认规则script-src 'self'，你引入的inboxsdk.js内部使用了eval类动态执行JS的逻辑，直接触发了报错。
2. 现有配置存在错误：background.js属于扩展后台服务Worker脚本，不应该配置在content_scripts的脚本列表中，会导致逻辑异常。

方案一：将inboxsdk注入到页面上下文执行（操作DOM场景适用） #

内容脚本动态创建script标签将inboxsdk.js注入到页面上下文执行，页面上下文不受扩展CSP限制，操作步骤如下：

1. 把inboxsdk.js从content_scripts的js列表中移除。
2. 在内容脚本中添加如下逻辑注入脚本：

const sdkScript = document.createElement('script');
sdkScript.src = chrome.runtime.getURL('js/inboxsdk.js');
sdkScript.onload = function() {
    this.remove();
};
(document.head || document.documentElement).appendChild(sdkScript);

3. 在manifest.json中添加web_accessible_resources配置，允许页面访问inboxsdk.js：

"web_accessible_resources": [
    {
      "resources": ["js/inboxsdk.js"],
      "matches": ["*://mail.google.*/*"]
    }
]

方案二：沙盒页面执行（不需要操作DOM场景适用） #

Manifest V3禁止在extension_pages的CSP中添加unsafe-eval，仅沙盒页面的CSP允许配置该规则：

1. 创建沙盒页面sandbox.html，在页面内引入inboxsdk.js编写相关逻辑。
2. 修改manifest.json的CSP配置，沙盒规则添加'unsafe-eval'：

"content_security_policy": {
    "extension_pages":"script-src 'self'; object-src 'self'",
    "sandbox": "sandbox allow-scripts; script-src 'self' 'unsafe-eval' https://apis.google.com https://ajax.googleapis.com https://cdnjs.cloudflare.com; default-src 'self'; object-src 'none'"
}

3. 沙盒页面和内容脚本/后台脚本之间通过postMessage传递数据交互。

修正配置错误 #

把background.js从content_scripts的js列表中移除，单独配置后台服务Worker：

"background": {
    "service_worker": "js/background.js"
}

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