---
theme: qklhk-chocolate
---

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

## 全文导读

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

**插件体验链接:** 谷歌应用市场-搜索 Browser Books


## 背景说明

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

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

***

## ✨ 核心功能点说明

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

1.  **🖍️ 极简划线批注（极简操作）**
    *   在任意网页选中文本即可一键高亮并写下批注，操作丝滑无感，随用随记。
    *   取消选中的文本直接隐藏侧边栏，不需要手动点击关闭按钮，减少操作。
       ![WechatIMG160.jpg](https://developer.qcloudimg.com/http-save/yehe-11929262/009463cd9ec57b22008757f591897f14.jpg)

2.  **☁️ 极速登录同步（快登录）**

    *   采用纯邮箱验证码极速登录，告别繁琐密码，您的所有笔记瞬间在多设备间云端同步。
    *   后续可能会考虑接入基于区块链技术的私钥/公钥功能，敬请期待～

   ![WechatIMG161.jpg](https://developer.qcloudimg.com/http-save/yehe-11929262/77e7cc72070227cc8337ab5a5eb8fe2e.jpg)
   ![WechatIMG166.jpg](https://developer.qcloudimg.com/http-save/yehe-11929262/64d5f400d3b9689fec9acabdd4fa8056.jpg)

3.  **🎯 精准回忆跳转**

    *   专属的云端书架汇总所有记录，点击即可一键跳转回原网页，并在页面中高亮显示收藏的文本。
    *   **同样也是支持进行评论的删除，以及按照整个链接进行删除，删除之后就再也找不到了（是的，硬删除）**
    *   可以精准定位到当时的划线处，方便进行查看（*功能还在开发中，也可能不加了，使用下来感觉没必要,哈哈哈哈～*）。
![WechatIMG163.jpg](https://developer.qcloudimg.com/http-save/yehe-11929262/f28a028d723d64666c224172574078f1.jpg)
![WechatIMG164.jpg](https://developer.qcloudimg.com/http-save/yehe-11929262/f88d4d4619dec19f96a3f89ef5294eb8.jpg)
4.  **🛡️ 智能免打扰（非必要不打扰）**
    *   内置全局开关与域名黑名单，在复杂的内部系统或无需划线的网站自动静默，绝不干扰正常工作。
    *   使用过程中发现需要记录自己的想法的网站还是占少数的，所以插件安装过后默认是不开启的状态，需要手动开启，然后同时也支持对域名添加黑名单。
![WechatIMG165.jpg](https://developer.qcloudimg.com/http-save/yehe-11929262/5fbd8c28d6ff8b529dc3586539c801a7.jpg)
5.  **💎 轻量化 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` 权限后重新提交通过。千万别在配置文件里保留“可能未来会用到”的权限！

***

## 💡 结语与体验

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

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


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

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

作为一名正在努力转型中的开发者，每天要在浏览器里阅读大量的技术博客、官方文档和深度的源码解读。但常常会遇到一个痛点： 看完就忘，想回顾时又找不到当初引发共鸣的那段话，发现书签里面收藏了大量的网站地址，但又忘记了每个网站中到底有哪些吸引自己的点。
好，如果您也会有这样的需求，如果您也需要一个简单易用且好用的工具的话，那么我这款插件应该可以满足您的要求。

前端

客户端

开发工具

云端书架Chrome插件：极简网页高亮批注工具，支持跨设备同步。一键划线批注、精准跳转回忆、智能免打扰模式，采用邮箱验证码极速登录。开发者分享技术实现细节与Chrome商店发布经验，帮助用户高效管理网页阅读笔记。

验证码

数据库

区块链

Web App

OAuth

2026采购季 | AI焕新·智启新局

captcha

domain

blockchain-catalog

tencentdb-catalog

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

谷歌浏览器插件Brower-Books: 把整个浏览器变成你的云端书架-腾讯云开发者社区-腾讯云

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