1. 扩展与主程序实时通信 🔄#

问题： 在 Electron 应用中添加/删除关键词后，浏览器扩展不会实时更新。

解决方案： 使用 本地 HTTP 服务器

1
Electron 应用 (启动时)
2
  ↓
3
启动本地 HTTP 服务器 (http://localhost:23456)
4
  ↓
5
浏览器扩展每 10 秒请求一次 /filter-rules
6
  ↓
7
获取最新的关键词和域名规则
8
  ↓
9
自动更新并重新检查所有标签页

2. 优化浏览器扩展弹窗 🎨#

3. 修复窗口圆角渲染闪烁 🪟#

4. 取消强制登录 🔓#

1
👤 游客模式
2
   [点击登录] (蓝色链接)

主程序 (Electron)#

1. src/main/index.js

   • 修改启动页面：从 index.html → dashboard.html
   • 优化窗口配置：背景色、延迟显示、禁用节流
   • 启动扩展桥接服务

2. src/main/modules/extensionBridge.js ⭐ 新增

   • 本地 HTTP 服务器
   • 提供 /filter-rules 接口
   • 提供 /ping 健康检查接口

3. src/main/modules/interceptorManager.js

   • 集成 ExtensionBridge
   • 启动时自动开启 HTTP 服务

4. src/renderer/pages/dashboard.html

   • 用户区域改为”游客模式”
   • 添加”点击登录”按钮

浏览器扩展#

1. src/extension/background.js

   • 修改轮询间隔：2秒 → 1分钟
   • 修改数据源：扩展内文件 → 本地 HTTP 服务器
   • 添加智能变化检测（哈希对比）
   • 规则更新时自动通知所有标签页

2. src/extension/popup.html

   • 简化界面，移除规则详情
   • 移除刷新按钮
   • 添加简洁提示信息

3. src/extension/popup.js

   • 移除规则显示逻辑
   • 移除刷新功能
   • 简化为只显示统计信息

4. src/extension/blocked.html

   • 优化拦截页面设计
   • 静态页面，无 CSP 问题

1. 启动主程序#

1
pnpm start

启动成功后会看到：

1
✅ 扩展桥接服务已启动: http://localhost:23456
2
扩展桥接服务地址: http://localhost:23456/filter-rules
3
浏览器扩展模式已启用

2. 测试 HTTP 服务#

在浏览器中访问：

1
http://localhost:23456/filter-rules

应该看到类似的 JSON 响应：

1
{
2
  "blockedDomains": ["example.com"],
3
  "allowedDomains": [],
4
  "blockedKeywords": ["测试", "摆渡"],
5
  "enabled": true,
6
  "checkPageContent": false,
7
  "lastUpdate": "2025-01-09T12:34:56.789Z",
8
  "version": 1
9
}

3. 重新加载浏览器扩展#

1. 打开 chrome://extensions/
2. 找到”小绿伞”扩展
3. 点击 刷新按钮 (🔄)

4. 测试实时更新#

1. 在 Electron 应用的”内容过滤”页面添加关键词
2. 等待最多 1 分钟（或立即在浏览器扩展后台查看控制台）
3. 扩展会自动获取最新规则
4. 访问包含新关键词的网页，应该会被拦截

查看扩展是否连接到服务器#

1. 打开 chrome://extensions/
2. 找到”小绿伞”，点击 背景页 (或 Service Worker)
3. 查看控制台输出：

成功连接：

1
✅ 过滤规则已更新: 3 个关键词 (之前: 1)
2
   关键词列表: 测试, 百度, 新关键词

连接失败：

1
无法连接到主程序，使用缓存规则

手动测试 HTTP 服务#

在浏览器控制台运行：

1
fetch('http://localhost:23456/filter-rules')
2
  .then(r => r.json())
3
  .then(console.log);

开发环境（现在）#

• Electron 应用运行在本地
• HTTP 服务器地址：http://localhost:23456
• 扩展直接连接到本地服务器

生产环境（打包后）#

• 完全相同的工作方式！
• 用户安装 .exe 后，启动应用会自动开启 HTTP 服务器
• 浏览器扩展需要单独安装（后期可以考虑自动安装）
• 只要主程序在运行，扩展就能实时同步规则

端口冲突处理#

• 如果 23456 端口被占用，会自动尝试下一个端口
• 扩展会记录最后连接成功的端口（未来优化）

Q: 为什么不用 Native Messaging？#

A:

• 配置太复杂（需要注册表）
• 需要额外的可执行文件
• HTTP 更简单、易调试

Q: HTTP 服务器会被防火墙拦截吗？#

A:

• 只监听 localhost，不对外开放
• 浏览器扩展访问 localhost 无需防火墙权限

Q: 为什么轮询间隔是 1 分钟？#

A:

• 平衡实时性和性能
• 避免频繁请求影响性能
• 1 分钟对于家长控制场景已经足够

Q: 如何让更新更实时？#

A: 可以将轮询间隔改为更短（如 10 秒）：

1
setInterval(() => {
2
  loadFilterRulesFromFile();
3
}, 10000); // 10秒