如何在Chrome扩展中通过JS编程获取当前网站的状态码？

要收集用户访问网站的状态码，核心是利用Chrome的chrome.webRequest API——它能监听浏览器的网络请求并获取响应信息，包括状态码。以下是具体实现步骤：

1. 配置Manifest文件（Manifest V3） #

首先在扩展的manifest.json中声明所需权限和后台服务：

{
  "manifest_version": 3,
  "name": "网站状态码追踪工具",
  "version": "1.0",
  "permissions": ["webRequest", "storage"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

• webRequest：允许监听网络请求
• storage：用于存储收集到的状态码记录
• host_permissions: ["<all_urls>"]：监听所有网站的请求，可根据需求限定特定域名
• service_worker：Manifest V3中替代后台页面的无状态脚本

2. 后台脚本监听请求状态 #

在background.js中注册chrome.webRequest.onCompleted事件，捕获请求完成时的状态码：

// background.js
chrome.webRequest.onCompleted.addListener(
  (details) => {
    // 仅收集主文档请求（过滤图片、脚本等资源请求）
    if (details.type === 'main_frame') {
      const statusRecord = {
        url: details.url,
        statusCode: details.statusCode,
        timestamp: new Date().toISOString()
      };
      
      // 将记录存储到Chrome本地存储
      chrome.storage.local.get('statusRecords', (result) => {
        const records = result.statusRecords || [];
        records.push(statusRecord);
        chrome.storage.local.set({ statusRecords: records });
      });
    }
  },
  { urls: ["<all_urls>"] },
  [] // 若需获取响应头可添加["responseHeaders"]，状态码无需额外参数
);

• details.type：过滤请求类型，main_frame对应页面主文档，若需收集子框架可添加sub_frame
• details.statusCode：直接获取响应状态码（200、404等）
• 用chrome.storage.local存储记录，避免后台脚本重启丢失数据

3. 弹窗页面展示记录 #

创建popup.html和popup.js，读取存储的记录并展示给用户：

popup.html #

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 320px; padding: 12px; margin: 0; }
    .record-item { padding: 8px; border-bottom: 1px solid #eee; margin-bottom: 8px; }
    .status-code { font-weight: bold; }
    .status-2xx { color: #2ecc71; }
    .status-4xx, .status-5xx { color: #e74c3c; }
    .url-text { font-size: 13px; color: #333; word-break: break-all; }
    .time-text { font-size: 12px; color: #999; }
  </style>
</head>
<body>
  <h3>访问状态记录</h3>
  <div id="records-container"></div>
  <script src="popup.js"></script>
</body>
</html>

popup.js #

// popup.js
document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('records-container');
  
  chrome.storage.local.get('statusRecords', (result) => {
    const records = result.statusRecords || [];
    if (!records.length) {
      container.innerHTML = '<p style="text-align: center; color: #999;">暂无访问记录</p>';
      return;
    }
    
    // 倒序展示最新记录
    records.reverse().forEach(record => {
      const item = document.createElement('div');
      item.className = 'record-item';
      
      // 根据状态码添加样式类
      let statusClass = '';
      if (record.statusCode >= 200 && record.statusCode < 300) {
        statusClass = 'status-2xx';
      } else if (record.statusCode >= 400 && record.statusCode < 600) {
        statusClass = record.statusCode >= 500 ? 'status-5xx' : 'status-4xx';
      }
      
      item.innerHTML = `
        <div class="status-code ${statusClass}">状态码: ${record.statusCode}</div>
        <div class="url-text">URL: ${record.url}</div>
        <div class="time-text">时间: ${new Date(record.timestamp).toLocaleString()}</div>
      `;
      container.appendChild(item);
    });
  });
});

关键注意事项 #

• 权限范围：host_permissions必须覆盖需要监听的网站，否则无法捕获请求
• 请求过滤：建议通过details.type过滤非必要请求，避免存储大量冗余数据
• 重定向处理：重定向请求会触发多次onCompleted事件，若需完整追踪可记录details.redirectUrl
• Manifest版本：若仍使用Manifest V2，将service_worker替换为scripts数组即可，逻辑基本一致

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