Использование tesseract.js с манифестом v3

Я разрабатываю расширение Chrome для чтения и запуска ocr в некоторых файлах PDF.

Я заметил недавние изменения в манифесте v3, и я застрял на части импорта, чтобы использовать tesseract.

Вот дерево моих файлов:

── extension
│   ├── background.js
│   ├── content.js
│   ├── index.css
│   ├── index.html
│   ├── manifest.json
│   └── scripts
│       ├── tesseract.min.js
│       └── worker.min.js
├── extension.zip
├── ext.sh
└── public
    ├── background.js
    ├── content.js
    ├── index.css
    ├── index.html
    ├── manifest.json
    └── scripts

Вот содержимое моих js-файлов background и content:

//background.js    
chrome.action.onClicked.addListener((tab) => {
        if (tab.url.includes('mail.google.com') || tab.url.includes('outlook.live.com')) {
            try {
                importScripts('scripts/tesseract.min.js');
              } catch (e) {
                console.error(e);
            }
            chrome.scripting.executeScript({
                target: { tabId: tab.id },
                files: ['content.js'],
                world: 'MAIN',
                allFrames: true
            });
    
        } else {
            console.info('Unsupported domain.');
        }
    });

И другой файл:

//content.js
//function calling tesseract to try to perform ocr
console.info(window.Tesseract);
        const worker = window.Tesseract.createWorker('eng');
        const data = await worker.recognize(blob);
        await worker.terminate();
        return data.text;

Когда я запускаю этот код, я получаю следующую ошибку в консоли браузера:

Refused to load the script 'https://cdn.jsdelivr.net/npm/[email protected]/dist/worker.min.js' because it violates the following Content
Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'https://cdn.jsdelivr.net/npm/[email protected]/dist/worker.min.js' failed to load.

Однако я могу вызвать window.Tesseract, который вернет мне объект тессеракта.

Что я сделал не так?

Я не использую Webpack или что-то еще, только сырой js.

Спасибо

1) Удалите весь блок try-catch из фонового сценария, поскольку он выполняется в другом процессе. 2) Удалите world: 'MAIN',, поскольку он запускает код в небезопасном JS-контексте страницы. 3) См. Как импортировать модули ES6 в контент-скрипт или использовать сборщик. 4) Альтернативно, выполните всю обработку в закадровом документе, а не в скрипте контента.

— 18.06.2024 20:13

google-chrome google-chrome-extension chrome-extension-manifest-v3 tesseract.js

18.06.2024 15:10

Стоит ли изучать PHP в 2023-2024 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я использовал подход к закадровому документированию для Tesseract.js в расширении Chrome и столкнулся с некоторыми проблемами. Вот мой код:

async function createTWorker(lang: string): Promise<Tesseract.Worker> {
const worker = await Tesseract.createWorker({
    workerPath: chrome.runtime.getURL("scripts/worker.min.js"),
    langPath: chrome.runtime.getURL("scripts/languages/"),
    corePath: chrome.runtime.getURL("scripts/"),
    workerBlobURL: false,
    logger: (m: any) => console.info(m),
});
return worker;
}

const script = document.createElement('script');
script.src = chrome.runtime.getURL('scripts/tesseract.min.js');
document.head.appendChild(script);

Этот код возвращает следующую ошибку:

Uncaught Error: TypeError: x.map is not a function
at createWorker.js:247:15
at t.onmessage (onMessage.js:3:5)

Когда я удаляю workerBlobURL: false, я получаю другую ошибку, связанную с политикой безопасности контента (CSP):

Refused to load the script 'chrome- 
extension://lloecilpelefammfhnafkjeijmokndcc/scripts/worker.min.js' 
because it violates the following Content Security Policy directive: 
"script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'"

Спасибо

28.06.2024 14:29