如何不使用fetch/XMLHttpRequest获取browser.tabs.create创建标签页的HTTP状态码？

你之前用tabs.onUpdated的方法无法拿到HTTP状态码，核心原因是浏览器扩展的Tabs API本身不暴露HTTP响应状态码——changeInfo和tab对象仅提供标签页的加载状态（loading/complete）、URL变化等UI层面的信息，和网络响应的细节无关。

要在不使用fetch/XHR的前提下获取状态码，必须借助webRequest API，它是扩展中专门用于监控浏览器网络请求的接口。以下是具体实现方案：

1. 配置Manifest权限 #

首先在扩展的manifest.json中添加必要权限，确保能监听目标网络请求：

{
  "manifest_version": 3,
  "name": "Tab Status Monitor",
  "version": "1.0",
  "permissions": ["tabs", "webRequest"],
  "host_permissions": ["<all_urls>"] // 或指定目标域名，比如"https://exampleforerror.com/*"
}

2. 编写监听逻辑 #

创建标签页时记录其tabId，通过webRequest监听该标签页的主文档请求，精准获取状态码：

// 创建目标标签页
browser.tabs.create({
  url: 'https://exampleforerror.com/',
  active: false
}).then(createdTab => {
  const targetTabId = createdTab.id;

  // 监听请求完成事件，获取HTTP状态码
  const handleRequestComplete = details => {
    // 仅处理目标标签页的主文档请求（过滤图片、脚本等资源请求）
    if (details.tabId === targetTabId && details.type === 'main_frame') {
      console.log(`主文档HTTP状态码: ${details.statusCode}`);
      // 完成后移除监听，避免重复触发
      cleanupListeners();
    }
  };

  // 监听请求错误事件（处理DNS失败、连接超时等非HTTP状态码错误）
  const handleRequestError = details => {
    if (details.tabId === targetTabId && details.type === 'main_frame') {
      console.log(`请求错误: ${details.error}`);
      cleanupListeners();
    }
  };

  // 移除监听的辅助函数
  function cleanupListeners() {
    browser.webRequest.onCompleted.removeListener(handleRequestComplete);
    browser.webRequest.onErrorOccurred.removeListener(handleRequestError);
  }

  // 添加监听
  browser.webRequest.onCompleted.addListener(
    handleRequestComplete,
    { urls: ["<all_urls>"], tabId: targetTabId }
  );

  browser.webRequest.onErrorOccurred.addListener(
    handleRequestError,
    { urls: ["<all_urls>"], tabId: targetTabId }
  );
});

关键说明 #

• webRequest.onCompleted会捕获所有成功完成的请求，details.statusCode包含标准HTTP状态码（200、404、500等）。
• webRequest.onErrorOccurred用于处理网络层面的错误（比如无法连接、DNS解析失败），这类场景没有HTTP状态码，只能获取错误描述。
• 过滤type: 'main_frame'是为了只获取标签页主页面的响应，避免捕获无关资源请求的状态码。

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