Importing tesseract.js in chrome extensions

Question

Im developing this chrome extensions and I want to use the tesseract.js library to recognize text in an image. Only im clueless on how to import the library. I am using manifest V3 so importing using the CDN link is not possible (as far as I read in the documentation). So I installed the library locally using npm --save, and then webpacked it with npx webpack, but I still cant get any off the functions imported.

I tried the options given by the tesseract.js documentation, which are:

import Tesseract from 'tesseract.js';

Tesseract.recognize(
  'https://tesseract.projectnaptha.com/img/eng_bw.png',
  'eng',
  { logger: m => console.log(m) }
).then(({ data: { text } }) => {
  console.log(text);
})

and

import { createWorker } from 'tesseract.js';

const worker = createWorker({
  logger: m => console.log(m)
});

(async () => {
  await worker.load();
  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();
})();

But neither work, because tesseract.js is not a valid file according to the service worker. As said above, I also tried importing it using the CDN link, but because of the CSP regulations, chrome can't import non-local libraries in Manifest V3 using links. in this image you can see the file structure. I copied some of the tesseract files from the node_modules folder into the services folder for easier access.

Can anyone explain to me how I am supposed to import tesseract.js on a chrome extension. Apparently its not as easy as just using import Tesseract from 'tesseract.js';

Answer 1

I don't know if this is what @wOxxOm meant with his reply,

Service worker can't create nested workers, crbug.com/1219164. You'll have to do it in a visible html page.

but when I run the tesseract.min.js AS an content script, either by mentioning it in the manifest, or using chrome.scripting.executeScript(), Tesseract becomes a global variable for all content scripts on that page, and thus I can actually use it in my script. Either way thank you for your help