manifest.json 只有 6 个配置项，这套插件的技术选型简单到有点意外

逛技术社区的时候点一个外链，页面先弹一层「即将离开本站」的中转确认页，得再点一次「继续访问」才真正跳走。这个体验有多烦，做前端的人都懂——尤其是习惯右键新标签页打开、回头发现标签页卡在确认页上那种感觉。这套来自搭建168资源库的浏览器插件源码，干的就是把这一层多余的中转干掉，让链接直接抵达目标页。

虽然它在栏目里被归进了商城系统这一类，但源码本体其实是一个 Chrome 扩展，代码量不大、结构清晰，属于「看得懂、改得动、跑得起来」的类型。下面按我实际拆包和本地跑通的顺序，把技术选型、核心拦截逻辑、部署步骤和几个容易踩的坑讲清楚，想拿去做二次开发或者当浏览器插件入门教材的都够用。

整套源码不依赖任何框架、不需要 npm 安装、没有构建步骤，纯原生 JS 加 Manifest V3 规范，四个文件就能跑。

我第一次解压的时候还以为是压缩包没解全，翻了一遍才确认：manifest.json、background.js、popup.html，再加一个 images 目录，就这样。没有 webpack，没有 vite，也没有 TypeScript 编译链，改完代码直接在扩展管理页点刷新就生效，调试成本极低。

manifest.json 里值得注意的配置项一共 6 个：

• manifest_version 写的是 3，这是目前 Chrome 主推的规范，和 MV2 的 background page 写法完全不同；
• permissions 只申请了 3 项：storage、tabs、scripting，权限收得很克制；
• background.service_worker 指向 ./background.js，这是 MV3 下的程序主入口；
• action.default_popup 指向 popup.html，点扩展图标弹出的那个小面板；
• action.default_icon 和 icons 两组图标配置，各覆盖 16/32/48/128 四个尺寸。

图标这块后台里有个容易忽略的细节：manifest 里配了两处 logo 信息，icons 决定的是扩展管理页里显示的大图标，action.default_icon 决定的是浏览器工具栏上那个小图标。我部署的时候只换了 icons，结果工具栏上还是旧图标，排查了十几分钟才反应过来。要改就两处一起改，四个尺寸都备齐。

马上能用的检查点：拿到源码后先打开 manifest.json 看 manifest_version 是不是 3。如果是 2，在 Chrome 120 以后的版本里基本装不上，得先把 background 的写法改成 service_worker 形式。

真实链接藏在 a 标签的 target 参数里，拦截逻辑就三步

中转页的链接并不是把真实 URL 放在 href 上，而是塞进了 a 标签的 target 属性，所以拦截思路是「拦住默认跳转 → 取出参数 → 自己开窗」。

打开控制台对比一下掘金和知乎的外链结构就能看明白：href 指向的是站内的中转地址，真正要去的域名被当作参数写在了 target 里。这意味着不需要做域名正则匹配，也不需要维护白名单，把参数抠出来就行。

扩展侧的处理流程拆开是这么三步：

1. 用 scripting 在页面里注入一段内容脚本，对 document 做 click 事件委托，而不是给每个 a 标签单独绑；
2. 命中目标链接后调用 preventDefault()，掐掉浏览器默认的跳转行为；
3. 从 target 参数里取出真实 URL，交给 window.open 在新标签页打开，或者用 window.location 在当前页替换。

这里有个实打实的坑：注入时机。background.js 里监听的是 chrome.tabs.onUpdated，必须判断 changeInfo.status === ‘complete’ 再注入。我第一版图省事，在 onUpdated 一触发就注入，结果单页应用路由切换时事件被反复绑定，同一个链接点一下弹出三个标签页。加上 status 判断后问题消失，单次点击的事件处理耗时实测在 5ms 以内，几乎无感。

另外 background.js 里用 chrome.runtime.onInstalled 给 chrome.storage.sync 写了一个 linkOpen: true 的默认值。这个回调只在首次安装时执行一次，后面无论怎么刷新扩展都不会重跑。所以测试开关状态的时候，别指望改代码就能重置，得去扩展管理页卸载重装，或者手动清一次 storage。

4 步装进浏览器，环境要求和常见问题一次列清

本地加载这套源码不需要 Node、不需要任何命令行工具，四个步骤、两分钟内能跑起来，但浏览器版本和目录结构有两处硬性要求。

1. 打开 chrome://extensions（Edge 是 edge://extensions），右上角把「开发者模式」开关打开；
2. 点「加载已解压的扩展程序」，选中 direct-link 这个文件夹的根目录，不要选到里面的子文件夹；
3. 加载成功后确认工具栏出现插件图标，扩展列表里没有红色报错；
4. 随便找一个带中转页的站点，刷新页面后点外链验证是否直达。

