Firefox扩展使用JS文件时遭遇Content Security Policy问题

这个错误的根源很明确：Firefox扩展的默认**Content Security Policy（CSP）**禁止内联脚本，包括HTML元素上的onclick这类内联事件属性——这是浏览器扩展的安全要求，用来防范XSS攻击。外部JS文件能正常运行，是因为CSP允许从self（自身扩展资源）加载的脚本，而内联脚本不在允许范围内。

下面给你两种可行的解决方案，优先推荐第一种：

方案一：移除内联事件，使用事件监听器绑定（推荐） #

这是最符合现代前端规范和扩展安全要求的做法，步骤也很简单：

1. 给你的span元素添加一个唯一ID，方便后续获取：

<span id="menuToggle" style="font-size:30px;cursor:pointer">&#9776;</span>

2. 修改settings.js，在页面加载完成后用addEventListener绑定点击事件：

function openNav() {
 document.getElementById("mySettings").style.width = "325px";
}
function closeNav() {
 document.getElementById("mySettings").style.width = "0";
}

// 确保DOM加载完成后再绑定事件
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('menuToggle').addEventListener('click', openNav);
});

这样就彻底避开了内联脚本，完全符合CSP的要求，同时代码也更易于维护和调试。

方案二：调整CSP允许特定内联脚本（不推荐） #

如果因为特殊需求必须保留内联事件，你可以在manifest.json中配置CSP，通过哈希值允许指定的内联脚本（注意：Firefox扩展不允许直接使用unsafe-inline，必须用哈希或nonce）：

1. 先计算你内联脚本onclick="openNav()"的SHA-256哈希值（可以用浏览器控制台或者在线哈希工具生成）。
2. 在manifest.json中添加content_security_policy字段，把哈希值加入允许列表：

{
 "manifest_version": 2,
 "name": "CPS error",
 "version": "1.0",
 "description": "CPS error",
 "icons": {
 "48": "icons/border-48.png"
 },
 "permissions": ["storage", "tabs","geolocation"],
 "chrome_settings_overrides": {
 "homepage": "public/index.html"
 },
 "chrome_url_overrides": {
 "newtab": "public/index.html"
 },
 "content_security_policy": "script-src 'self' 'sha256-你的哈希值'; object-src 'self'"
}

⚠️ 注意：这种方法的缺点很明显——只要内联脚本的内容有任何修改，哈希值就会失效，需要重新计算更新，维护成本高，同时也会降低扩展的安全性，所以只建议在万不得已时使用。

总的来说，方案一是最优选择，既满足安全要求，也更符合前端开发的最佳实践。

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