Adfilt项目中的Substack订阅弹窗屏蔽技术解析

Adfilt作为一款开源的广告过滤规则项目，近期针对Substack平台的订阅弹窗问题进行了技术优化。Substack作为流行的内容发布平台，其强制订阅弹窗严重影响了用户的阅读体验，本文将深入分析其技术实现原理和解决方案。

弹窗屏蔽技术原理

Substack平台主要采用两类干扰元素：

1. 文章内容区域的订阅对话框，通过CSS类名包含"subscribeDialog"的特征实现
2. 半透明背景遮罩层，使用包含"background"类名的元素实现

Adfilt项目采用CSS选择器精准定位这些元素：

##article > [class*="_subscribeDialog_"]
##article > [class*="_background_"]

技术实现细节

针对Substack的弹窗系统，Adfilt项目开发了多层次的屏蔽方案：

1. 基础屏蔽层
   直接隐藏订阅对话框和背景遮罩，这是最基础的解决方案。

2. 增强处理层
   针对部分Substack站点使用的intro-popup类名弹窗：

##.intro-popup
###main:style(visibility: visible !important;)
##html.modal-in, html.show-intro-popup:style(overflow: auto !important;)
##.has-intro-popup.show-intro-popup body:style(height: auto !important; width: auto !important; overflow: auto !important;)

3. 样式修复层
   部分规则不仅隐藏弹窗，还修复了因弹窗导致的页面样式问题，如：

• 恢复主体内容的可见性
• 修复滚动条被禁用的问题
• 重置被修改的页面尺寸

技术挑战与解决方案

Substack平台采用动态类名技术（包含随机字符串）增加屏蔽难度。Adfilt项目通过以下方法应对：

1. 部分匹配选择器
   使用[class*="value"]语法匹配包含特定关键词的类名，而非完全匹配。

2. 级联样式覆盖
   使用!important规则确保自定义样式优先于网站原有样式。

3. 多维度定位
   不仅定位弹窗本身，还处理其父容器和body元素的样式修改。

实际效果评估

该解决方案在多个Substack站点测试有效，包括但不限于：

• 技术分析类博客
• 安全资讯平台
• 商业评论网站

实施后用户可获得：

1. 无干扰的阅读体验
2. 完整的页面功能
3. 自然的滚动行为

技术展望

未来可能需要对以下方面保持关注：

1. Substack平台可能的反屏蔽技术升级
2. 新出现的弹窗变体形式
3. 移动端适配问题

Adfilt项目将持续跟踪Substack平台的变化，及时更新过滤规则，为用户提供更好的无干扰阅读体验。