Chrome扩展因CSP违规无法加载Tesseract OCR的问题求助

1. 彻底本地化Tesseract资源，阻断unpkg请求 #

Tesseract默认会从unpkg拉取worker和训练数据，即使本地放置了文件，也需显式指定资源路径才能避免外部请求：

• 下载完整资源包：
  • 从Tesseract官方仓库下载worker.min.js、tesseract-core.wasm.js（或.wasm格式文件）
  • 下载对应语言的训练数据（如eng.traineddata），统一放到扩展目录下的assets/tesseract文件夹
• 在popup.js中初始化Tesseract时手动指定本地路径：

import Tesseract from 'tesseract.js';

// 配置本地资源路径
const worker = Tesseract.createWorker({
  workerPath: chrome.runtime.getURL('assets/tesseract/worker.min.js'),
  corePath: chrome.runtime.getURL('assets/tesseract/tesseract-core.wasm.js'),
  langPath: chrome.runtime.getURL('assets/tesseract/'), // 训练数据所在目录
});

// 初始化并执行OCR
(async () => {
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize(yourImageElement);
  console.log(text);
  await worker.terminate();
})();

2. 修正Webpack打包配置（若使用Webpack） #

如果用Webpack打包，需确保Tesseract资源被正确复制到输出目录，避免打包时丢失：

• 安装copy-webpack-plugin：npm install copy-webpack-plugin --save-dev
• 在webpack.common.js中添加插件配置，复制Tesseract资源：

const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他基础配置...
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: 'node_modules/tesseract.js/dist/worker.min.js',
          to: 'assets/tesseract/worker.min.js'
        },
        {
          from: 'node_modules/tesseract.js/dist/tesseract-core.wasm.js',
          to: 'assets/tesseract/tesseract-core.wasm.js'
        },
        {
          from: 'node_modules/tesseract.js/lang-data/eng.traineddata',
          to: 'assets/tesseract/eng.traineddata'
        }
      ]
    })
  ]
};

• 确保Webpack入口文件正确引入Tesseract，且未通过externals配置排除该依赖。

3. 修正Manifest的资源与CSP配置 #

Chrome扩展的CSP不允许随意加载外部脚本，必须完全本地化资源，同时正确配置web_accessible_resources：

• manifest.json配置示例（Manifest V3）：

{
  "manifest_version": 3,
  "name": "图片文本提取工具",
  "version": "1.0",
  "action": {
    "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "assets/tesseract/worker.min.js",
        "assets/tesseract/tesseract-core.wasm.js",
        "assets/tesseract/*.traineddata"
      ],
      "matches": ["<all_urls>"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'none'; style-src 'self' 'unsafe-inline';"
  }
}

• 注意：Manifest V3中content_security_policy的extension_pages字段不允许加载外部脚本，这就是你之前添加https://unpkg.com后扩展加载失败的原因，必须确保所有资源都在本地目录内。

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