如何让chrome.webRequest等待XMLHttpRequest结果以实现页面拦截？

嘿，我来帮你搞定这个问题！Chrome的webRequest.onBeforeRequest API确实是实现页面加载拦截的核心，但要结合异步的外部查询（比如垃圾邮件评级服务），关键在于利用它对Promise/async-await的支持——从Chrome 76开始，这个事件的监听器可以返回Promise，让Chrome等待你的异步操作完成后再决定是否放行页面。

下面是一步步的实现方案：

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

首先要确保你的扩展声明了必要的权限，因为拦截请求需要特定权限。在manifest.json里加上这些配置：

{
  "manifest_version": 3,
  "name": "垃圾页面拦截器",
  "version": "1.0",
  "description": "基于外部API阻止垃圾页面加载",
  "permissions": ["webRequest", "webRequestBlocking"],
  "host_permissions": ["<all_urls>", "https://your-spam-check-api.com/*"], // 加上你的API域名
  "background": {
    "service_worker": "background.js"
  }
}

• webRequest和webRequestBlocking是拦截请求的核心权限
• host_permissions要包含你需要拦截的URL范围（比如<all_urls>），以及你的外部API域名（避免跨域问题）

2. 实现异步拦截逻辑（background.js） #

用async-await来处理外部查询是最直观的方式，因为async函数会自动返回Promise，正好符合Chrome API的要求。

示例代码： #

// 模拟你的外部垃圾邮件评级API调用
async function checkIfSpamUrl(url) {
  try {
    // 替换成你实际的API请求
    const response = await fetch(`https://your-spam-check-api.com/check?url=${encodeURIComponent(url)}`);
    const result = await response.json();
    
    // 假设API返回的result.isSpam是布尔值，表示是否为垃圾页面
    return result.isSpam;
  } catch (error) {
    console.error("查询垃圾评级失败:", error);
    // 出错时默认放行，避免误拦截
    return false;
  }
}

// 注册页面拦截监听器
chrome.webRequest.onBeforeRequest.addListener(
  async (details) => {
    // 获取当前要加载的页面URL
    const targetUrl = details.url;
    
    // 等待外部API的查询结果
    const shouldBlock = await checkIfSpamUrl(targetUrl);
    
    // 返回拦截指令：cancel为true则阻止页面加载
    return { cancel: shouldBlock };
  },
  // 指定要拦截的请求类型和URL范围
  { urls: ["<all_urls>"], types: ["main_frame"] }, // main_frame只拦截主页面，可按需添加sub_frame等
  // 必须声明"blocking"，让Chrome等待异步结果
  ["blocking"]
);

3. 如果用回调函数怎么办？ #

如果你的外部服务只有回调式的API，只需把回调包装成Promise即可：

// 假设这是第三方提供的回调式查询函数
function spamCheckCallback(url, callback) {
  // 模拟异步回调逻辑
  setTimeout(() => {
    const isSpam = url.includes("malicious-site.com"); // 模拟判断
    callback(isSpam);
  }, 800);
}

// 把回调包装成Promise
function checkIfSpamUrl(url) {
  return new Promise((resolve) => {
    spamCheckCallback(url, resolve);
  });
}

// 之后的监听器代码和上面的async版本完全一样

关键注意事项 #

• API响应速度：如果外部API太慢，用户会看到页面加载的等待状态，建议给API请求加超时，或者对已查询过的URL做缓存（用chrome.storage.local），提升体验。
• Service Worker限制：Manifest V3用Service Worker代替了背景页，它会在闲置时休眠，所以要确保你的异步操作不会超时（Chrome一般会给异步拦截留几秒的时间）。
• 权限正确性：一定要在manifest.json里正确声明权限，否则拦截逻辑会完全失效。

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