Chrome扩展本地脚本违反CSP，manifest.json配置的script-src-elem未被识别

嘿，我来帮你拆解这个问题～ 你遇到的两个核心问题其实是CSP配置作用域不对和MathJax动态加载资源的路径解析错误，咱们一步步解决：

为什么你的script-src-elem没生效？ #

你把script-src-elem放在了extension_pages的CSP规则里，但这个字段管的是扩展自己的页面（比如弹窗、设置页），而内容脚本的运行环境和扩展页面是完全隔离的！内容脚本的CSP规则需要单独用content_scripts字段来配置，所以你的规则根本没覆盖到MathJax动态加载脚本的场景。

为什么MathJax会加载错误的脚本路径？ #

你直接把tex-mml-chtml.js作为内容脚本加载，它会自动动态创建<script>标签加载依赖（比如asciimath.js），但它用的相对路径//../../es5/input/asciimath.js会被解析成目标网站域名下的路径，而不是你扩展内的本地资源，这就触发了CSP拦截。

具体修复步骤 #

1. 修正manifest.json的CSP配置

更新content_security_policy，给内容脚本单独配置规则，允许加载扩展自身的资源：

"content_security_policy": {
  "extension_pages": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval'; font-src 'self'; style-src 'self' 'unsafe-inline';",
  "content_scripts": "default-src 'self'; script-src 'self' 'wasm-unsafe-eval' chrome-extension://${chrome.runtime.id}; script-src-elem 'self' 'wasm-unsafe-eval' chrome-extension://${chrome.runtime.id};"
}

chrome-extension://${chrome.runtime.id}是Chrome提供的占位符，会自动替换成你的扩展实际ID，确保允许加载扩展内的脚本资源。

2. 调整MathJax的加载方式

不要直接把MathJax脚本作为内容脚本加载，而是在content.js中动态加载，同时指定MathJax的资源根路径为扩展的绝对URL：
首先修改manifest.json的content_scripts，只加载content.js：

"content_scripts": [
  {
    "js": ["content.js"],
    "matches": ["https://oeis.org/*"]
  }
]

然后在content.js中添加以下代码：

// 先加载MathJax配置文件
const configScript = document.createElement('script');
configScript.src = chrome.runtime.getURL('mathjax-config.js');
document.head.appendChild(configScript);

// 提前配置MathJax的资源加载路径，避免相对路径错误
window.MathJax = window.MathJax || {};
window.MathJax.config = window.MathJax.config || {};
window.MathJax.config.loader = {
  paths: {
    mathjax: chrome.runtime.getURL('mathjax/es5')
  }
};

// 加载MathJax主脚本
const mathjaxScript = document.createElement('script');
mathjaxScript.src = chrome.runtime.getURL('mathjax/es5/tex-mml-chtml.js');
document.head.appendChild(mathjaxScript);

这样MathJax会用扩展的绝对URL加载所有依赖，不会再解析成目标网站的路径。

3. 确认web_accessible_resources配置

你的现有配置已经正确开放了MathJax资源，保持即可：

"web_accessible_resources": [
  {
    "resources": ["mathjax/*", "mathjax-config.js"],
    "matches": ["https://oeis.org/*"]
  }
]

做完这些调整后，重新加载扩展，访问目标网站应该就不会再触发CSP错误了。如果还有问题，可以检查一下Chrome扩展的控制台（不是目标网站的控制台），看看有没有其他资源加载的问题。

备注：内容来源于stack exchange，提问作者Max Dudek