Firefox扩展中Javascript Fetch API无法加载的解决办法及替代方案

作为刚接触浏览器扩展开发的新手，你遇到的这个问题其实很常见，主要和Firefox扩展的**内容安全策略（CSP）**以及脚本执行限制有关。我会一步步帮你排查解决，同时也会给出替代方案。

一、核心问题分析：Inline脚本被CSP拦截 #

你的test.html里直接写了inline的<script>代码，而Firefox扩展（Manifest v2）默认的内容安全策略是禁止inline JavaScript的——这是为了提升扩展的安全性，防止注入攻击。所以你的Fetch代码根本没机会执行，自然无法加载文件。

二、修复步骤 #

1. 把Inline脚本移到外部JS文件 #

首先，创建一个外部JS文件，比如popup/fetch-script.js，把你的Fetch代码移进去：

// fetch-script.js
fetch('http://localhost/test/test.txt')
  .then(x => x.text())
  .then(y => document.getElementById("demo").innerHTML = y);

然后修改test.html，移除inline脚本，引入外部JS：

<!DOCTYPE html>
<html>
<body>
<p id="demo">Fetch a file to change this text.</p>
<script src="fetch-script.js"></script>
</body>
</html>

2. 确认权限配置（已满足，但再检查） #

你的manifest.json里已经添加了"http://*/*"和"https://*/*"权限，这已经允许扩展向任意HTTP/HTTPS地址发起请求，包括你的localhost地址，这部分没问题。

3. （可选）自定义内容安全策略（如果需要更灵活的设置） #

如果之后还有其他脚本执行需求，可以在manifest.json里添加content_security_policy字段，明确允许脚本来源。比如允许扩展自身的脚本和localhost的请求：

{
  "manifest_version": 2,
  "name": "test",
  "version": "1",
  "description": "test",
  "permissions": ["storage", "activeTab", "tabs", "http://*/*", "https://*/*"],
  "content_security_policy": "script-src 'self' http://localhost; object-src 'self'",
  "browser_action": {
    "default_title": "test",
    "default_popup": "popup/test.html"
  }
}

注意：尽量遵循最小权限原则，不要随便放宽CSP限制。

三、替代方案：除了Fetch还有这些选择 #

如果你因为某些原因不想用Fetch，或者需要更复杂的请求场景，这些方案也可以试试：

1. XMLHttpRequest #

这是Fetch之前的传统异步请求方式，兼容性很好，在扩展里同样可以使用（同样要放在外部JS文件里）：

// fetch-script.js
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost/test/test.txt', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    document.getElementById("demo").innerHTML = xhr.responseText;
  }
};
xhr.send();

2. 借助Background脚本发起请求 #

如果你的请求涉及更复杂的跨域场景，或者需要在后台处理，可以把请求逻辑放在background脚本里，通过消息传递和popup通信：

• 首先在manifest.json里添加background脚本：

{
  // ...其他配置
  "background": {
    "scripts": ["background.js"]
  }
}

• 创建background.js：

// background.js
browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === 'fetchFile') {
    fetch('http://localhost/test/test.txt')
      .then(x => x.text())
      .then(y => sendResponse(y))
      .catch(err => sendResponse(err.message));
    return true; // 告诉浏览器要异步发送响应
  }
});

• 修改fetch-script.js，发送消息给background：

// fetch-script.js
browser.runtime.sendMessage({type: 'fetchFile'})
  .then(response => {
    document.getElementById("demo").innerHTML = response;
  })
  .catch(err => {
    document.getElementById("demo").innerHTML = '请求失败：' + err;
  });

这种方式的好处是background脚本拥有更高的权限，适合处理需要持久化或跨域的请求。

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