使用flutter_inappwebview时如何将多网站列表加入内容拦截器的urlFilter？

解决方案 #

flutter_inappwebview的ContentBlockerTrigger的urlFilter参数遵循正则匹配规则，多个站点可以通过正则的「或」逻辑拼接实现批量配置：

方式1：少量站点直接手写正则

如果需要拦截的站点数量不多，可以直接把域名转义后用|拼接，示例：

contentBlockers: [
  ContentBlocker(
    trigger: ContentBlockerTrigger(
      // 正则含义：匹配所有http/https协议下，域名包含site.com、site-two.org、website.info的请求
      urlFilter: r"^https?://.*(site\.com|site-two\.org|website\.info).*$",
      // resourceType: [ContentBlockerTriggerResourceType.SCRIPT],
    ),
    action: ContentBlockerAction(
      type: ContentBlockerActionType.BLOCK,
      // selector: 'div',
    ),
  ),
],

注意域名中的.属于正则特殊字符，需要加反斜杠转义为\.，避免被识别为「匹配任意字符」的正则语法。

方式2：大量站点动态生成正则

如果要拦截的站点数量多，推荐通过代码自动拼接正则，避免手动书写出错：

1. 先定义拦截域名列表和正则转义工具方法

// 你需要批量拦截的域名列表
final List<String> blockedDomains = [
  'site.com',
  'site-two.org',
  'website.info',
  // 可继续添加更多站点
];

// 正则特殊字符转义工具，避免域名里的特殊符号影响正则匹配
String escapeRegex(String rawStr) {
  return rawStr.replaceAllMapped(RegExp(r'[.*+?^${}()|[\]\\]'), (m) => '\\${m.group(0)}');
}

2. 动态构造urlFilter参数

final String escapedDomainStr = blockedDomains.map(escapeRegex).join('|');
final String finalUrlFilter = '^https?://.*($escapedDomainStr).*\$';

3. 代入到你的内容拦截器配置中即可

contentBlockers: [
  ContentBlocker(
    trigger: ContentBlockerTrigger(
      urlFilter: finalUrlFilter,
    ),
    action: ContentBlockerAction(
      type: ContentBlockerActionType.BLOCK,
    ),
  ),
],

额外注意事项 #

• 如果要精确匹配域名及子域名，避免拦截其他域名中包含该字符串的请求，可以把正则规则改为 r"^https?://([a-z0-9-]+\.)*(" + escapedDomainStr + r")(/.*)?$"
• 如果需要配置允许访问的白名单，只需要把action.type改为ContentBlockerActionType.ALLOW，并将该条规则放在所有拦截规则的最前面，优先级更高

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