如何在Flutter的InAppWebView中实现广告拦截？

要把EasyList接入InAppWebView的广告拦截，核心是把EasyList的规则转换成InAppWebView能识别的ContentBlocker格式——两者的规则体系不直接兼容，得做针对性转换，具体步骤如下：

1. 明确EasyList的核心规则类型 #

EasyList主要包含两类对广告拦截有用的规则：

• CSS隐藏规则：以##开头，比如##.ad-banner，作用是通过CSSdisplay:none隐藏页面上的广告元素
• URL拦截规则：以||开头，比如||adserver.com/*，作用是直接拦截请求的广告资源（如脚本、图片、iframe等）

2. 下载并解析EasyList文本 #

先获取EasyList的纯文本内容，然后逐行处理过滤：

• 跳过注释行（以!开头的行）
• 跳过例外规则（以@@开头的行，这类是允许特定资源加载的白名单）
• 分别提取出CSS隐藏规则和URL拦截规则的内容

3. 把规则转换为InAppWebView的ContentBlocker对象 #

针对两类规则分别处理：

处理CSS隐藏规则 #

提取##后的CSS选择器，创建对应ContentBlocker对象，用CSS_DISPLAY_NONE类型的action：

// 假设已从EasyList中提取出cssSelectors列表（每个元素是单个CSS选择器）
List<ContentBlocker> cssBlockers = cssSelectors.map((selector) {
  return ContentBlocker(
    trigger: ContentBlockerTrigger(urlFilter: '.*'), // 匹配所有页面
    action: ContentBlockerAction(
      type: ContentBlockerActionType.CSS_DISPLAY_NONE,
      selector: selector,
    ),
  );
}).toList();

注意：如果选择器数量过多，建议拆分多个ContentBlocker对象，避免单个selector字符串过长导致解析异常。

处理URL拦截规则 #

需要把EasyList的URL通配符转换成正则表达式（InAppWebView的urlFilter支持正则），转换规则：

• || → ^https?://（匹配任意HTTP/HTTPS协议的域名开头）
• * → .*（匹配任意长度的任意字符）
• ^ → $（匹配URL的末尾）

转换后创建BLOCK类型的action：

// 假设已从EasyList中提取出urlRules列表（每个元素是原始URL规则）
List<ContentBlocker> urlBlockers = urlRules.map((rule) {
  // 转换EasyList通配符为正则表达式
  String regex = rule
      .replaceAll('||', '^https?://')
      .replaceAll('*', '.*')
      .replaceAll('^', r'$');
  return ContentBlocker(
    trigger: ContentBlockerTrigger(urlFilter: regex),
    action: ContentBlockerAction(type: ContentBlockerActionType.BLOCK),
  );
}).toList();

4. 合并规则并应用到InAppWebView #

把两类ContentBlocker列表合并，赋值给InAppWebView的contentBlockers参数即可：

final allBlockers = [...cssBlockers, ...urlBlockers];

InAppWebView(
  initialUrlRequest: URLRequest(url: Uri.parse('https://example.com')),
  contentBlockers: allBlockers,
  // 其他配置...
)

额外注意事项 #

• EasyList规则数量极大，全部加载会显著拖慢WebView启动速度，建议筛选常用规则（比如保留广告域名、高频CSS选择器），或者按需加载。
• 部分复杂规则包含域名、资源类型限制，可结合ContentBlockerTrigger的resourceTypes参数优化（比如只拦截脚本、图片资源）。
• 正则转换时注意特殊字符转义，比如规则中的.、?等需要用反斜杠转义（可借助Dart的正则转义工具处理）。

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