当前位置：首页 > news >正文

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

news 2026/4/23 20:17:06

大家好，我是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.scriptingAPI。
解决方案：Google 严格奉行最小权限原则 (Least Privilege)，申请了不用直接打回。果断从 manifest 移除未使用的scripting权限后重新提交通过。千万别在配置文件里保留“可能未来会用到”的权限！