cursor开发谷歌浏览器插件广告拦截器-CSDN博客

本文链接：https://blog.csdn.net/qq_37212162/article/details/146661812

广告拦截器

一个功能强大的浏览器广告拦截扩展，支持自定义规则、白名单管理和热搜显示。

功能特点

1. 广告拦截

支持 EasyList 规则集
自定义广告拦截规则
基于规则的智能过滤
实时拦截效果统计

2. 白名单管理

支持域名白名单
自定义白名单规则
白名单优先级管理
快速添加/删除白名单

3. 热搜显示

支持多个平台热搜
- 百度热搜
- 微博热搜
- 知乎热榜
实时更新热搜数据
点击直接跳转
美观的排名显示

4. 统计信息

已拦截广告数量
节省流量统计
节省时间统计
实时数据更新

5. 设置选项

高级过滤开关
通知显示控制
规则自动更新
广告拦截开关
统计信息显示控制

技术架构

文件结构

dist/
├── manifest.json          # 扩展配置文件
├── popup.html            # 弹出窗口界面
├── background.js         # 后台服务脚本
├── content.js           # 内容脚本
├── rules.json           # 广告拦截规则
├── css/
│   ├── popup.css        # 弹出窗口样式
│   └── hot-search.css   # 热搜显示样式
└── js/
    ├── popup.js         # 弹出窗口逻辑
    └── hot-search.js    # 热搜功能逻辑

核心组件

后台服务 (background.js)
- 处理网络请求拦截
- 管理广告拦截规则
- 处理扩展状态
内容脚本 (content.js)
- 页面广告元素检测
- DOM 操作处理
- 页面样式修改
弹出窗口 (popup.html/js)
- 用户界面交互
- 设置管理
- 统计信息显示
热搜功能 (hot-search.js)
- 多平台热搜获取
- 数据解析处理
- 界面展示更新

开发环境设置

环境要求

Node.js >= 14.0.0
npm >= 6.0.0
Chrome 浏览器
开发者模式

安装依赖

# 安装项目依赖
npm install

# 安装开发依赖
npm install --save-dev

开发命令

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 检查文件完整性
npm run check

# 清理构建文件
npm run clean


## 安装说明

1. 下载扩展文件
2. 打开 Chrome 浏览器
3. 访问 `chrome://extensions/`
4. 开启"开发者模式"
5. 点击"加载已解压的扩展程序"
6. 选择扩展目录

## 使用说明

### 广告拦截
1. 点击扩展图标打开控制面板
2. 确保广告拦截功能已启用
3. 可以添加自定义规则
4. 查看拦截统计信息

### 白名单管理
1. 在控制面板找到白名单区域
2. 输入需要放行的域名
3. 点击添加按钮
4. 可以随时删除白名单

### 热搜查看
1. 打开扩展控制面板
2. 查看热搜区域
3. 点击感兴趣的热搜标题
4. 直接跳转到相关页面

## 开发说明

### 开发流程
1. 修改代码
2. 重新加载扩展
3. 测试功能
4. 调试问题

### 调试方法
1. 使用 Chrome 开发者工具
2. 查看 Console 面板日志
3. 检查 Network 面板请求
4. 使用断点调试

### 构建说明
1. 开发环境
   ```bash
   npm run dev