下面有幾個方向可以檢查和調整，解決你在內容腳本中使用 fetch API 時出現網絡錯誤問題：

1. 檢查代理 URL 拼寫

你提供的 fetch URL 為

https://cors-aywhere.herokuapp.com/https://itunes.apple.com/search?term=不良大叔 Naughty Uncles&country=US

仔細觀察後可以發現： "cors-aywhere" 可能是打錯了，正確應該是 "cors-anywhere"（注意其中的 n 字母）。錯誤的 URL 會導致無法找到資源、解析失敗，從而產生類似的網絡錯誤。

2. 對 URL 參數進行正確編碼

URL 中包含空格和中文，如果直接寫入會破壞 URL 格式。你可以使用 JavaScript 提供的 encodeURIComponent() 函數來處理查詢字串。例如：

(function () {
  // 將查詢關鍵字做編碼
  const term = encodeURIComponent("不良大叔 Naughty Uncles");
  // 拼接正確的 URL（注意 cors-anywhere 的拼寫）
  const url = `https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${term}&country=US`;
  
  fetch(url)
    .then(response => {
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    })
    .then(data => {
      console.log("Fetched data:", data);
    })
    .catch(error => {
      console.error("Fetch error:", error);
    });
})();

這樣可以避免因 URL 格式錯誤而引起的問題。

3. 擴展權限與腳本執行環境

在瀏覽器擴展中，如果你希望從內容腳本發送跨域請求，除了能正確構造 URL 外，還需要注意以下幾點：

• 權限設置： 確保你的 manifest.json 中包含對目標資源的權限。例如，如果你的請求最終目標是 https://itunes.apple.com/（或代理服務所在的域），建議添加相應的權限：

  json

  Copy

  {
    "manifest_version": 2,
    "name": "Podcast Fetcher",
    "version": "1.0",
    "permissions": [
      "https://itunes.apple.com/",
      "https://cors-anywhere.herokuapp.com/"
    ],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "content_scripts": [
      {
        "matches": ["https://podcasts.apple.com/*"],
        "js": ["main.js"]
      }
    ]
  }
  

• CSP 限制： 某些網頁自身有嚴格的內容安全政策（CSP），該政策可能會影響內容腳本中的外部請求。在這種情況下，可以考慮將 fetch 請求移到背景腳本中，利用背景腳本較寬鬆的權限通過消息傳遞返回結果給內容腳本。

  例如，在背景腳本中進行 fetch 請求：

  javascript

  Copy

  // background.js
  browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === "fetchData") {
      const term = encodeURIComponent("不良大叔 Naughty Uncles");
      const url = `https://cors-anywhere.herokuapp.com/https://itunes.apple.com/search?term=${term}&country=US`;
      
      fetch(url)
        .then(response => response.json())
        .then(data => sendResponse({success: true, data: data}))
        .catch(error => sendResponse({success: false, error: error.message}));
      
      // 返回 true 表示異步回應
      return true;
    }
  });
  

  然後在內容腳本 main.js 中調用：

  javascript

  Copy

  // main.js
  browser.runtime.sendMessage({ action: "fetchData" }, response => {
    if (response.success) {
      console.log("Fetched data:", response.data);
    } else {
      console.error("Fetch error:", response.error);
    }
  });
  

4. 驗證代理服務狀況

有時候使用的 CORS 代理也可能不穩定或存在其他限制，檢查下面幾點也很重要：

• 使用 https://cors-anywhere.herokuapp.com/ 官方頁面，看看是否需要先點擊按鈕來開啟臨時訪問權限，否則請求可能被拒絕。

• 如果代理服務存在限制（如流量或頻率限制），考慮使用其他 CORS 代理或自己搭建一個解決方案。

小結

你可以按照下列步驟逐一確認解決：

1. 核對 URL 拼寫： 確保 https://cors-anywhere.herokuapp.com/ 拼寫正確。

2. 編碼 URL 參數： 使用 encodeURIComponent() 處理包含空格和中文的查詢關鍵字。

3. 檢查 manifest 權限： 為 itunes.apple.com 和代理服務域名添加適當權限。

4. 考慮腳本環境： 如果內容腳本受 CSP 限制，嘗試將 fetch 請求放在背景腳本中。

5. 檢查代理服務： 確認代理服務狀態及是否需要開啟臨時授權。

這些措施應該能幫助你解決 "TypeError: NetworkError when attempting to fetch resource." 的問題。如果還有疑問或需要進一步調試的細節，我們可以繼續深入探討。