Skip to content

Loading MathJax in a Chrome extension #3329

@maxdudek

Description

@maxdudek

Hi!

I am very new to JavaScript programming so I apologize for this very basic issue, but I really need someone to show me what I'm doing wrong.

Issue Summary

I am trying to create a Chrome extension which renders ASCII text on webpages using a local copy of MathJax, but when I test it, MathJax loading is blocked by CSP:

tex-mml-chtml.js:1 Refused to load the script 'https://../es5/input/asciimath.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:* chrome-extension://d9272ae4-ea80-492e-a847-191300b9c6fa/". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback. 

I tried following along with instructions in #256 but I'm a JS newbie and am not really sure how it applies to Chrome Extensions.

Steps to Reproduce:

  1. Clone https://github.com/maxdudek/mathjax-chrome-example
  2. Load the repo into Chrome as an unpacked extension
  3. Visit https://oeis.org/A000108 using Chrome and check the console for the above error

Technical details:

  • MathJax Version: 3.2.2
  • Client OS: Windows 10
  • Browser: Chrome v132.0.6834.160

I am using the following MathJax configuration:

MathJax = { loader: { load: ['input/asciimath', 'output/chtml'] } };

and loading MathJax as a content script via manifest.json:

{ "manifest_version": 3, "web_accessible_resources": [ { "resources": ["mathjax/*", "mathjax-config.js"], "matches": [ "https://oeis.org/*" ] } ], "content_scripts": [ { "js": ["scripts/content.js", "mathjax-config.js", "mathjax/es5/tex-mml-chtml.js"], "matches": [ "https://oeis.org/*" ] } ], "content_security_policy": { "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; font-src 'self'; style-src 'self' 'unsafe-inline'" } }

Supporting information:

Note that content.js is empty (I'm just trying to "Hello World" this right now), and I've placed the MathJax 3.2.2 src in mathjax/*. I should also mention I've tried several variations of the "content_security_policy" config in manifest.json - Chrome no longer allows you to permit 'unsafe-eval' or 'inline-speculation-rules'.

I'm sure that I'm just doing something wrong with my setup, so any insights would be appreciated!

- Max

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions