JavaScript：Firefox/Chrome扩展中静默获取不响应fetch的网页源码

遇到这种情况太头疼了对吧？尤其是目标网站搞了CORS限制或者反爬校验，普通的fetch()根本拿不到响应。结合你说的场景（每次点击生成不同的带SM_TOKEN的URL），我给你几个经过实践验证的方案：

方案1：用后台脚本发起请求（最推荐） #

前端页面的fetch()受CORS政策限制，但扩展的后台脚本（Chrome是Service Worker，Firefox是Background Script）拥有更高的权限，完全不受CORS约束。

步骤如下：

• 在扩展的manifest.json里配置后台脚本权限，同时声明目标域名的访问权限：

  {
    "manifest_version": 3,
    "background": {
      "service_worker": "background.js"
    },
    "permissions": ["tabs", "https://smmry.com/*"]
  }
  

• 在你的弹窗脚本（popup.js）里，点击按钮时给后台脚本发送消息，传递动态生成的URL：

  document.getElementById('fetch-btn').addEventListener('click', () => {
    const dynamicUrl = generateYourDynamicUrl(); // 你的URL生成逻辑
    chrome.runtime.sendMessage({ action: 'fetchPage', url: dynamicUrl }, (response) => {
      if (response.success) {
        console.log('页面源码:', response.html);
        // 这里处理拿到的源码
      } else {
        console.error('请求失败:', response.error);
      }
    });
  });
  

• 在background.js里监听消息，发起请求并返回结果：

  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'fetchPage') {
      fetch(request.url, {
        credentials: 'include', // 带上当前会话的Cookie，这对SM_TOKEN的验证很重要
        headers: {
          'User-Agent': navigator.userAgent, // 模拟浏览器的User-Agent
          'Referer': 'https://smmry.com/' // 带上来源页，避免反爬拦截
        }
      })
      .then(res => res.text())
      .then(html => sendResponse({ success: true, html }))
      .catch(err => sendResponse({ success: false, error: err.message }));
      return true; // 保持消息通道开放，等待异步响应
    }
  });
  

方案2：通过隐藏标签页+内容脚本获取源码 #

如果目标网站对后台脚本的请求也做了校验（比如需要真实的页面上下文），可以创建一个隐藏的标签页加载目标URL，再用内容脚本抓取源码：

// 弹窗脚本里的点击事件
document.getElementById('fetch-btn').addEventListener('click', () => {
  const dynamicUrl = generateYourDynamicUrl();
  chrome.tabs.create({ url: dynamicUrl, active: false, hidden: true }, (tab) => {
    // 等待页面加载完成后注入内容脚本
    chrome.tabs.onUpdated.addListener(function listener(tabId, info) {
      if (tabId === tab.id && info.status === 'complete') {
        chrome.tabs.executeScript(tabId, {
          code: 'document.documentElement.outerHTML'
        }, (results) => {
          if (results && results[0]) {
            console.log('页面源码:', results[0]);
            // 处理源码
          }
          chrome.tabs.remove(tab.id); // 删掉隐藏标签页
          chrome.tabs.onUpdated.removeListener(listener); // 移除监听
        });
      }
    });
  });
});

注意：Firefox里hidden参数可能需要额外配置，或者用active: false配合CSS隐藏，但Chrome支持直接隐藏标签页。

关键注意事项 #

• 会话关联：那个SM_TOKEN大概率和用户的会话Cookie绑定，所以请求时一定要带上credentials: 'include'，确保后台脚本能复用当前浏览器的会话。
• 反爬规避：尽量模拟浏览器的请求头（User-Agent、Referer、Accept等），不要频繁发起请求，避免被目标网站封禁IP。
• 权限配置：一定要在manifest.json里声明目标域名的访问权限，否则请求会被浏览器拦截。

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