我不想授予完整的 GitHub 访问权限 — 所以我自己构建了一个 LeetCode 到 GitHub 同步的 Chrome 扩展

Source: Dev.to

动机

我在 LeetCode 上练习题目时，想让我的 GitHub 自动反映我的进度。希望贡献图和仓库历史能够显示已通过的提交，而不需要手动上传每一个解答。

为什么我自己开发了这个扩展

现有的 Chrome 扩展要求：

• 完全读取/写入我所有 GitHub 仓库的权限
• 通过扩展登录我的 LeetCode 账户

授予如此宽泛的权限让我感到不安全，尤其是当扩展只需要写入单个仓库时。于是我决定创建一个工具，实现以下目标：

• 检测 LeetCode 上已通过的提交
• 直接从页面 DOM 读取代码（无需登录处理）
• 使用细粒度的个人访问令牌将代码推送到指定的 GitHub 仓库

工作原理

该扩展基于 Chrome Extension Manifest V3 构建，并使用 GitHub REST API。

当 LeetCode 的提交被接受时，扩展会：

1. 检测到接受状态
2. 从 DOM 中提取解答代码和语言
3. 创建一个适当命名的文件（按语言组织）
4. 将文件推送到配置好的 GitHub 仓库

技术挑战

动态编辑器内容

LeetCode 在浏览器编辑器中渲染解答，因此扩展必须：

• 验证提交已被接受
• 等待编辑器内容完全渲染
• 提取正确的代码和语言

时序与幂等性

同步应 仅在接受后 且 每次提交只执行一次。为此扩展：

• 在提取数据前监听接受状态
• 记录已同步的提交，避免重复上传

提取额外元数据

题目难度等信息同样是动态渲染的，需要仔细检查 DOM 才能可靠获取。

Manifest V3 架构

从持久化后台脚本迁移到 service worker 引入了事件驱动模型。理解 content script、service worker 与扩展存储之间的交互至关重要。

发布扩展

在个人使用后，我将扩展发布到 Chrome Web Store。MVP 使用细粒度的个人访问令牌，其优势在于：

• 限制对单个仓库的访问
• 避免宽泛权限
• 在无需后端的情况下保持架构简洁

更完善的方案可以采用 GitHub Apps，提供更好的认证流程和结构化权限——这是我后续计划探索的方向。

未来改进

• 支持同步历史 LeetCode 提交记录
• 优化认证流程（例如迁移到 GitHub Apps）
• 改进设置流程，提高用户友好度

收获

构建此扩展让我学到了：

• 浏览器扩展如何与网页应用交互
• 与外部 API 的安全集成
• 以最小权限设计工具
• 从开发到发布的完整流程

它也再次证明，解决个人小痛点往往能孕育出有价值、可共享的项目。

链接

• GitHub repository:
• Chrome Web Store: