集成Tesseract.js到浏览器扩展时遭遇CSP错误的原因排查及解决方案咨询

这个问题的核心不是代码tokenization导致的，而是Tesseract.js会动态生成Blob形式的Worker脚本，而浏览器扩展默认的Content Security Policy（CSP）不允许从blob:源加载脚本，所以才会触发你看到的错误。即使你关闭了全局的security.csp.enable，扩展自身的CSP规则依然会独立生效，所以这个操作无法解决问题。

下面是针对你的Manifest V2扩展的具体解决方案：

1. 调整扩展的CSP规则，允许Blob脚本加载 #

在你的manifest.json中添加content_security_policy字段，把blob:加入到script-src的允许列表里。我们可以写兼容Firefox和Chrome的通用规则：

"manifest_version": 2,
"name": "Name2Clip",
"version": "0.1.0",
"description": "things",
"icons": {
  "128": "assets/global-icon128.png",
  "48": "assets/global-icon48.png",
  "16": "assets/global-icon16.png"
},
"browser_action": {
  "default_icon": "assets/global-icon16.png",
  "default_popup": "popup.html"
},
"background": {
  "scripts": [ "scripts/main.js" ],
  "persistent": false
},
"permissions": [ "<all_urls>", "activeTab", "unlimitedStorage", "storage" ],
"content_security_policy": "script-src 'self' blob:; object-src 'self'"

这个规则允许扩展从自身（'self'）和Blob源加载脚本，同时限制对象资源只能来自自身，符合基础安全规范。

2. 本地托管Tesseract Worker脚本（更稳定的方案） #

如果不想依赖Blob加载，你可以手动托管Tesseract的Worker脚本和语言包到扩展内部，完全避开动态Blob生成：

• 首先，下载与你使用的Tesseract.js版本匹配的Worker脚本（比如worker.min.js）和目标语言包（比如eng.traineddata.gz），将它们放到扩展目录的指定位置（例如scripts/tesseract/文件夹下）。
• 然后在你的background脚本中，初始化Tesseract时指定本地资源路径：

// 初始化Tesseract，绑定本地Worker和语言包路径
const worker = Tesseract.createWorker({
  workerPath: chrome.runtime.getURL('scripts/tesseract/worker.min.js'),
  langPath: chrome.runtime.getURL('scripts/tesseract/'),
  logger: m => console.log(m)
});

chrome.tabs.onActivated.addListener(async (activeInfo) => {
  // 预加载Worker和语言包
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');

  chrome.tabs.captureVisibleTab({format: "png"}, async function(imageUri){
    await chrome.storage.local.set({image_uri: imageUri});
    const {data: {text}} = await worker.recognize(imageUri);
    console.log(text);
    // 用完销毁Worker，节省资源
    await worker.terminate();
  });
});

这种方式完全符合扩展的CSP安全要求，也能避免不同浏览器的兼容性问题，稳定性更高。

额外注意事项 #

• 如果你后续升级到Manifest V3，CSP的写法会有变化（需要使用content_security_policy.extension_pages字段），但当前你使用的是V2，上面的方案完全适用。
• 务必保证下载的Worker脚本和Tesseract.js主库版本一致，避免版本不兼容导致的异常。

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