谷歌浏览器插件Brower-Books: 把整个浏览器变成你的云端书架

大家好，我是Amos, 一个努力转型中的前端开发工程师，愿我的每篇文章都能让您有所收获。

全文导读

本篇文章介绍了开发这款云端书架的背景 ，核心功能点说明 ，以及使用到的工具、问题和经验分享，最后附赠谷歌浏览器插件的发布全流程。您可以挑感兴趣的模块进行阅读。

背景说明

作为一名正在努力转型中的开发者，每天要在浏览器里阅读大量的技术博客、官方文档和深度的源码解读。但常常会遇到一个痛点： 看完就忘，想回顾时又找不到当初引发共鸣的那段话，发现书签里面收藏了大量的网站地址，但又忘记了每个网站中到底有哪些吸引自己的点。

好，如果您也会有这样的需求，如果您也需要一个简单易用且好用的工具的话，那么我这款插件应该可以满足您的要求。我自己已经使用了一段时间了，更新迭代了一些我自己觉得不好用的问题，目前发布的这个版本至少对我来说是用起来已经比较满意的了（哈哈哈哈典型的自卖自夸）。

✨ 核心功能点说明

极简操作、极速登录、非必要不打扰

🖍️ 极简划线批注（极简操作）
- 在任意网页选中文本即可一键高亮并写下批注，操作丝滑无感，随用随记。
- 取消选中的文本直接隐藏侧边栏，不需要手动点击关闭按钮，减少操作。
☁️ 极速登录同步（快登录）
- 采用纯邮箱验证码极速登录，告别繁琐密码，您的所有笔记瞬间在多设备间云端同步。
- 后续可能会考虑接入基于区块链技术的私钥/公钥功能，敬请期待～
🎯 精准回忆跳转
- 专属的云端书架汇总所有记录，点击即可一键跳转回原网页，并在页面中高亮显示收藏的文本。
- 同样也是支持进行评论的删除，以及按照整个链接进行删除，删除之后就再也找不到了（是的，硬删除）
- 可以精准定位到当时的划线处，方便进行查看（功能还在开发中，也可能不加了，使用下来感觉没必要,哈哈哈哈～）。
🛡️ 智能免打扰（非必要不打扰）
- 内置全局开关与域名黑名单，在复杂的内部系统或无需划线的网站自动静默，绝不干扰正常工作。
- 使用过程中发现需要记录自己的想法的网站还是占少数的，所以插件安装过后默认是不开启的状态，需要手动开启，然后同时也支持对域名添加黑名单。
💎 轻量化 UI 体验：
- 采用 Apple 级设计规范，界面精致紧凑，为您提供沉浸、轻量且无负担的阅读陪伴（吹牛了～）。

🛠️ 技术栈与实现细节揭秘

遇到的一些坑和解决思路，这里也做个复盘，希望能给大家一些帮助：

1. 划线与 DOM 节点包裹的痛点 (底层跨标签包裹)

原生浏览器的 window.getSelection() 在处理跨多个 DOM 节点（比如选中的片段里包含 <span>、<a> 标签）时，拆分替换树结构极其痛苦。

解决方案 ：引入了 mark.js。利用它提供的 acrossElements: true 特性，可以完美越过 DOM 层级的阻碍进行高亮层 (<mark>) 注入。
Icon 防重影聚合 ：当用户在同一段文本追加多次评论时，直接注入会引发图标重复叠放的问题。我通过在每次有新评论时触发本地重新渲染（先 unmark 擦除旧高亮，然后按文本 text 重新 reduce 聚合），毫秒级无感重绘，保证了一段高亮文本永远只跟一个小巧的 💬。

2. 状态请求的 SWR 策略 (多端无感同步)

如果用户打开每个网页都要等后台接口返回才能显示高亮，体验会极差。

