Interlock - Focus Guard

一个帮助你减少短视频成瘾的 Chrome 扩展，通过冷却计时器和情绪追踪来提升专注力。

✨ 功能特性

• 🛡️ 智能拦截 - 在访问 YouTube/TikTok 时显示冷却 Overlay
• 😌 情绪追踪 - 记录每次拦截时的情绪状态
• 📊 统计分析 - 可视化展示使用趋势和拦截记录
• ⚙️ 自定义设置 - 调整冷却时间和智能频率
• 🌐 独立 Dashboard - 网页版统计页面，随时随地查看数据

🏗️ 架构

Interlock 分为两个独立部分：

1. Chrome 扩展（/）

• Content Script - 在目标网站注入 Overlay
• Background Service - 处理数据存储和消息传递
• 轻量级设计，不影响浏览体验

2. Dashboard 网页（/dashboard-web）

• 独立的 React 应用 - 可部署到任何静态托管服务
• 实时数据同步 - 通过 Chrome Extension Messaging API 与扩展通信
• 响应式设计 - 支持桌面和移动设备

🚀 快速开始

安装扩展

1. 克隆仓库并构建：

git clone <your-repo-url>
cd interlock
npm install
npm run build

2. 在 Chrome 中加载扩展：

   • 访问 chrome://extensions/
   • 开启"开发者模式"
   • 点击"加载已解压的扩展程序"
   • 选择 dist 文件夹
   • 记下扩展 ID

3. 访问 YouTube，应该会看到拦截 Overlay

部署 Dashboard

1. 配置扩展 ID：

cd dashboard-web
# 编辑 src/services/extensionBridge.ts，填入扩展 ID

2. 本地开发：

npm install
npm run dev

3. 生产部署：

npm run build
# 将 dist 部署到 Vercel/Netlify/GitHub Pages

详细说明请查看 DEPLOYMENT.md

🛠️ 开发

# 扩展开发
npm run dev         # 开发模式
npm run build       # 生产构建

# Dashboard 开发
cd dashboard-web
npm run dev         # 开发模式
npm run build       # 生产构建

📦 技术栈

扩展

• React 18
• TypeScript
• Tailwind CSS
• Vite
• Chrome Extension Manifest V3

Dashboard

• React 18
• TypeScript
• Tailwind CSS
• Recharts（图表库）
• Vite

📄 许可

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📮 联系

如有问题或建议，请通过 Issue 联系我们。