1506 字
8 分钟
小绿伞2025年10月16日进度 拦截日志功能实现说明
拦截日志功能实现说明
📋 功能概述
今天完成了完整的拦截日志功能，实现了浏览器扩展与 Electron 主程序之间的双向通信，能够实时记录和展示拦截日志。
✅ 已完成的功能
1. 后端通信架构
ExtensionBridge 扩展桥接服务
- 新增接口：
POST /report-block - 功能：接收浏览器扩展上报的拦截日志
- 数据验证：验证必要字段（url）
- 事件触发：触发
block-reported事件通知主程序 - 文件位置：
src/main/modules/extensionBridge.js
FilterDataManager 数据管理
- 新增方法：
addBlockLog(data) - 功能：保存拦截日志到本地文件
- 日志限制：最多保留 1000 条记录
- 事件触发：触发
block-logged事件 - 文件位置：
src/main/modules/filterDataManager.js
2. 浏览器扩展上报
background.js 后台脚本
- 修改函数：
logBlock(data) - 实现方式：通过
fetch发送 POST 请求到http://localhost:23456/report-block - 容错处理：网络失败不影响拦截功能，静默失败
- 备份机制：同时保存到 chrome.storage.local
- 文件位置：
src/extension/background.js
content.js 内容脚本
- 已有功能：拦截时通过
chrome.runtime.sendMessage发送reportBlock消息 - 数据包含：url, title, reason, detail, timestamp
- 文件位置：
src/extension/content.js
3. 前端数据展示
控制面板（dashboard.html）
- 新增脚本：
dashboard.js - 功能：
- 显示今日拦截次数
- 显示最近 3 条拦截警告
- 自动刷新（每 30 秒）
- 时间格式化（刚刚、X分钟前、X小时前）
- 文件位置：
src/renderer/dashboard.js
云端防护（cloud-protection.html）
- 新增脚本：
cloud-protection.js - 功能：
- 显示今日拦截次数（带动画）
- 模拟全球拦截统计
- 自动刷新（每 10 秒）
- 文件位置：
src/renderer/cloud-protection.js
使用报告（usage-report.html）
- 新增脚本：
usage-report.js - 功能：
- 更新拦截统计卡片
- 显示详细拦截记录表格（最多 50 条）
- 格式化时间、原因、分类
- 自动刷新（每 30 秒）
- 文件位置：
src/renderer/usage-report.js
🔄 完整的数据流程
┌─────────────────────────────────────────────────────────────┐│ 浏览器扩展││ 1. content.js 检测到违规内容│ ↓│ 2. 发送 reportBlock 消息到 background.js│ ↓│ 3. background.js 调用 logBlock()│ ↓│ 4. 发送 POST 请求到主程序│ fetch('http://localhost:23456/report-block', {│ method: 'POST',│ body: JSON.stringify({│ url, title, reason, detail, timestamp│ })│ })└─────────────────────────────────────────────────────────────┘ ↓ HTTP POST┌─────────────────────────────────────────────────────────────┐│ Electron 主程序 │││ 5. ExtensionBridge 接收 POST /report-block│ ↓│ 6. 调用 filterDataManager.addBlockLog()│ ↓│ 7. 保存到 block-log.json│ ↓│ 8. 触发 'block-logged' 事件└─────────────────────────────────────────────────────────────┘ ↓ IPC┌─────────────────────────────────────────────────────────────┐│ 渲染进程（UI）││ 9. 页面脚本调用 window.electronAPI.filter.getBlockLog()│ ↓│ 10. 获取拦截日志数据│ ↓│ 11. 更新 UI 显示│ - 控制面板：最近警告│ - 云端防护：今日拦截次数│ - 使用报告：详细记录表格└─────────────────────────────────────────────────────────────┘🧪 测试方法
1. 启动应用
pnpm start2. 安装浏览器扩展
- 打开 Chrome 浏览器
- 访问
chrome://extensions/ - 开启”开发者模式”
- 点击”加载已解压的扩展程序”
- 选择
src/extension目录
3. 添加测试关键词
- 在应用中打开”内容过滤”页面
- 添加测试关键词，例如：“测试”、“百度”
- 点击”保存”
4. 触发拦截
- 在浏览器中访问包含关键词的网站
- 例如：访问
https://www.baidu.com（包含”百度”关键词） - 应该看到精美的拦截页面
5. 查看拦截日志
- 控制面板：查看”最近警告”区域，应该显示刚才的拦截记录
- 云端防护：查看”今日拦截”数字，应该增加
- 使用报告：查看”详细访问记录”表格，应该有新的拦截记录
6. 验证数据持久化
- 关闭应用
- 重新启动应用
- 查看各个页面，拦截日志应该仍然存在
📊 数据结构
拦截日志格式
{ id: 1704844800000.123, // 唯一ID（时间戳 + 随机数） timestamp: 1704844800000, // 时间戳（毫秒） date: "2025/1/10 10:00:00", // 格式化日期 url: "https://www.example.com", // 被拦截的URL title: "页面标题", // 页面标题 reason: "title-keyword", // 拦截原因 detail: "测试", // 详细信息（关键词或域名） mode: "extension" // 拦截模式（extension 或 title-monitor）}拦截原因类型
domain: 域名在黑名单中url-keyword: URL 包含敏感关键词title-keyword: 页面标题包含敏感关键词content-keyword: 页面内容包含敏感关键词
🎯 关键特性
1. 实时性
- 拦截发生后立即上报到主程序
- 页面每 10-30 秒自动刷新数据
- 无需手动刷新即可看到最新拦截记录
2. 可靠性
- 网络失败不影响拦截功能
- 扩展本地备份拦截日志
- 主程序持久化存储日志
3. 性能优化
- 日志限制在 1000 条，避免文件过大
- 使用异步 I/O，不阻塞主线程
- 智能刷新，避免不必要的数据加载
4. 用户体验
- 友好的时间显示（刚刚、X分钟前）
- 清晰的拦截原因说明
- 美观的 UI 展示
🔧 技术细节
HTTP 服务器配置
- 端口：23456（固定）
- CORS：允许所有来源（
Access-Control-Allow-Origin: *） - 方法：GET, POST, OPTIONS
- 超时：3 秒
- 请求大小限制：1MB
数据存储
- 主程序日志：
%APPDATA%/electron-safe/block-log.json - 扩展备份：
chrome.storage.local.blockLog - 格式：JSON
- 编码：UTF-8
IPC 通信
- 获取日志：
filter:getBlockLog - 获取统计：
filter:getStats - 清空日志：
filter:clearBlockLog
📝 注意事项
- 扩展必须安装：拦截日志功能依赖浏览器扩展，请确保已安装
- 服务器端口：确保端口 23456 未被占用
- 日志大小：自动限制在 1000 条，旧记录会被删除
- 时区：所有时间使用本地时区
- 调试日志：生产环境建议注释掉
console.log
🚀 下一步优化建议
- 实时推送：使用 WebSocket 替代轮询，实现真正的实时更新
- 日志导出：添加导出功能，支持 CSV/Excel 格式
- 统计图表：添加可视化图表（柱状图、饼图、趋势图）
- 日志搜索：添加搜索和筛选功能
- 日志详情：点击日志查看完整详情（截图、完整URL等）
- 通知提醒：拦截发生时显示系统通知
- 云端同步：将日志同步到云端服务器
开发完成时间：2025-01-10
功能状态：✅ 已完成并测试
下一阶段：时间管理功能开发
小绿伞2025年10月16日进度 拦截日志功能实现说明
https://www.yn65.com/posts/a13/ 