基于Manifest 3开发的Adblocker误拦样式表的问题排查与解决

核心原因 #

你当前的拦截规则没有限定目标资源类型，默认会匹配doubleclick.net、googleadservices.com域名下的所有请求（包括CSS样式表）。如果某个网站恰好从这两个域名加载样式资源，就会被你的扩展拦截，导致页面仅保留HTML结构、丢失样式。

解决步骤 #

1. 精准限定拦截的资源类型
   在rules.json的每个规则的condition字段中添加resourceTypes，只拦截广告常见的资源类型（如脚本、图片、广告请求等），排除样式表(stylesheet)。修改后的规则示例：

   [
       {
           "id": 1,
           "priority": 1,
           "action": {"type": "block"},
           "condition": {
               "urlfilter": "*://*doubleclick.net/*",
               "resourceTypes": ["script", "image", "media", "xmlhttprequest", "sub_frame"]
           }
       },
       {
           "id": 2,
           "priority": 1,
           "action": {"type": "block"},
           "condition": {
               "urlfilter": "*://googleadservices.com/*",
               "resourceTypes": ["script", "image", "media", "xmlhttprequest", "sub_frame"]
           }
       }
   ]
   

   上述配置只拦截广告常用的资源类型，stylesheet、font等页面必需资源类型会被排除在外。

2. 排查生效规则与请求拦截情况

   • 进入Chrome扩展管理页面，打开你的扩展的background page开发者工具，在「Declarative Net Request」面板查看所有激活的规则，确认是否有额外规则误拦截CSS。
   • 打开目标网站的开发者工具「网络」面板，筛选CSS类型，查看被拦截请求的「拦截原因」，确认是否来自你的扩展规则。

3. 排除扩展冲突
   暂时禁用浏览器中其他广告拦截类扩展，测试问题是否消失，避免不同扩展的规则冲突导致误拦截。

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