如何使用Firefox扩展获取页面加载站点IP及请求头数据

核心解决方案：调用Firefox webRequest API 获取真实连接IP #

该方案拿到的IP和你在「Network Monitor ⇾ Header」面板看到的完全一致，是实际和站点建立连接的IP，不受CDN、DNS缓存、本地Hosts配置影响，准确性远高于DNS查询类方案。

配置步骤 #

• 第一步：在扩展的manifest.json中声明必要权限：

  {
    "manifest_version": 3,
    "name": "获取站点IP示例",
    "version": "1.0",
    "background": {
      "scripts": ["background.js"]
    },
    "permissions": ["webRequest"],
    "host_permissions": ["<all_urls>"]
  }
  

  如果你使用Manifest V2，将host_permissions合并到permissions数组，同时补充"webRequestBlocking"权限即可。
• 第二步：在后台脚本background.js中监听请求事件，获取IP：

  // 监听主文档加载完成事件，获取当前页面的真实IP
  browser.webRequest.onCompleted.addListener(
    (details) => {
      // details.remoteAddress 就是本次请求实际连接的IP地址
      const currentPageIP = details.remoteAddress;
      console.log("当前页面站点IP：", currentPageIP);
      // 可在此处把IP存储到本地，供扩展其他逻辑调用
    },
    {urls: ["<all_urls>"], types: ["main_frame"]} // 只监听主页面请求，过滤静态资源等其他请求
  );
  

补充问题解答：JavaScript获取请求头方案 #

同样可以通过webRequest API实现，不需要依赖其他接口：

// 监听请求发送前事件，获取请求头
browser.webRequest.onBeforeSendHeaders.addListener(
  (details) => {
    const requestHeaders = details.requestHeaders;
    // 遍历即可拿到所有请求头字段
    requestHeaders.forEach(header => {
      console.log(`请求头：${header.name} = ${header.value}`);
    });
  },
  {urls: ["<all_urls>"], types: ["main_frame"]},
  ["requestHeaders"] // 声明需要获取请求头
);
// 如果需要获取响应头，替换为监听onHeadersReceived事件，取details.responseHeaders即可

注意事项 #

• 该API仅能在扩展的后台上下文调用，无法在页面注入的内容脚本中直接调用，需要通过扩展的消息通信机制把数据传递给内容脚本使用。
• 如果需要支持隐私浏览模式，需要在扩展设置中开启「允许在隐私窗口运行」权限。

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