基于Tesseract.js的Vue Chrome扩展

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.min.js:688 Uncaught Error: ReferenceError: window is not defined
    at eval (tesseract.min.js:688)
    at Worker.e.onmessage (tesseract.min.js:1579)

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();

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

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