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

Question

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!

Answer 1

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:

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),
});