Browser extension Manifest version 3 is experiencing issues with Tesseract.js

[dhineshkoilpitchai]

Tesseract.js version (5.1.1)

Describe the bug
In Manifest V3, all of the extension's logic must be part of the extension package. while configuring tesseract.js in my project which is expecting remotely hosted files from cdn (https://cdn.jsdelivr.net/npm/tesseract.js@v5.1.1/dist/worker.min.js)

The call to cdn javascript files is being blocked by Manifest V3

Below is the generated error

aaa463d1-3808-4913-b68b-301dd763c085:1 Refused to load the script 'https://cdn.jsdelivr.net/npm/tesseract.js@v5.1.1/dist/worker.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[Balearica]

You can include all files locally rather than using a CDN. This is documented here. Additionally, multiple other users have made browser extensions using Tesseract.js (including one prominently featured in the readme), so you can check what they did to handle this.

[dhineshkoilpitchai]

Thank you for replying, Balearica.

Tesseract.js is performing well with Manifest version 2 for scripts that are requested from both local and CDN.

While migrating the project from Manifest version 2 to Manifest version 3, the "Content Security Policy" does not allow for internal and external script calling. Even though the script is also included in the project.

Below is the generated error after configured Tesseract.js locally

Refused to load the script 'chrome-extension://cfdfhbbeijbeiekpobjehilaniekfaoo/libs/tesseract/worker.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules' http://localhost:* http://127.0.0.1:*". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Uncaught Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'chrome-extension://cfdfhbbeijbeiekpobjehilaniekfaoo/libs/tesseract/worker.min.js' failed to load.

ab3cd1d9-032a-4451-8885-83c0c1a70c6d:1 Uncaught NetworkError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'chrome-extension://cfdfhbbeijbeiekpobjehilaniekfaoo/libs/tesseract/worker.min.js' failed to load.
at ab3cd1d9-032a-4451-8885-83c0c1a70c6d:1:1

[dhineshkoilpitchai]

below is the updated code, which solves my issue.. Thanks

const worker = await Tesseract.createWorker("eng", 1, {

          corePath: '/libs/tess/tesseract.js-core',
          workerPath: "/libs/tess/worker.min.js",
          langPath: '/libs/tess/tessdata-main',
          workerBlobURL: false, // This line solves my error
          logger: function(m) {
              console.log(m);
          }
        });

[OtchereDev]

@dhineshkoilpitchai @Balearica Can you help me out?

This is my code below

const processImage = (imageDataUrl: string) => {
    setIsProcessing(true)
    Tesseract.recognize(imageDataUrl, 'eng', {
      logger: (m) => console.log(m),
      workerPath: '/workers/worker.min.js',
      corePath: '/workers/core,
      workerBlobURL: false,  //this is the solution you suggested
    })
      .then(({ data: { text } }) => {
        setIsProcessing(false)
        setPickedText(text)
        onClose()
      })
      .catch((err) => {
        console.error('Error processing image:', err)
        setIsProcessing(false)
      })
  }
  
  //Manifest file
  {
  "manifest_version": 3,
  "name": "Extension Name",
  "version": "1.0.0",
  "description": "T",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": ["storage"],
  "options_page": "options.html",
  "web_accessible_resources": [
    {
      "resources": [
        "/workers/worker.min.js",
        "/workers/core/tesseract-core-lstm.wasm.js",
        "/workers/core/tesseract-core-simd-lstm.wasm.js",
        "/workers/core/tesseract-core-simd.wasm.js",
        "/workers/core/tesseract-core.wasm.js"
      ],
      "matches": ["<all_urls>"]
    }
  ]
}

from where did you copy the corePath and worker file from?
I copied mine from https://github.com/naptha/tesseract.js-core/tree/master but I am still getting this error

WebAssembly.instantiate(): Refused to compile or instantiate WebAssembly module because neither 'wasm-eval' nor 'unsafe-eval' is an allowed source of script in the following Content Security Policy directive: "script-src 'self'"). Build with -sASSERTIONS for more info. at p (tesseract-core-simd.wasm.js:176:11) at tesseract-core-simd.wasm.js:221:11

[shubguptaa]

Hello!

I am facing this issue as well:

Refused to create a worker from 'blob:https://gemini.google.com/d62c0ed8-3df9-434d-be68-31648beda0e1' because it violates the following Content Security Policy directive: "worker-src * 'unsafe-inline' 'unsafe-eval'". Note that '*' matches only URLs with network schemes ('http', 'https', 'ws', 'wss'), or URLs whose scheme matches `self`'s scheme. The scheme 'blob:' must be added explicitly.

My code is:

				const workerPath = chrome.runtime.getURL('worker.min.js');
				const corePath = chrome.runtime.getURL('tesseract-core.wasm.js');
				const langPath = chrome.runtime.getURL('eng.traineddata');
				const worker = await createWorker('eng', {
					workerPath: workerPath,
					corePath: corePath,
					langPath: langPath,
					workerBlobURL: false, // This tells Tesseract not to use blob URLs
				});

				// Perform OCR on the image
				const {
					data: { text },
				} = await worker.recognize(content);

And manifest.json has:
"web_accessible_resources": [
{
"resources": [
"worker.min.js",
"tesseract-core.wasm.js",
"eng.traineddata"
]
]

Has anyone found a way to get around this? Thanks in advance 🙏

[Tamar-Yankelevich]

Same issue for me.
Code is:

`

worker = await Tesseract.createWorker('eng', 1, {

                            corePath: chrome.runtime.getURL('tesseract/tesseract-core.wasm.js'),
                            workerPath: chrome.runtime.getURL('tesseract/worker.min.js'),
                            langPath: chrome.runtime.getURL('tesseract/lang/'),
                            workerBlobURL: false, 
                            logger: function (m) {
                                console.log(m);
                            }
                        });

`

I've also added the required files to the manifest resources.

But I get the following issue:

Failed to construct 'Worker': Script at 'chrome-extension://pcgmpllnkhdpmkahogkmelhecjafahml/tesseract/worker.min.js' cannot be accessed from origin ''

[Tamar-Yankelevich]

I finally found a reliable solution by combining two approaches, and thought I'd share it in case anyone else may need it in the future:

• Using an offscreen document to safely execute OCR.

• Serving all Tesseract.js files locally from the extension.

1. Download Tesseract Locally
   Place the necessary Tesseract dist files into your extension folder. Example:
   /scripts/

• tesseract.min.js
• tesseract.js@v5.0.4_dist_worker.min.js
• tesseract-core.wasm.js
• /languages/
  • eng.traineddata

2. offscreen.html

<script src="scripts/tesseract.min.js"></script> <script type="module" src="offscreen.js"></script>

3. offscreen.js
   chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
   if (message.type === 'RUN_OCR') {
   try {
   const { imageURL } = message;
   const { createWorker } = Tesseract;

   const worker = await createWorker('eng', 1, {
   workerPath: chrome.runtime.getURL("scripts/tesseract.js@v5.0.4_dist_worker.min.js"),
   corePath: chrome.runtime.getURL("scripts/"),
   langPath: chrome.runtime.getURL("scripts/languages/"),
   workerBlobURL: false,
   logger: m => console.log(m),
   });

   await worker.setParameters({
   tessedit_pageseg_mode: 11,
   tessedit_ocr_engine_mode: 1,
   preserve_interword_spaces: '1',
   });

   const result = await worker.recognize(imageURL, {}, { tsv: true });

   await worker.terminate();

   chrome.runtime.sendMessage({
   type: 'OCR_RESULT',
   data: {
   success: true,
   result: result.data.tsv
   }
   });

   } catch (err) {
   sendResponse({ success: false, error: err.message });
   }

   return true;
   }
   });