基于Tesseract.js的Vue Chrome扩展
基于Tesseract.js的Vue Chrome扩展
提问于 2020-01-07 03:08:17
最近，我一直在开发一个使用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文件。我查看了这个关于本地下载的链接，还参考了tesseract.js关于使用带有铬扩展的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)
});我当前的文件结构如下所示：文件结构
我已经在这个问题上被困了很长一段时间了，所以任何帮助都是非常感谢的！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59621685
复制相关文章
相似问题
腾讯云开发者
