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/[email protected]/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/[email protected]/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