Allow Chrome extension to load MathJax

I want to create a simple Chrome extension to have in my browser, such that when manually switched on, it loads MathJax and this transforms whichever content of the page it understands is an equation.

I took the complete example from Chrome’s developers’ Getting Started. The link to the extension is this.

The sample extension changes the pages background color.

I modified their function setPageBackgroundColor, in popup.js, as follows. The part with the anonymous function is what I added.

function setPageBackgroundColor() {
    chrome.storage.sync.get("color", ({ color }) => {
        document.body.style.backgroundColor = color;
        (function () {
            var head = document.getElementsByTagName("head")[0], script;
            script = document.createElement("script");
            script.type = "text/x-mathjax-config";
            alert('Hi there!');
            script[(window.opera ? "innerHTML" : "text")] =
                "MathJax.Hub.Config({\n" +
                "  tex2jax: { inlineMath: [['$','$'], ['\\\\(','\\\\)']] }\n" +
                "});";
            head.appendChild(script);
            script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?...";
            head.appendChild(script);
        })();
    });
}

In other question in this site I read about having to allow in manifest.json that the extension is allowed to load content from the site where MathJax is being loaded.

I added to the manifest the following two key-value pairs.

"content_scripts": [
    {
      "js": ["https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?..."]
    }
  ],
"content_security_policy": "script-src 'self' https://cdnjs.cloudflare.com; object-src 'self'"

This is still not correct. It produces

Refused to load the script 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?...' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

What is the correct way to enable this in the manifest.

Tags