Transformers.js in chrome extension fails to execute remote code served from https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.3/dist/ort-wasm-simd-threaded.jsep.mjs

[mattmacf98]

System Info

Hi I was attempting to build a chrome extension using @huggingface/transformers, I ran into a problem where chrome extensions are not allowed to load code from remotely hosted code. So when initializing, I get problems loading https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.3.3/dist/ort-wasm-simd-threaded.jsep.mjs

Error in worker: Error: no available backend found. ERR: [wasm] TypeError: Failed to fetch dynamically imported module
and then I try to add the cdn url to my manifest of allowed script-src I get and Insecure CSP value since manifest v3 prohibits these now.

I think I could get around this by downloading the cdn file locally and bundling with my extension, but I am unsure how to then tell hugging face to use the local mjs instead of going to the CDN.

I noticed that in the legacy version of this repo @xenova/transformers, https://github.com/huggingface/transformers.js/tree/main/examples/extension the extension works properly! and I verified that switching to that repo fixed my issue.

Would it be possible to have @huggingface/transformers or make the url configurable so i can point to a local bundled js if I want to?

Who can help?

@Rocketknight1

Information

• The official example scripts
• My own modified scripts

Tasks

• An officially supported task in the examples folder (such as GLUE/SQuAD, ...)
• My own task or dataset (give details below)

Reproduction

Steps to reproduce:

1. clone https://github.com/huggingface/transformers.js/tree/main/examples/extension
2. build and see that it works!
3. switch to use huggingface/transformers -> see that it does not work since the CDN is blocked

Expected behavior

I expect to be able to run the model without having to get ort-wasm-simd-threaded.jsep.mjs from a CDN at runtime

[Rocketknight1]

cc @xenova!

[xenova]

Hi @mattmacf98 👋 We're in the process of moving our examples to a separate repo, but in the meantime, I've merged #1213, which updates our extension example. Could you try again?
https://github.com/huggingface/transformers.js/tree/main/examples/extension

[mattmacf98]

