在chrome扩展中导入tesseract.js

Question

我正在开发这个铬扩展，我想使用tesseract.js库来识别图像中的文本。只有我不知道如何导入库。我使用的是清单V3，所以使用CDN链接导入是不可能的(就我在文档中读到的内容而言)。因此，我使用npm --save在本地安装了这个库，然后用npx webpack对其进行了网络打包，但是我仍然无法从导入的函数中获取任何内容。

我尝试了tesseract.js文档提供的选项，这些选项是：

import Tesseract from 'tesseract.js';

Tesseract.recognize(
  'https://tesseract.projectnaptha.com/img/eng_bw.png',
  'eng',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
  console.log(text);
})

和

import { createWorker } from 'tesseract.js';

const worker = createWorker({
  logger: m => console.log(m)
});

(async () => {
  await worker.load();
  await worker.loadLanguage('eng');
  await worker.initialize('eng');
  const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
  console.log(text);
  await worker.terminate();
})();

但这两种方法都不起作用，因为根据服务工作者的说法，tesseract.js不是一个有效的文件。如前所述，我也尝试使用CDN链接导入它，但是由于CSP规则，chrome不能使用链接在Manifest V3中导入非本地库。在这张图片里您可以看到文件结构。为了便于访问，我将一些tesseract文件从node_modules文件夹复制到services文件夹中。

有人能向我解释一下，我应该如何在一个铬扩展名上导入tesseract.js吗？显然，它不像使用import Tesseract from 'tesseract.js';那么容易

Answer 1

我不知道这是否是@wOxxOm回复的意思，

服务工作者无法创建嵌套工作人员，crbug.com/1219164。您必须在可见的html页面中这样做。

但是，当我将tesseract.min.js 作为内容脚本运行时，无论是在清单中提到它，还是使用chrome.scripting.executeScript()，Tesseract都会成为页面上所有内容脚本的全局变量，因此我可以在脚本中实际使用它。不管怎样，谢谢你的帮助