Firefox扩展中Javascript Fetch API无法加载，求解决方法与替代方案

Hey there! As someone who’s built a handful of Firefox extensions, let’s figure out why your Fetch API isn’t loading and walk through some solutions plus alternative ways to grab files from a server in your extension.

First off, the most likely culprit here is Firefox’s default Content Security Policy (CSP) blocking inline scripts—a common gotcha for extension newbies using Manifest V2.

1. Fix the Core Problem: Inline Scripts Blocked by CSP #

Your test.html has inline JavaScript directly in the <script> tag, but Manifest V2 extensions come with a default CSP that disallows inline scripts for security reasons. That means your Fetch code probably isn’t even running!

Two Ways to Fix This: #

Option 1: Move Script to an External File (Recommended)

This is the safest and most compliant approach. Create a separate popup.js file in your popup folder:

// popup/popup.js
fetch('http://localhost/test/test.txt')
  .then(response => {
    if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
    return response.text();
  })
  .then(content => document.getElementById("demo").textContent = content)
  .catch(err => console.error('Fetch failed:', err));

Then update your test.html to reference this external script instead of inline code:

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

Option 2: Loosen CSP to Allow Inline Scripts (Not Recommended)

If you absolutely need inline code for testing, you can add a content_security_policy field to your manifest.json to permit it. Note that this weakens your extension’s security, so only use this temporarily:

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

2. Other Possible Issues to Check #

If fixing the CSP doesn’t resolve the problem, double-check these:

• Verify Your Server & URL: Make sure http://localhost/test/test.txt loads correctly in a regular Firefox tab. If your server uses a non-default port (like 8080), add it to the URL (e.g., http://localhost:8080/test/test.txt).
• Check Permissions: Your manifest.json already includes http://*/* and https://*/*, which covers localhost requests, but confirm there are no typos in the permissions array.
• Add Error Handling: Your original code doesn’t catch errors—adding a .catch() will help you see exactly what’s going wrong. Open the popup’s dev tools (right-click the popup → Inspect) to view console errors.

If you want other options for grabbing files in your extension, here are a few reliable ones:

1. XMLHttpRequest (Legacy but Reliable) #

Before Fetch existed, this was the standard way to make HTTP requests. It’s fully supported in Firefox extensions:

// popup/popup.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").textContent = xhr.responseText;
  } else {
    console.error(`Request failed with status: ${xhr.status}`);
  }
};

xhr.onerror = function() {
  console.error('Network error occurred');
};

xhr.send();

2. Use a Background Script for Requests #

Moving request logic to a background script keeps your popup UI clean and lets you handle more complex workflows. Here’s how:

1. Add a background script to manifest.json:

   {
     // ... existing fields
     "background": {
       "scripts": ["background.js"]
     }
   }
   

2. Write the request logic in background.js:

   // background.js
   browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
     if (request.action === 'fetchFile') {
       fetch(request.url)
         .then(res => res.text())
         .then(data => sendResponse({success: true, data}))
         .catch(err => sendResponse({success: false, error: err.message}));
       return true; // Tells Firefox we'll send an async response
     }
   });
   

3. Update popup.js to send a message to the background script:

   // popup/popup.js
   browser.runtime.sendMessage({action: 'fetchFile', url: 'http://localhost/test/test.txt'})
     .then(response => {
       if (response.success) {
         document.getElementById("demo").textContent = response.data;
       } else {
         console.error('Failed to fetch file:', response.error);
       }
     });
   

3. Download Files Directly with browser.downloads API #

If your goal is to save the server file to the user’s local machine, use Firefox’s built-in Downloads API. First, add the downloads permission to manifest.json:

"permissions": [ "storage", "activeTab", "tabs", "http://*/*", "https://*/*", "downloads" ]

Then use this code in your popup or background script:

browser.downloads.download({
  url: 'http://localhost/test/test.txt',
  filename: 'my-test-file.txt', // Name the file as it appears to the user
  conflictAction: 'uniquify' // Automatically rename if a file with the same name exists
}).then(downloadId => {
  console.log(`Download started! ID: ${downloadId}`);
}).catch(err => {
  console.error('Download failed:', err);
});

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