Chrome扩展SE MathJax因CSP违规无法渲染数学公式求助

问题根源 #

Stack Exchange的内容安全策略（CSP）禁止页面从未授权外部源加载脚本，你当前代码直接从外部CDN插入MathJax脚本，触发了CSP拦截；同时MathJax渲染SVG涉及的资源加载，也会受CSP限制。

解决方案 #

1. 将MathJax打包到扩展内部 #

把MathJax脚本和依赖文件下载到扩展目录，避免从外部CDN加载：

• 下载MathJax 3.2.2的完整包（或至少包含tex-svg.js及核心依赖），解压到扩展目录的mathjax子文件夹。
• 修改扩展代码，使用本地资源路径：

// 先注入MathJax配置
var configScript = document.createElement("script");
configScript.textContent = `
  MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\\(', '\\)']]
    }
  };
`;
document.head.appendChild(configScript);

// 加载本地MathJax脚本
var script = document.createElement("script");
script.src = chrome.runtime.getURL("mathjax/es5/tex-svg.js");
document.head.appendChild(script);

• 在扩展manifest.json中配置资源访问权限，允许SE页面读取本地MathJax文件：

{
  "manifest_version": 3,
  // 其他基础配置（名称、版本等）...
  "web_accessible_resources": [
    {
      "resources": ["mathjax/**/*"],
      "matches": ["*://chat.stackexchange.com/*", "*://chat.math.stackexchange.com/*", "*://chat.physics.stackexchange.com/*"]
    }
  ],
  "content_scripts": [
    {
      "matches": ["*://chat.stackexchange.com/*", "*://chat.math.stackexchange.com/*", "*://chat.physics.stackexchange.com/*"],
      "js": ["你的扩展主脚本文件.js"],
      "run_at": "document_start"
    }
  ]
}

2. 改用Content Script注入逻辑 #

Chrome扩展的Content Script拥有特殊权限，可绕过部分CSP限制：

• 将MathJax初始化逻辑放到Content Script文件中，直接在隔离上下文执行；若需在页面全局上下文加载MathJax，可通过chrome.scripting.executeScript注入本地脚本：

// 在Content Script中执行此代码
chrome.scripting.executeScript({
  target: { tabId: 当前标签ID },
  files: ["mathjax/es5/tex-svg.js"]
});

关键注意事项 #

• 确保manifest.json的matches覆盖你常用的SE聊天域名（物理、数学聊天室）。
• 必须显式配置MathJax的inlineMath参数，确保识别$...$格式的行内公式。

内容的提问来源于stack exchange，提问作者Claudio