基于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";

推荐文章

温文尔雅的蛋挞 · JS二进制文件转换：File、Blob、Base64、ArrayBuffer - 卡布奇诺y - 博客园

10 月前

爱搭讪的猴子 · 解决：‘git‘ 不是内部或外部命令，也不是可运行的程序-阿里云开发者社区

1 年前

逃课的筷子 · 对话框及窗体在多线程中的应用（阻塞和非阻塞）_showdialog 阻塞主线程-CSDN博客

1 年前

慷慨大方的野马 · 基于深度学习的视觉三维重建研究总结-腾讯云开发者社区-腾讯云

2 年前

坚强的橙子 · java去除字符串中的空格\t、回车\n、换行符\r、制表符\t_私房菜的博客-CSDN博客

2 年前