Uncaught TypeError using MathJax in a JavaScript file

Question

I am trying to write a browser extension for Firefox and want to use MathJax to show Mathematics in WhatsApp Web using Tex Notation. Whenever I try to load MathJax though, I get the following error:

The Error Code displayed in Firefox

This is the code that I have so far to inject MathJax into the website:

  MathJax = {
    tex: {
      inlineMath:[['$', '$'],['\\(','\\)']]
    }
  }
  

const script = document.createElement('script');
script.type = 'text/javascript'
script.src = 'moz-extension://43ecc479-a843-4102-b4dc-afee633fe04a/MathJax/es5/tex-mml-chtml.js';
document.head.appendChild(script);

The Script source is the locally saved MathJax Version. I can not use a CDN because of the same origin policy.

I tried to use a different js File in MathJax, like the tex-chtml.js file but got the same error.

You need to declare `web_accessible_resources` and use browser.runtime.getURL('MathJax/es5/tex-mml-chtml.js') instead of the full URL. — wOxxOm, Aug 15 '23 at 05:44

score 1 · Answer 1 · answered Aug 15 '23 at 04:35

It looks like you're trying to inject MathJax into a webpage using a Firefox browser extension. The error you're encountering might be related to the way the extension is interacting with the webpage's JavaScript context. Let's go through some steps to troubleshoot and resolve this issue:

Check the Extension Permissions: Make sure your extension has the necessary permissions to inject scripts into the webpage. In your extension's manifest.json file, ensure you have the appropriate permission for the webpage you're trying to modify. For example:
```
"permissions": [
  "activeTab"
],
```

Script Execution Order: Sometimes, errors can occur if scripts are executed in the wrong order. Try wrapping your script injection code in an event listener to ensure it's executed after the page is fully loaded:

window.addEventListener('load', () => {
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };

  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'moz-extension://.../MathJax/es5/tex-mml-chtml.js';
  document.head.appendChild(script);
});

Check Local Path: Ensure that the path to the MathJax script is correct and accessible from within the extension. You might need to adjust the path based on the structure of your extension's files.

Avoid Overwriting MathJax: If MathJax is already being loaded on the page by WhatsApp Web, overwriting it with your own settings might cause conflicts. Instead of setting MathJax directly, you can try using MathJax.Hub.Config to configure MathJax.

window.addEventListener('load', () => {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'moz-extension://.../MathJax/es5/tex-mml-chtml.js';
  script.onload = () => {
    MathJax.Hub.Config({
      tex2jax: {
        inlineMath: [['$', '$'], ['\\(', '\\)']]
      }
    });
  };
  document.head.appendChild(script);
});

Debugging: If none of the above steps work, consider using the browser's developer tools to inspect the console for more detailed error messages. This can provide insights into what might be going wrong.
Testing with Remote Resources: While you mentioned you can't use a CDN due to same-origin policy, for debugging purposes, you might consider temporarily using remote resources to check if the issue is related to your locally saved MathJax version.

Remember that browser extensions can be finicky due to the security and isolation they provide, so troubleshooting often involves experimentation and testing.

Uncaught TypeError using MathJax in a JavaScript file

1 Answers1