解决方案 ：采用了类似 SWR (Stale-while-revalidate) 的缓存策略。
当页面加载时，content.ts 优先向 background.ts 请求 chrome.storage.local 里的本地缓存数据，瞬间点亮网页。
与此同时，后台 Service Worker 默默向 Supabase 发起拉取请求，拿到最新数据后再覆盖回本地缓存。这样不仅极大加快了渲染速度，也完美支持了离线与多设备的实时同步。

3. 极简的 Auth 鉴权设计 (无密码 OTP)

传统插件里做 Google OAuth 登录，需要配一系列的 chrome.identity 和后台 Client ID 校验，调试起来极其折磨。

解决方案 ：我全面抛弃了第三方 OAuth，依托 Supabase Auth 实现了纯邮箱验证码 (Email OTP) 形式的登录。
用户在 Popup 弹窗里输入邮箱，收到验证码后提交。Background 将持久化的 Session 会话存入扩展本地存储，后续所有与数据库 (highlights 表) 的 API 交互自带 Row Level Security (RLS) 安全校验。

4. 高效的域名黑名单拦截

对于一些不需要划线的页面（如内部后台、画图 Web App）。

解决方案 ：在 Popup 面板维护一个黑名单数组存入 Storage。在 Content Script 监听 mouseup 选中文本事件的开头，直接根据 isDomainBlacklisted 进行短路 (Short-circuit) 处理。绝不让高亮监听逻辑白白占用页面的性能。

谷歌浏览器插件发布流程

在开发完成后，将插件发布到 Chrome 商店也经历了一番波折，这里将全流程和踩过的坑分享给大家，希望能帮到准备上架插件的朋友：

0. 账号申请

第一步当然是申请一个开发者账号了，这部分就不多说了，首次发布的话还需要支付5美元的费用 ，我这边使用的是Visa的信用卡，不多说，有疑问的话可以留言。

1. 准备上架资产 (Store Assets)

Chrome 商店对上传的图片尺寸有严格要求：

图标 (Icon) ：必须是 128x128。
宣传图 (Promo Tile) ：必须是 440x280。
屏幕截图 (Screenshots) ：推荐 1280x800 或 640x400。

经验分享 ：为了保证尺寸绝对精准且风格统一（极简风），我直接手写了本地的 HTML Canvas 脚本 (generate_store_assets.html)，用代码绘制并导出符合绝对尺寸要求的图片（包括渐变背景和圆角等），省去了反复用设计软件调尺寸的麻烦。

2. 编写隐私政策 (Privacy Policy)

由于插件涉及邮箱登录（Supabase Auth）以及高亮数据的云端保存，Chrome 要求必须提供明确的隐私政策链接。需要准备一份全英文的 PRIVACY_POLICY.md 托管在 Notion上，声明收集了什么数据、用于什么目的、以及承诺不滥用/出售用户隐私。

3. 全英文权限说明 (Permissions Justification)

Manifest V3 对权限把控极严。你在 manifest.json 里申请的每一个权限（如 storage, activeTab），在提交商店时都必须要用英文详细解释为什么需要这个权限，以及它如何服务于插件的"单一核心用途"（Single Purpose）。老老实实写清楚具体用途即可，切忌敷衍。

4. 真实被拒惨案：Purple Potassium 违规

提交审核后，第一次竟然被拒了，收到了官方的邮件（Violation reference ID: Purple Potassium），提示："Requesting but not using [...] scripting"。

被拒原因 ：我在 manifest.json 中配置了 scripting 权限，但由于这版重构把大量的注入逻辑移到了 Content Script 中，实际上并没有调用 chrome.scripting API。
解决方案 ：Google 严格奉行最小权限原则 (Least Privilege) ，申请了不用直接打回。果断从 manifest 移除未使用的 scripting 权限后重新提交通过。千万别在配置文件里保留"可能未来会用到"的权限！

💡 结语与体验

目前的版本已经完全可以满足我个人的日常需求了，接下来也会继续迭代（比如加入标签系统、知识图谱等）。

大家觉得这个思路怎么样？欢迎在评论区提出你们的建议与改进想法！