给导航站做了个浏览器插件：看到什么网站，右键一下就收进去了

我想了想，确实是。导航站这东西，价值就在于”随手收藏”，如果添加一个网站要花一分钟，那大部分时候你就懒得加了。

于是就有了这个插件：在浏览器里装上它以后，你正在浏览什么网站，鼠标右键点一下，一个弹窗把名称、图标、网址、说明、分类全填好了，确认一下就进你的导航站数据库了。

整个过程大概三秒钟。

一、它到底怎么用

随便打开一个网站，比如你在逛某个设计素材站，觉得不错。

在页面空白处点右键 → 「添加到我的导航」，弹出这么一个窗口：

字段	已经自动帮你填好了	能改吗
网站名称	当前页面的标题	能
网站图标	浏览器缓存好的 favicon，带预览	能，可以直接贴别的图片网址
一句话说明	空着（选填）	能，最多 200 字
网站地址	当前页面的网址	能，没写协议会自动补 https://
保存到分类	从你导航站实时拉取的已有分类，还标了每个分类现在有几个站	能，单选

点「添加到导航站」，完事。回到你的导航站刷新一下，那个网站就躺在对应分类里了。

二、和”后台添加””前台右键”有什么区别

我这个导航站现在其实有三种添加方式，各有各的用处，别搞混：

方式	什么时候用	数据存哪
后台管理页	批量整理、改分类、换配色、调顺序	云端数据库，所有人可见
前台右键（访客也能用）	别人在你的导航站上想推荐个站	登录了→云端；没登录→只存他自己浏览器
浏览器插件（这次做的）	你在任何网站上看到好东西想收藏	云端数据库，所有人可见

插件解决的是最后这个场景：你根本不用打开自己的导航站，在别人家的网站上就能顺手收进去。这是另外两种方式都做不到的。

三、技术上几个值得说的地方

写给同样在折腾的站长看，不想看可以跳到下面的安装教程。

1. 权限只申请了三个

contextMenus、activeTab、storage。

不申请任何网站的全域访问权限，不常驻注入脚本，不读浏览记录。activeTab 这个权限很特殊——它只有你主动点右键菜单的那一刻才生效，平时插件碰不到你的任何标签页。

2. 密码没有写在插件里

这是最容易做错的地方。很多人做这种”带密码的小工具”，会写成：

if (input === '我的密码') { 提交 }

这等于把密码贴在门口。 前端代码是公开下载的，F12 一看就全看见了。

正确做法是：密码只存在服务端环境变量里，前端从头到尾不知道密码长什么样，它只能问服务端一句”我现在算登录了吗”。我这个插件的请求流程也是这样——密码随请求发给服务端，由服务端当场比对，比对完就丢，不落地。

3. 跨站的三道墙（踩坑记录）

插件的页面来源是 chrome-extension://xxxxx，跟你的网站不同源。我原来的服务端会把它的请求全挡掉，一共四道墙：

墙	表现	解决
没有 OPTIONS 处理	浏览器预检就拦下，请求根本发不出去	接口补 OPTIONS 响应，返回 204
响应没带 CORS 头	服务端收到了，但插件读不到响应内容	补 Access-Control-Allow-Origin，只回显请求自带的来源，不用通配符
服务端同源校验	返回 403 跨站请求被拒绝	带密码的跨站请求放行
登录 Cookie 跨站带不出去	Cookie 是 SameSite=Strict，插件根本拿不到	改用请求头带密码（X-Admin-Password）

最后一条最隐蔽。Cookie 方案在插件里根本用不了，不是配置问题，是浏览器机制决定的。

4. 分类读不到也不阻塞提交

网络有波动、服务端接口挂了的时候，分类下拉框会显示「未分类」并给个黄色提示，照样能提交——服务端收到没有分类的请求，会自动找到或新建「未分类」这个分类把它放进去。宁可放错地方，也不能让用户白填一遍。

四、获取

📌 （源码包放在下方了）

包含完整源码：manifest.json、background.js、popup.html、popup.js、options.html、options.js，外加服务端需要配合的 _worker.js 补丁和一份使用说明。

注意：如果你的导航站是自己搭的（尤其是 Cloudflare Pages + Workers KV 那套），服务端必须打上跨域补丁，插件才能连上。补丁在源码包里，部署一次就行。

五、安装教程（本地加载，不上架商店）