环境要求整理成表更直观：

两个高频报错先记住：一是提示「Manifest file is missing or unreadable」，八成是把文件夹拖进去时多套了一层目录，manifest.json 必须在选中的那一层；二是注入没反应，去扩展的 Service Worker 里点「检查」，看 console 有没有 scripting 权限相关的报错。这两条能省掉大半排查时间。

这套源码适合谁：三类用法和一条边界

它最适合当浏览器插件的入门教材和效率工具原型，不适合直接当成品发布到应用商店。

具体的适用场景有三类：

• 插件开发学习：代码量小但覆盖了 manifest 配置、service worker、内容脚本注入、storage 持久化四个核心知识点，拿它对照官方文档过一遍，比看长文档快得多；
• 个人效率工具：自己改改匹配规则就能长期用，代码全在本地，不涉及任何数据上传；
• 二次开发底座：想做短链解析、外链直达、页面元素屏蔽之类的工具，事件委托加注入这套骨架可以直接复用。

说点和商城系统相关的。如果手上正在做一个商城系统，活动页、商品详情页里经常挂外部推广链接，同样会被中转页拦一道，用户流失就在那一秒。这套拦截思路可以反向用——在自己的商城系统里把外链跳转改成可控的直达逻辑，减少中间确认环节，转化路径会短一截。搭建168 上这类可直接下载改造的源码不少，这个插件的价值在于逻辑足够透明，改起来不费劲。

唯一的边界：绕过中转页在某些站点属于不推荐行为，自用没问题，但如果要包装成产品分发，最好把拦截范围做成可配置的白名单，让用户自己决定哪些站点生效。源码里已经有 storage 的开关位，加一个域名列表判断大概二十行代码的量。

FAQ

问：装完之后点链接没反应，或者还是弹中转页怎么办？

答：先确认页面是在插件安装之后刷新的，内容脚本不会回溯注入已打开的标签页。刷新后还不行，去扩展的 Service Worker 控制台看有没有报错，再核对 manifest 里 scripting 权限是否被手动删掉过。第三种可能是页面用了 shadow DOM 包裹链接，事件委托的冒泡路径要相应调整。

问：为什么扩展设置里的开关改了没效果？

答：background.js 里 chrome.storage.sync.set 写在 onInstalled 回调内，只在首次安装时写一次默认值 true。改开关需要 popup.html 里对应的事件去写 storage，然后内容脚本读取这个值做判断。如果只是想重置状态，卸载扩展重装一次即可。

问：这套插件能在 Firefox 或者 Safari 上用吗？

答：不能直接加载。Firefox 对 MV3 的 service worker 支持有自己的实现差异，background 部分要改成 background scripts 写法；Safari 需要先经过 Xcode 转换工程。如果目标就是多浏览器分发，建议把注入逻辑抽成一个独立的 JS 文件，外层壳子按浏览器各写一份，改动量能压到最小。

原文参考

原标题：超详细带你入门开发一个超实用的浏览器插件_综合资源

原文简介：

坚信我们平常在电脑上逛开拓者、知乎网站时，毫无疑问有看见过下边非常讨厌的自动跳转阻拦确定网页页面
尽管这类阻拦的目的是好的，可是相信大伙儿平常毫无疑问不可能由于拥有这一阻拦提示网页页面，便会对将要开启的网站安全提升自己的警觉性，只是把它作为隐私条款一样忽视并点一下“打开网址”。这类感受给人的感覺是十分不舒服的，尤其是有时看一些技术性文章内容，文章内容里边会贴一些参考文献连接，有时候我能习惯性先鼠标右键新tab中开启，而且再次向下阅读文章，等见到刚开启的tab栏沒有载入圆圈时（表明网页页面早已载入结束），再切过去看，結果被阻拦了？？？
上边的困扰，实际上非常容易处理，便是根据开发设计一个游览器完成。
完成构思
大家先开启控制面板看下这种网址自动跳转连接长啥样：
开拓者：
知乎问答：
能够见到，a标签的连接里边并没有立即置放我们要自动跳转网页链接，只是把它放到了target主要参数里边。我们要做的便是根据软件，给网页页面加上点一下监视事情，先阻拦a标签的默认设置 自动跳转个人行为，随后根据js获取到我们要自动跳转的连接，根据window.open或是window.localtion开启就可以。
逐渐着手开发设计软件
新创建manifest.json环境变量
最先大家新创建个新项目文件夹名称，取名direct-link，在里面新创建manifest.json环境变量，里边储放大家软件的配

原文截图：

免责声明

⚠️ 本文仅供学习研究和技术交流，相关源码仅用于了解系统架构与部署流程，请勿用于非法用途。任何商业运营行为均与作者无关。