Chrome扩展嵌入Ace Editor时worker加载触发CSP错误该如何解决？

解决方案1：调整扩展manifest的CSP配置（适配Manifest V2/V3） #

如果是Manifest V2版本，直接在manifest.json里配置：

"content_security_policy": "script-src 'self' blob: chrome-extension://*; object-src 'self'"

如果是Manifest V3版本，CSP配置结构调整为：

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

Manifest V3的extension_pages作用域默认已经信任扩展自身的所有资源，不需要额外加chrome-extension协议头，只要你要加载的worker文件属于扩展自身打包的资源即可生效。

解决方案2：修改Ace配置禁用远程worker加载 #

如果调整CSP无效，可以直接配置Ace关闭worker，把语法校验逻辑放到主线程执行，完全规避importScripts的调用：
在你初始化Ace编辑器的代码前加入以下配置：

ace.config.set("useWorkers", false);

这个方案的副作用是大文件编辑时语法校验会占用主线程资源，如果你编辑的脚本体积不大完全可以使用，且兼容性最好，Firefox和Chrome都能正常运行。

解决方案3：动态拼接扩展ID到页面CSP #

如果一定要保留worker能力，你可以在选项页面的HTML里不要硬写CSP的meta标签，改成用JS动态生成meta标签插入到head，拼接上当前扩展的ID：

const extUuid = chrome.runtime.id;
const cspContent = `script-src 'self' blob: chrome-extension://${extUuid}/js/worker-javascript.js; object-src 'self'`;
const meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = cspContent;
document.head.appendChild(meta);

注意动态生成的CSP要放在所有其他脚本加载之前插入才会生效。

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