在 JavaScript 文件中使用 MathJax 时未捕获类型错误

Question

我正在尝试为 Firefox 编写一个浏览器扩展，并希望使用 MathJax 使用 Tex Notation 在 WhatsApp Web 中显示数学。每当我尝试加载 MathJax 时，都会收到以下错误：

这是我迄今为止将 MathJax 注入网站的代码：

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

脚本源是本地保存的MathJax版本。由于同源政策，我无法使用 CDN。

我尝试在 MathJax 中使用不同的 js 文件，例如 tex-chtml.js 文件，但遇到了相同的错误。

Answer 1

您似乎正在尝试使用 Firefox 浏览器扩展将 MathJax 注入网页。您遇到的错误可能与扩展程序与网页的 JavaScript 上下文交互的方式有关。让我们通过一些步骤来排查并解决此问题：

1. 检查扩展权限： 确保您的扩展程序具有将脚本注入网页所需的权限。在扩展程序的

   manifest.json

   文件中，确保您对尝试修改的网页拥有适当的权限。例如：

   "permissions": [
     "activeTab"
   ],
   

2. 脚本执行顺序： 有时，如果脚本以错误的顺序执行，可能会出现错误。尝试将脚本注入代码包装在事件侦听器中，以确保它在页面完全加载后执行：

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

3. 检查本地路径： 确保 MathJax 脚本的路径正确并且可以从扩展内访问。您可能需要根据扩展文件的结构调整路径。

4. 避免覆盖MathJax： 如果 MathJax 已通过 WhatsApp Web 加载到页面上，则使用您自己的设置覆盖它可能会导致冲突。您可以尝试使用

   MathJax

   来配置 MathJax，而不是直接设置

   MathJax.Hub.Config

   。

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

5. 调试： 如果上述步骤均不起作用，请考虑使用浏览器的开发人员工具检查控制台以获取更详细的错误消息。这可以提供有关可能出现问题的见解。

6. 使用远程资源进行测试： 虽然您提到由于同源策略而无法使用 CDN，但出于调试目的，您可能会考虑暂时使用远程资源来检查问题是否与本地保存的 MathJax 版本有关。

请记住，由于浏览器扩展提供的安全性和隔离性，浏览器扩展可能会很挑剔，因此故障排除通常涉及实验和测试。