Chrome扩展：chrome.webRequest无法捕获全部请求的解决问询

嘿，你的问题我太熟了！主要踩了两个坑：一是background脚本启动太晚，二是你用活跃标签发消息的逻辑根本不对——页面刚加载时哪能保证它是活跃标签啊？这就导致好多请求要么没被监听到，要么消息发不出去。我给你一步步解决：

一、先让Background脚本“随叫随到” #

默认Chrome的background脚本是懒加载的，只有触发特定事件才会启动，这肯定会错过页面初始请求。我们得让它一浏览器启动就跑起来：

如果你用Manifest V2 #

在manifest.json里把background的persistent设为true，同时确保权限全：

{
  "manifest_version": 2,
  "background": {
    "scripts": ["background.js"],
    "persistent": true
  },
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>", "tabs"]
}

如果你用Manifest V3 #

V3换成了service worker，虽然它是事件驱动，但只要配置对，启动速度也够快，别忘了把<all_urls>放到host_permissions里：

{
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["webRequest"],
  "host_permissions": ["<all_urls>"]
}

二、别再盯着“活跃标签”发消息了！ #

你之前用chrome.tabs.query({active: true})，这在页面新开或者从链接跳转时完全没用——新页面加载时还没变成活跃标签呢！其实requestDetails里已经自带了这个请求对应的tabId，直接用它发消息就对了！

修改你的background.js：

// 监听所有类型的请求，确保不遗漏
chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  { 
    urls: ["<all_urls>"],
    types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "other"]
  },
  ["blocking"] // 加这个能让监听触发更早，不需要拦截的话可以去掉
);

function logURL(requestDetails) {
  // 排除tabId为-1的情况（比如浏览器自己的请求、扩展内部请求）
  if (requestDetails.tabId !== -1) {
    chrome.tabs.sendMessage(
      requestDetails.tabId,
      { message: requestDetails.url },
      function(response) {
        // 处理content脚本还没加载的情况
        if (chrome.runtime.lastError) {
          console.log("这会儿content脚本还没就绪，先记下这个请求:", requestDetails.url);
        }
      }
    );
  }
}

三、让Content脚本“抢跑”注入 #

如果content脚本注入太晚，就算background发了消息也收不到。我们要让它在页面DOM刚要构建时就注入，在manifest.json里配置run_at: "document_start"：

Manifest V2/V3通用配置 #

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "run_at": "document_start"
    }
  ]
}

这样content脚本会比页面的任何资源都先加载，能第一时间接收消息。

四、终极保险：暂存未发送的请求 #

就算做了上面的优化，还是可能遇到页面加载太快，background先触发请求但content还没就绪的情况。我们可以在background里把这些请求存起来，等content说“我准备好了”再补发：

修改后的background.js

// 用Map暂存每个tab未发送的请求
const pendingRequests = new Map();

chrome.webRequest.onBeforeRequest.addListener(
  logURL,
  { 
    urls: ["<all_urls>"],
    types: ["main_frame", "sub_frame", "stylesheet", "script", "image", "font", "object", "xmlhttprequest", "ping", "csp_report", "media", "websocket", "other"]
  },
  ["blocking"]
);

function logURL(requestDetails) {
  if (requestDetails.tabId !== -1) {
    chrome.tabs.sendMessage(
      requestDetails.tabId,
      { type: "NEW_REQUEST", url: requestDetails.url },
      function(response) {
        if (chrome.runtime.lastError) {
          // 存到对应tab的队列里
          if (!pendingRequests.has(requestDetails.tabId)) {
            pendingRequests.set(requestDetails.tabId, []);
          }
          pendingRequests.get(requestDetails.tabId).push(requestDetails.url);
        }
      }
    );
  }
}

// 监听content脚本的就绪通知
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "CONTENT_READY" && sender.tab.id) {
    // 把暂存的请求都发过去
    const tabRequests = pendingRequests.get(sender.tab.id);
    if (tabRequests) {
      tabRequests.forEach(url => {
        chrome.tabs.sendMessage(sender.tab.id, { type: "NEW_REQUEST", url });
      });
      pendingRequests.delete(sender.tab.id);
    }
    sendResponse({ status: "已同步暂存请求" });
  }
});

修改后的content.js

// 一加载就告诉background我准备好了
chrome.runtime.sendMessage({ type: "CONTENT_READY" }, (response) => {
  console.log(response.status);
});

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.type === "NEW_REQUEST") {
    console.log("捕获到请求:", request.url);
  } else if (request.message === "reload") {
    location.reload();
    console.log("页面已重载");
  }
});

最后再检查下权限 #

别忘了在manifest里把需要的权限都加上：webRequest、tabs、<all_urls>这些一个都不能少，不然监听和发消息都会失败。

这样一套操作下来，你就能捕获到页面加载起始阶段的全部请求了！

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