带有 Tesseract.js 的 Vue Chrome 扩展

Question

最近我一直在开发一个使用 vue 作为前端的 chrome 扩展。使扩展程序在浏览器上运行的 vue 样板使用 webpack 并通过以下方式下载：

vue init kocal/vue-web-extension name

并给出这个项目结构：

.
├── dist
│   └── <the built extension>
├── node_modules
│   └── <one or two files and folders>
├── package.json
├── package-lock.json
├── scripts
│   ├── build-zip.js
│   └── remove-evals.js
├── src
│   ├── background.js
│   ├── icons
│   │   ├── icon_128.png
│   │   ├── icon_48.png
│   │   └── icon.xcf
│   ├── manifest.json
│   └── popup
│       ├── App.vue
│       ├── popup.html
│       └── popup.js
└── webpack.config.js

此设置的问题在于，现在我正在尝试使用 tesseract.js 实现 OCR，并且因为 chrome 扩展不允许您使用 CDN 或外部库，所以我需要在本地下载 tesseract.js 文件。我查看了这个关于本地下载的link，还参考了 tesseract.js 的关于使用带有 chrome 扩展名的 tesseract.js 的示例（https://github.com/jeromewu/tesseract.js-chrome-extension），但是当我加载库时，我一直遇到问题

tesseract.min.js:688 Uncaught Error: ReferenceError: window is not defined
    at eval (tesseract.min.js:688)
    at Worker.e.onmessage (tesseract.min.js:1579)

我现在在 vue 文件中的当前 tesseract 代码是 (App.vue)，问题似乎发生在 await worker.load():

const { createWorker } = Tesseract;
  const worker = createWorker({
    workerPath: chrome.runtime.getURL("js/worker.min.js"),
    langPath: chrome.runtime.getURL("traineddata"),
    corePath: chrome.runtime.getURL("js/tesseract-core.wasm.js")
  });

  async function extract() {
    console.log("test1");
    await worker.load();
    console.log("test2");
    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();
  }

extract();

Html 页面包含 (tab.html)：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="tab.css" />
    <script src="../js/tesseract.min.js"></script>
  </head>
  <body>
    <div id="app"></div>

    <script src="tab.js"></script>
  </body>
</html>

和js文件（tab.js）：

import Vue from "vue";
import App from "./App";


/* eslint-disable no-new */
new Vue({
  el: "#app",

  render: h => h(App)
});

我当前的文件结构如下所示： File structure

我已经被这个问题困扰了很长一段时间，所以任何帮助都将不胜感激！

Answer 1

虽然我无法帮助您解决问题本身（而且已经超过六个月没有其他人回答），但我想我会让您知道我是如何解决我的类似问题的。

我也想要一个 chrome 扩展中的 OCR 功能，并开始研究 tesseract。当我无法解决它时，我继续前进，并在我的项目中使用了 OCRAD.js 和 GOCR.js。虽然可能不如 tesseract 强大，但我对我的结果非常满意。

OCRAD 和 GOCR 都可以简单地包含在您的 manifest.json 中，然后您可以通过将它们调用为函数来调用脚本中的函数：OCRAD(image) 或 GOCR(image)。

OCRAD 有一个不错的演示页面，您可以在其中测试所需图像的功能，然后再使用它：https://antimatter15.com/ocrad.js/demo.html