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';