Chrome扩展V3：如何用declarativeNetRequest实现动态请求重定向？

可行解决办法 #

1. 用Service Worker的fetch事件拦截并修改请求 #

这是最灵活的方案，完全能复刻原逻辑：

• 在service worker里监听fetch事件，拿到请求对象后，先解析请求体（比如formData、JSON格式）
• 检查请求体里是否包含被禁止的商品ID（比如商品1）
• 如果包含，修改请求体（移除商品1的参数），再用修改后的请求体重新发起fetch请求
• 把新请求的响应返回给页面
• 示例代码参考：

self.addEventListener('fetch', (event) => {
  const { request } = event;
  // 筛选目标下单请求
  if (request.url.includes('/order') && request.method === 'POST') {
    event.respondWith(
      (async () => {
        // 解析请求体
        const body = await request.json();
        // 从后台存储获取禁止的商品ID列表
        const bannedIds = await chrome.storage.local.get('bannedGoodsIds').then(res => res.bannedGoodsIds || []);
        // 过滤掉被禁止的商品
        body.goods = body.goods.filter(item => !bannedIds.includes(item.id));
        // 重新构造请求
        const newRequest = new Request(request.url, {
          method: request.method,
          headers: request.headers,
          body: JSON.stringify(body),
          credentials: request.credentials
        });
        // 发起新请求并返回响应
        return fetch(newRequest);
      })()
    );
  }
});

2. 结合declarativeNetRequest动态规则+webRequest监听 #

如果仅需重定向特定请求、不需要修改请求体：

• 后台维护禁止的商品ID列表，当列表更新时，调用chrome.declarativeNetRequest.updateDynamicRules添加/移除匹配规则
• 规则可匹配请求URL、请求方法，以及请求体中的特定字段（比如formData里的goods_id=1）
• 匹配到的请求直接重定向到移除禁止商品参数的URL
• 注意：declarativeNetRequest的请求体匹配仅支持formData、JSON的部分字段匹配，适合逻辑不复杂的场景

3. 混合方案：webRequest预判断+动态规则补全 #

• 用webRequest.onBeforeRequest（需申请['requestBody']权限）获取请求体，解析后判断是否命中禁止规则
• 如果命中，立即调用updateDynamicRules添加一条临时规则，针对当前请求的特征（比如请求ID、特定参数）做重定向
• 处理完成后移除临时规则，避免影响其他请求

为什么移除webRequestBlocking #

Chrome团队移除该功能核心是性能考量：

• webRequestBlocking是同步阻塞式逻辑，每个匹配的请求都要等待后台JS脚本处理完才能继续，会拖慢页面加载速度，尤其是请求密集场景
• declarativeNetRequest基于浏览器内置规则引擎，规则直接由浏览器底层执行，不需要JS线程介入，性能提升显著
• 官方认为declarativeNetRequest的动态规则更新+service worker的fetch事件，已能覆盖绝大多数原webRequestBlocking的使用场景，同时兼顾性能

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