PakePlus 中文文档 下载 App

CSS Selector 过滤元素——一键去广告

过滤元素是什么

配置页面有一个"过滤元素"输入框，可以填写任意 CSS selector。PakePlus 打包出来的 APP 在运行时，会在网页加载后自动执行一段隐藏代码：

// 伪代码：PakePlus 运行时注入的隐藏逻辑
document.querySelectorAll('你填的 selector').forEach(el => {
  el.style.display = 'none';
  el.remove();
});

匹配到的 DOM 元素会被直接从页面上移除或隐藏。

最常用场景：去广告

如果打包的网页有烦人的弹窗广告、侧边广告栏、底部推荐条等：

1. 打开 PakePlus 预览

点配置页面底部的"预览"按钮，在预览窗口里看到完整网页。

2. F12 打开开发者工具

PakePlus 预览窗口支持右键 → 检查（或开启了"开发调试"开关后，Ctrl+Shift+I）。在 Elements 面板里用元素选择器点广告元素，看它的 class 或 id。

3. 写 selector

4. 填进过滤元素字段

多个 selector 之间用英文逗号分隔：

.ad-banner, #ads-container, [data-ad], div[class*="ad-popup"]

保存后重新预览，广告应该消失了。

常用 selector 速查

selector匹配的元素
.ad所有 class 为 ad 的元素
.ad *, .ads *class 为 ad 或 ads 的内部所有后代元素
[id^="ad-"]id 以 "ad-" 开头的元素
div[class*="banner"]class 里包含 "banner" 的 div
iframe[src*="ads"]src 里包含 "ads" 的 iframe（很多广告走 iframe）
.popup, .modal弹窗、模态框
.sidebar-recommend侧边栏推荐
.footer-ad底部广告条

配合 JS 注入实现更强的去广告

过滤元素是页面加载后立即执行的，但有些广告是：

这种情况下过滤元素可能不够，需要配合 JS 注入基础：

// JS 注入脚本示例：持续监听 DOM 变化，移除后来加载的广告
const observer = new MutationObserver(mutations => {
  document.querySelectorAll('.ad, .banner, [class*="ads"]').forEach(el => {
    el.style.display = 'none';
  });
});
observer.observe(document.body, { childList: true, subtree: true });

过滤元素不是万能的

情况过滤元素能处理吗推荐方案
静态 DOM 广告✅ 能过滤元素就行
动态加载的 React/Vue 广告❌ 不能JS 注入 + MutationObserver
视频前置广告⚠️ 部分能（如果是 DOM 层的 overlay）JS 注入更稳
localStorage 里存的广告开关❌ 不能JS 注入来操作 localStorage
需要网络拦截的广告❌ 不能PakePlus 不支持请求拦截

实战：打包一个干净的 YouTube 客户端

假设你想把 YouTube 网页版变成无广告的桌面客户端：

第一步：填过滤元素

.ytd-popup-container, .ytd-comments, #chat-container, ytd-live-chat-frame

第二步：JS 注入 + MutationObserver

// 移除动态加载的推荐视频、直播聊天、评论区
const hide = () => {
  document.querySelectorAll('.ytd-popup-container, ytd-live-chat-frame').forEach(el => {
    el.style.display = 'none';
  });
};
hide();
new MutationObserver(hide).observe(document.body, { childList: true, subtree: true });

第三步：打包预览 → 确认广告消失 → 发布

安全注意

过滤元素和 JS 注入本质上是对目标网站做"二次开发"。注意：