Manifest V3中如何获取WebRequest相关类型及headerDetails？替代V2实现

核心思路 #

Manifest V3中webRequest API并未完全移除，仅取消了阻塞式能力（如webRequestBlocking），仍可通过chrome.webRequest.onBeforeRequest获取请求体，配合Service Worker处理数据，再通过存储或消息通信将数据传递给Popup展示。

步骤1：配置Manifest V3文件 #

声明必要权限与Service Worker后台：

{
  "manifest_version": 3,
  "name": "请求数据监控工具",
  "version": "1.0",
  "permissions": ["webRequest", "storage"],
  "host_permissions": ["*://*/*"], // 可替换为你需要监控的特定域名
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

步骤2：Service Worker中处理请求 #

在service-worker.js中注册请求监听器，过滤目标URL并处理请求体，将数据存入本地存储：

// 复用原有的消息解析逻辑
function getMessages(requestBody) {
  const messages = requestBody.split('\n').filter((_, index) => index > 2);
  return messages.reduce((acc, message) => {
    if (message) {
      const { meta, payload } = getEnvelop(message);
      const [timestamp,, schemaName,,, id] = meta.split(',');
      if (schemaName === '') {
        const isoDatetime = new Date(parseInt(timestamp, 10)).toISOString();
        acc[id] = {
          isoDatetime,
          message: JSON.parse(payload),
        };
      }
    }
    return acc;
  }, {});
}

// 监听并过滤请求
chrome.webRequest.onBeforeRequest.addListener(
  (details) => {
    // 替换为你需要匹配的特定字符串
    if (!details.url.includes("目标字符串")) return;
    
    if (!details.requestBody?.raw) return;
    
    const decoder = new TextDecoder();
    const requestBody = decoder.decode(details.requestBody.raw[0].bytes);
    const waMessages = getMessages(requestBody);
    
    // 将数据存入本地存储
    chrome.storage.local.get('requestData').then((data) => {
      const existingData = data.requestData || {};
      Object.assign(existingData, waMessages);
      chrome.storage.local.set({ requestData: existingData });
    });
  },
  { urls: ["<all_urls>"] }, // 匹配监控的URL范围
  ["requestBody"] // 必须声明此参数才能获取请求体
);

步骤3：Popup中展示数据 #

创建popup.html和popup.js，加载时读取存储数据并渲染：

popup.html #

<!DOCTYPE html>
<html>
<head>
  <style>
    body { width: 300px; padding: 10px; }
    .message-item { margin: 10px 0; padding: 8px; border: 1px solid #eee; border-radius: 4px; }
    .message-time { color: #666; font-size: 12px; }
    .message-content { margin-top: 4px; font-size: 14px; white-space: pre-wrap; }
  </style>
</head>
<body>
  <h3>请求数据列表</h3>
  <div id="messageContainer"></div>
  <script src="popup.js"></script>
</body>
</html>

popup.js #

document.addEventListener('DOMContentLoaded', () => {
  const container = document.getElementById('messageContainer');
  
  chrome.storage.local.get('requestData').then((data) => {
    const requestData = data.requestData || {};
    if (Object.keys(requestData).length === 0) {
      container.innerHTML = '<p>暂无请求数据</p>';
      return;
    }
    
    // 渲染每条数据
    Object.values(requestData).forEach(item => {
      const itemEl = document.createElement('div');
      itemEl.className = 'message-item';
      itemEl.innerHTML = `
        <div class="message-time">${item.isoDatetime}</div>
        <div class="message-content">${JSON.stringify(item.message, null, 2)}</div>
      `;
      container.appendChild(itemEl);
    });
  });
});

补充说明 #

• 若需要Popup实时更新数据，可在Service Worker中通过chrome.runtime.sendMessage主动推送，Popup监听chrome.runtime.onMessage事件接收
• 主机权限需根据实际监控范围调整，避免过度授权
• Service Worker会因长时间无活动被销毁，持久化数据依赖chrome.storage

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