Chrome扩展MV3：如何阻止Fetch自动加载关联文件？

一、修正declarativeNetRequest规则配置 #

很多时候DNR不生效是因为规则的匹配条件或操作设置有误，试试以下配置：

• 在manifest.json中声明必要权限：

{
  "permissions": ["declarativeNetRequest", "declarativeNetRequestWithHostAccess"],
  "host_permissions": ["<all_urls>"] // 也可以替换成目标接口的具体域名
}

• 编写规则文件（比如rules.json），精准匹配目标请求并移除Link头：

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "responseHeaders": [
        {
          "header": "link",
          "operation": "remove"
        }
      ]
    },
    "condition": {
      "urlFilter": "*://目标域名/*",
      "resourceTypes": ["xmlhttprequest", "fetch"] // 必须明确包含fetch类型
    }
  }
]

• 在manifest.json中引用规则：

"declarative_net_request": {
  "rule_resources": [
    {
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }
  ]
}

重点：resourceTypes必须包含fetch，否则不会拦截通过Fetch API发起的请求；URL过滤规则要和目标接口完全匹配。

二、通过Service Worker拦截修改响应头 #

如果DNR方案还是不生效，可以用Service Worker的fetch事件直接拦截请求，手动移除Link头：

self.addEventListener('fetch', (event) => {
  // 匹配目标请求的URL特征
  if (event.request.url.includes('目标域名')) {
    event.respondWith(
      fetch(event.request).then((response) => {
        // 复制原响应并移除Link头
        const modifiedHeaders = new Headers(response.headers);
        modifiedHeaders.delete('link');
        return new Response(response.body, {
          status: response.status,
          statusText: response.statusText,
          headers: modifiedHeaders
        });
      })
    );
  }
});

记得在manifest.json中注册Service Worker：

"background": {
  "service_worker": "background.js"
}

这种方式对Fetch请求的拦截更直接，不受DNR规则的匹配限制。

三、临时绕过方案（不推荐用于生产） #

如果只是临时测试，可以在Fetch请求中添加cache: 'no-store'，能绕过部分预加载逻辑，但不是彻底解决办法：

fetch('目标URL', {
  cache: 'no-store'
});

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