下面以谷歌 Chrome 最新稳定版为例（截至 2026 年 10 月是 Chrome 154，Windows 版本号 154.0.8037.98）。

版本要求

要求	说明
最低 Chrome 102	插件用到了 chrome.storage.session（Chrome 102 才加入）和 Manifest V3（Chrome 88 起支持）
建议 Chrome 110 以上	更老的版本虽然能装，但右键场景下弹窗可能调不动，会降级成独立小窗口
其他浏览器	Edge / Brave / 360 / 必应等只要是 Chromium 内核都能用，只是地址换成 edge://extensions/ 这类

检查自己版本：地址栏输 chrome://version，第一行就是。

第一步：打开扩展管理页

地址栏输入 chrome://extensions/ 回车。

（新版 Chrome 左侧会有「扩展程序 / 来自 Chrome 应用商店」的侧边栏，默认就在扩展程序这一页，不用管它。）

第二步：打开开发者模式

页面右上角有一个「开发者模式」开关，打开它。

打开后，页面左上角会多出三个按钮： 加载已解压的扩展程序　打包扩展程序　更新

如果你在右上角没找到这个开关，先看页面有没有折叠菜单（⋮），开关可能被收进去了。总之这一步必须打开，否则不会出现”加载已解压的扩展程序”按钮。

第三步：加载插件

点「加载已解压的扩展程序」，在弹出的文件选择框里，选中插件的文件夹本身（就是装着 manifest.json 的那个文件夹），点”选择文件夹”。

⚠️ 注意：是选文件夹，不是选里面的文件。选中文件夹直接确定即可，不用进去一个个选。

第四步：确认加载成功

列表里会出现一张新卡片，名字叫「添加到我的导航」。如果它报错了，通常是这两个原因：

• manifest.json 缺失或格式写错了
• 选错了层级（选成了文件夹里面的文件）

第五步：把它固定到工具栏（强烈建议）

不固定的话，插件会藏在右上角的拼图图标里，每次都要点开才能找到。

1. 点浏览器右上角的拼图积木图标
2. 在列表里找到「添加到我的导航」，点它右边的图钉图标
3. 图钉变蓝，插件图标就出现在工具栏了

小提示：装了插件以后，其实不用点图标，直接在网页上右键就行。固定它主要是为了随时能进设置页。

第六步：配置（只做一次）

1. 在插件图标上右键 → 选项（或者从扩展管理页点「详细信息 → 扩展程序选项」）
2. 填两项：
   • 导航站地址：你的导航站首页地址，比如 https://daohang-9ef.pages.dev
   • 管理员密码：就是你进后台用的那个密码
3. 点「测试连接」，看到下面两行就说明通了：✓ 密码正确 ✓ 读到 22 个分类
4. 点「保存」

第七步：开始用

随便打开一个网站，在页面空白处点右键，就能看到「添加到我的导航」了。

六、常见问题

现象	原因	怎么办
右键菜单里找不到	只在网页空白处右键才出现	在输入框、图片、链接上右键不会显示（刻意设计的，避免打扰正常操作）
测试连接失败 / 超时	地址填错，或服务端没部署补丁	先用浏览器直接打开那个地址看能不能访问；确认服务端已更新
提交报「跨站请求已被拒绝」	服务端是旧版	重新部署带跨域补丁的服务端文件
提交报「密码不对」	密码改过，或环境变量没配	到设置页重填；到 Cloudflare 确认 ADMIN_PASSWORD 还在，且类型要选「文本」
分类显示「未分类」	分类接口没读到	不影响提交，会落到「未分类」分类；想正常显示就更新服务端
改了代码不生效	没刷新	回到 chrome://extensions/，点插件卡片上的刷新图标
浏览器重启后插件没了	文件夹被移动或删除了	只要文件夹还在原处，重启仍在；移动位置需要重新加载一次

---

写在最后

本文插件基于 Manifest V3 开发，适用于所有 Chromium 内核浏览器。教程截图基于 Chrome 154 稳定版。

这个插件本身不复杂，真正花时间的是”搞清楚浏览器为什么不让我发请求”——跨域那四道墙，每一道的表现都不一样，光看报错很容易误判成”网址填错了””密码不对”。

如果你也在做自己的小工具站，希望这篇文章能帮你少踩几个坑。

有任何问题欢迎留言，看到会回。