Vue Chrome Удлинитель с Tesseract. js - PullRequest
Новая
       51

Vue Chrome Удлинитель с Tesseract. js

0 голосов
/ 07 января 2020

недавно я работал над расширением chrome, которое использует vue в качестве внешнего интерфейса. Шаблон vue, который позволяет расширению работать в браузере, использует веб-пакет и загружается с: 

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

Проблема с этой настройкой в том, что сейчас я пытаюсь реализовать OCR с использованием tesseract. js, и поскольку расширения chrome не позволяют использовать CDN или сторонние библиотеки, мне нужно загружать файлы tesseract. js локально. Я просматривал эту ссылку о локальной загрузке и также ссылался на пример tesseract. js 'по использованию tesseract. js с расширением chrome (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: ( 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 страница включает в себя ( вкладка. 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 файл ( вкладка. js): 

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


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

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

Моя текущая структура файла выглядит следующим образом: Структура файла

Я был застрял на этой проблеме довольно долго, поэтому любая помощь будет принята с благодарностью!

...