@xenova this works great when importing @hugginface/transformers in a background script! In my use case I wanted to run the script in the popup.js (which doesn't respect the import-scripts parameter for chunk loading) it will still try to load from the CDN.

below is how I modified the popup.js to break with @huggingface/transformers 3.4.0 (but it works with @xenova/transformers ^2.0.0)

import { pipeline } from '@huggingface/transformers';

class PipelineSingleton {
    static task = 'text-classification';
    static model = 'Xenova/distilbert-base-uncased-finetuned-sst-2-english';
    static instance = null;

    static async getInstance(progress_callback = null) {
        this.instance ??= pipeline(this.task, this.model, { progress_callback });

        return this.instance;
    }
}

const inputElement = document.getElementById('text');
const outputElement = document.getElementById('output');

// Listen for changes made to the textbox.
inputElement.addEventListener('input', async (event) => {

    // Bundle the input data into a message.
    const message = {
        action: 'classify',
        text: event.target.value,
    }

    let model = await PipelineSingleton.getInstance();
    let result = await model(message.text);
    outputElement.innerText = JSON.stringify(result, null, 2);
});

if the recommendation is just to use background scripts for working with the huggingface library and utilize the chrome messaging API to take acton from the popup, that is totally valid and I can just update my project.

[cometta]

i also faced same error

[SpeedyGonzaless]

Same for me

[adam-s]

Chrome extensions ship with a strict, built-in Content Security Policy (CSP) for all “extension pages” (popups, options pages, service workers, offscreen canvases, etc.) that by default only permits scripts and objects from the extension’s own package and disallows inline code, eval-style operations, and loading from blob: or data: URLs. Under Manifest V3, these script-loading directives may only specify the special sources 'self', 'none', and—in unpacked development builds—http://localhost or http://127.0.0.1 (with any port). Any attempt to load or execute script code from other origins or via blob:/data: URIs (for example, building a worker from a Blob or injecting raw code with chrome.scripting.executeScript/injectScript()) will be blocked by CSP. Separately, if your extension needs to serve any assets (including JavaScript files) to web pages or content scripts, those assets must be explicitly listed under the web_accessible_resources key in the manifest; otherwise fetches or URL-based loads of those files will also be denied.

Here is the code that fails:

try {
      await wr(ge.wasm),
      await vr(ge),
      sn = !0;
  } catch (e) {
      throw un = true,
      e
  } finally {
      rr = false;
  }

ge = {
  "logLevel": "...",
  "versions": {
    "common": "1.22.0-dev.20250409-89f8206ba4",
    "web": "1.22.0-dev.20250409-89f8206ba4"
  },
  "wasm": {
    "wasmPaths": "https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.5.0/dist/",
    "proxy": false,
    "initTimeout": 0,
    "trace": false,
    "numThreads": 1
  },
  "webgl": {},
  "webgpu": {
    "powerPreference": "high-performance"
  },
  "get logLevel": "ƒ logLevel()",
  "set logLevel": "ƒ logLevel(e)"
}

        Oa = async (e, t, r) => {
            if (!e && !t && Aa && Ue && Ln(Ue))
                return [void 0, Aa];
            {
                let n = "ort-wasm-simd-threaded.jsep.mjs"
                  , o = e ?? Kp(n, t)
                  , i = r && o && !Ln(o, t)
                  , a = i ? await Pa(o) : o ?? Zp(n, t);
                return [i ? a : void 0, await Qp(a)]
            }
        }

Qp = async e => (await import(/*webpackIgnore:true*/
        e)).default

Transormers.js works fantastic in the Chrome Extension except when it is trying to fetch and execute external scripts at runtime.

Integrating Transformaers.js enormously powerful because extension_pages like the side panel use the same Chrome Debugging Protocol (CDP) under the hood and can do almost everything a headless browser server can do except a handful such as going fullscreen, playing sound, or anything defined by a developer to require trusted events which are physically tapping a key or pressing a mouse button.

All resources and scripts need to be bundled at compile time for a Chrome Extension to work. That is the one caveat.

It would be nice if developers could build a bundled version and link or move into their project. Is that possible now?

I read the docs and this looks promising. I'll get back to you if it works.

import { env } from '@huggingface/transformers';

// Specify a custom location for models (defaults to '/models/').
env.localModelPath = '/path/to/models/';

// Disable the loading of remote models from the Hugging Face Hub:
env.allowRemoteModels = false;

// Set location of .wasm files. Defaults to use a CDN.
env.backends.onnx.wasm.wasmPaths = '/path/to/files/';

[adam-s]

In the context of a Chrome Extension, this issue happens because all scripts executed in a Chrome Extension due to a strict Content Security Policy(CSP) have to be bundled and made accessible using the web_accessible_resources key in manifest.json. I am able to download the model as normal and it gets cached. This is only for scripts that are executed.

I put the file in question in the root of the Chrome Extension and set env.backends.onnx.wasm.wasmPaths = "" which solved this problem.

This issue likely can be closed!

[xenova]

I put the file in question in the root of the Chrome Extension and set env.backends.onnx.wasm.wasmPaths = "" which solved this problem.

Thanks for testing it out. Glad you got it working. Ideally, we should auto-detect the environment and either set or disable wasmPaths accordingly. Perhaps you could open a PR to update this section so that it works by default?

transformers.js/src/backends/onnx.js

Lines 178 to 186 in 0901fce

	// (Optional) Set path to wasm files. This will override the default path search behavior of onnxruntime-web.
	// By default, we only do this if we are not in a service worker and the wasmPaths are not already set.
	if (
	// @ts-ignore Cannot find name 'ServiceWorkerGlobalScope'.ts(2304)
	!(typeof ServiceWorkerGlobalScope !== 'undefined' && self instanceof ServiceWorkerGlobalScope)
	&& !ONNX_ENV.wasm.wasmPaths
	) {
	ONNX_ENV.wasm.wasmPaths = `https://cdn.jsdelivr.net/npm/@huggingface/transformers@${env.version}/dist/`;
	}

[adam-s]

When I get a moment I'll create a pull request.

The issue is detecting Content Security Policy and likely will need to check in the env.js file using a small utility to discover support and capabilities.

Prior art: jQuery feature detection and support tests and CSP Evaluator Core Library

// 1. Test for 'unsafe-eval'
function canUseEval() {
  try {
    eval('0');
    return true;
  } catch {
    return false;
  }
}

// 2. Test for 'unsafe-inline'
function canUseInlineScripts() {
  const marker = '__csp_inline_test__';
  // clean up any previous marker
  window[marker] = false;
  const s = document.createElement('script');
  s.textContent = `window['${marker}'] = true;`;
  document.documentElement.appendChild(s);
  document.documentElement.removeChild(s);
  return window[marker] === true;
}

// 3. Test loading an external script
function canLoadExternalScript(src, timeout = 3000) {
  return new Promise(resolve => {
    const s = document.createElement('script');
    let done = false;
    s.src = src;
    s.onload = () => { if (!done) { done = true; resolve(true); } };
    s.onerror = () => { if (!done) { done = true; resolve(false); } };
    document.head.appendChild(s);
    // fallback in case neither fires
    setTimeout(() => { if (!done) { done = true; resolve(false); } }, timeout);
  });
}

// 4. Hook CSP violation events
function onCSPViolation(callback) {
  document.addEventListener('securitypolicyviolation', callback);
}

// 5. Read CSP from <meta>
function getPolicyFromMeta() {
  const m = document.querySelector('meta[http-equiv="Content-Security-Policy"]');
  return m ? m.content : null;
}

// 6. Read CSP from response headers (same-origin URL)
async function getPolicyFromHeader(url) {
  try {
    const res = await fetch(url, { method: 'HEAD' });
    return res.headers.get('Content-Security-Policy');
  } catch {
    return null;
  }
}