CODEWITHSUNDEEP
google-chrome-extensioncontent-security-policytesseract.js
Matteo
Matteo

Reputation: 36

Chrome Extension - Unable to load local Tesseract.js worker.min.js due to Content Security Policy (Manifest v3)

To use Tesseract.js in the Chrome Extension I am developing, I download the necessary files (such as tesseract.min.js and worker.min.js) from Unpkg and load those scripts. I took the same approach as the code here: https://github.com/jeromewu/tesseract.js-chrome-extension/blob/master/js/main.js. However, an error message was shown.

The Error Message:

Refused to load the script 'chrome-extension://alcefeoioaenaookcbndciliniipbodk/lib/worker.min.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Why does loading the script violate Content Security Policy even if it is of the same origin (chrome-extension://alcefeoioaenaookcbndciliniipbodk/)?

Thank you in advance!

Upvotes: 2

Views: 1211

Answers (2)

Zuhair Taha
Zuhair Taha

Reputation: 3032

I use offscreen api which works fine for me. I create Tesseract worker in it and send message from content script to it and get back the recognized text. The option workerBlobURL: false is required

Upvotes: 0

Luke Vo
Luke Vo

Reputation: 20668

TL;DR: for your error, set workerBlobURL to false though you may have to setup other paths as well.

I have just had the same issue. If you check the actual Worker script, somehow it creates a Blob and executes it:

enter image description here

This is what actually caused the issue. Basically it's like executing remote code. I found the source code for it at spawnWorker.js:

module.exports = ({ workerPath, workerBlobURL }) => {
  let worker;
  if (Blob && URL && workerBlobURL) {
    const blob = new Blob([`importScripts("${workerPath}");`], {
      type: 'application/javascript',
    });
    worker = new Worker(URL.createObjectURL(blob));
  } else {
    worker = new Worker(workerPath);
  }

  return worker;
};

So there's actually an option to disable it. This should work to load Tesseract in Chrome Extension:

const worker = await Tesseract.createWorker({
    corePath: "/libs/tesseractjs/tesseract-core-simd.wasm.js",
    workerPath: "/libs/tesseractjs/worker.min.js",
    langPath: "/libs/tesseractjs",
    workerBlobURL: false, // This line solves your error
    logger: (m: any) => console.log(m),
});

Upvotes: 0

Related Questions