ARTICLE · 1189777
浏览器插件实战:右键一键收藏网站到自己的导航站(附源码)
前几天有网友在我那篇导航站的文章底下留言，说手动添加网址太麻烦了——每次看到一个好站，得先复制网址，再打开自己的导航站后台，找到对应分类，填名称、填图标、粘贴地址，折腾一圈才能加进去。
我想了想，确实是。导航站这东西，价值就在于”随手收藏”，如果添加一个网站要花一分钟，那大部分时候你就懒得加了。
于是就有了这个插件：在浏览器里装上它以后，你正在浏览什么网站，鼠标右键点一下，一个弹窗把名称、图标、网址、说明、分类全填好了，确认一下就进你的导航站数据库了。
整个过程大概三秒钟。
一、它到底怎么用
随便打开一个网站，比如你在逛某个设计素材站，觉得不错。
在页面空白处点右键 → 「添加到我的导航」，弹出这么一个窗口：
点「添加到导航站」，完事。回到你的导航站刷新一下，那个网站就躺在对应分类里了。
二、和”后台添加””前台右键”有什么区别
我这个导航站现在其实有三种添加方式，各有各的用处，别搞混：
| 后台管理页 | ||
| 前台右键 | ||
| 浏览器插件 | 你在任何网站上看到好东西想收藏 |
插件解决的是最后这个场景：你根本不用打开自己的导航站，在别人家的网站上就能顺手收进去。这是另外两种方式都做不到的。
三、技术上几个值得说的地方
写给同样在折腾的站长看，不想看可以跳到下面的安装教程。
1. 权限只申请了三个
contextMenus、activeTab、storage。
不申请任何网站的全域访问权限，不常驻注入脚本，不读浏览记录。activeTab 这个权限很特殊——它只有你主动点右键菜单的那一刻才生效，平时插件碰不到你的任何标签页。
2. 密码没有写在插件里
这是最容易做错的地方。很多人做这种”带密码的小工具”，会写成：
if(input === '我的密码'){ 提交 }
这等于把密码贴在门口。 前端代码是公开下载的，F12 一看就全看见了。
正确做法是：密码只存在服务端环境变量里，前端从头到尾不知道密码长什么样，它只能问服务端一句”我现在算登录了吗”。我这个插件的请求流程也是这样——密码随请求发给服务端，由服务端当场比对，比对完就丢，不落地。
3. 跨站的三道墙（踩坑记录）
插件的页面来源是 chrome-extension://xxxxx，跟你的网站不同源。我原来的服务端会把它的请求全挡掉，一共四道墙：
补Access-Control-Allow-Origin，只回显请求自带的来源，不用通配符 | ||
最后一条最隐蔽。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 110 以上 | |
检查自己版本：地址栏输 chrome://version，第一行就是。
第一步：打开扩展管理页
地址栏输入 chrome://extensions/ 回车。
（新版 Chrome 左侧会有「扩展程序 / 来自 Chrome 应用商店」的侧边栏，默认就在扩展程序这一页，不用管它。）
第二步：打开开发者模式
页面右上角有一个「开发者模式」开关，打开它。
打开后页面左上角会多出三个按钮： 加载已解压的扩展程序打包扩展程序更新
如果你在右上角没找到这个开关，先看页面有没有折叠菜单（⋮），开关可能被收进去了。总之这一步必须打开，否则不会出现”加载已解压的扩展程序”按钮。
第三步：加载插件
点「加载已解压的扩展程序」，在弹出的文件选择框里，选中插件的文件夹本身（就是装着 manifest.json 的那个文件夹），点”选择文件夹”。
⚠️ 注意：是选文件夹，不是选里面的文件。选中文件夹直接确定即可，不用进去一个个选。
第四步：确认加载成功
列表里会出现一张新卡片，名字叫「添加到我的导航」。如果它报错了，通常是这两个原因：
manifest.json缺失或格式写错了 选错了层级（选成了文件夹里面的文件）
第五步：把它固定到工具栏（强烈建议）
不固定的话，插件会藏在右上角的拼图图标里，每次都要点开才能找到。
点浏览器右上角的拼图积木图标 在列表里找到「添加到我的导航」，点它右边的图钉图标 图钉变蓝，插件图标就出现在工具栏了
小提示：装了插件以后，其实不用点图标，直接在网页上右键就行。固定它主要是为了随时能进设置页。
第六步：配置（只做一次）
在插件图标上右键 → 选项（或者从扩展管理页点「详细信息 → 扩展程序选项」） 填两项： - 导航站地址
：你的导航站首页地址，比如 https://daohang-9ef.pages.dev - 管理员密码
：就是你进后台用的那个密码 点「测试连接」，看到下面两行就说明通了： ✓ 密码正确✓ 读到 22 个分类点「保存」
第七步：开始用
随便打开一个网站，在页面空白处点右键，就能看到「添加到我的导航」了。
六、常见问题
写在最后
本文插件基于 Manifest V3 开发，适用于所有 Chromium 内核浏览器。教程基于 Chrome 154 稳定版。
这个插件本身不复杂，真正花时间的是”搞清楚浏览器为什么不让我发请求”——跨域那四道墙，每一道的表现都不一样，光看报错很容易误判成”网址填错了””密码不对”。
如果你也在做自己的小工具站，希望这篇文章能帮你少踩几个坑。
有任何问题欢迎留言，看到会回。
