I am developing a chrome extension to read and run ocr on some pdf files.

I’ve noticed the recent manifest v3 changes, and i’m stuck on the import part to use tesseract

Here is the tree of my files:

── 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

Here is the content of my background and content js files:

//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.log('Unsupported domain.');
        }
    });

And the other file:

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

When i run this code, i get the following error in the browser console:

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.

I can however, call window.Tesseract that returns a tesseract object to me.

What did i do wrong?

I don’t use Webpack or anything, just raw js.

Thanks