Manifest V3下Chrome扩展集成Tesseract.js遇加载错误求助

我正在开发一款Chrome扩展，用于读取PDF文件并执行OCR识别。受Manifest V3更新影响，导入Tesseract.js时遇到问题。

文件目录结构 #

── extension
│   ├── background.js
│   ├── content.js
│   ├── index.css
│   ├── index.html
│   ├── manifest.json
│   └── scripts
│       ├── tesseract.min.js
│       └── worker.min.js
├── extension.zip
├── ext.sh
└── public
    ├── background.js
    ├── content.js
    ├── index.css
    ├── index.html
    ├── manifest.json
    └── scripts

相关代码 #

background.js #

chrome.action.onClicked.addListener((tab) => {
    if (tab.url.includes('mail.google.com') || tab.url.includes('outlook.live.com')) {
        try {
            importScripts('scripts/tesseract.min.js');
        } catch (e) {
            console.error(e);
        }
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            files: ['content.js'],
            world: 'MAIN',
            allFrames: true
        });
    } else {
        console.log('Unsupported domain.');
    }
});

content.js #

//function calling tesseract to try to perform ocr
console.log(window.Tesseract);
const worker = window.Tesseract.createWorker('eng');
const data = await worker.recognize(blob);
await worker.terminate();
return data.text;

报错信息 #

Refused to load the script 'https://cdn.jsdelivr.net/npm/tesseract.js@v5.0.1/dist/worker.min.js' because it violates the following Content
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.jsdelivr.net/npm/tesseract.js@v5.0.1/dist/worker.min.js' failed to load.

目前能调用window.Tesseract获取到对象，但无法正常使用Worker，未使用Webpack，仅用原生JS开发，请问问题出在哪里？

问题根源 #

1. Manifest V3的CSP限制：Manifest V3对内容安全策略（CSP）要求更严格，默认禁止加载外部CDN资源，Tesseract.js默认会请求CDN上的worker脚本，触发拦截。
2. Worker路径未配置：虽然本地已存放worker.min.js，但未告知Tesseract.js使用本地文件，它仍会尝试请求默认CDN地址。
3. background脚本的无效导入：background与content脚本环境隔离，在background中导入Tesseract.js对content脚本无作用，属于冗余操作。

修复步骤 #

1. 调整Manifest.json的CSP配置 #

在manifest.json中添加允许本地worker和Blob的CSP规则：

{
  "manifest_version": 3,
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; worker-src 'self' blob:",
    "sandbox": "sandbox allow-scripts allow-downloads; script-src 'self' 'unsafe-inline'; object-src 'self'"
  },
  // 其他配置项
}

extension_pages规则针对扩展内部页面，worker-src明确允许'self'才能加载本地worker。

2. 在content.js中指定本地Worker路径 #

初始化Worker时，用chrome.runtime.getURL()获取扩展内部资源的绝对路径，指定给Tesseract：

// content.js
async function performOCR(blob) {
    console.log(window.Tesseract);
    const worker = await window.Tesseract.createWorker('eng', 1, {
        workerPath: chrome.runtime.getURL('scripts/worker.min.js'),
        // 若使用离线语言包，需额外指定langPath，例如：
        // langPath: chrome.runtime.getURL('scripts/lang-data'),
        logger: m => console.log(m) // 可选，用于调试
    });
    const data = await worker.recognize(blob);
    await worker.terminate();
    return data.text;
}

3. 优化background.js的脚本注入逻辑 #

移除background中无效的importScripts，直接将tesseract.min.js与content.js一起注入页面：

// 修改后的background.js
chrome.action.onClicked.addListener((tab) => {
    if (tab.url.includes('mail.google.com') || tab.url.includes('outlook.live.com')) {
        chrome.scripting.executeScript({
            target: { tabId: tab.id },
            files: ['scripts/tesseract.min.js', 'content.js'],
            world: 'MAIN',
            allFrames: true
        });
    } else {
        console.log('Unsupported domain.');
    }
});

4. 声明可访问资源（可选） #

在manifest.json中添加web_accessible_resources，确保worker和语言包能被页面上下文访问：

{
  "web_accessible_resources": [
    {
      "resources": ["scripts/worker.min.js", "scripts/lang-data/*"],
      "matches": ["https://mail.google.com/*", "https://outlook.live.com/*"]
    }
  ],
  // 其他配置项
}

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