浏览器插件之《跳过第三方链接的提示中转页》——你们讨厌这样的页面吗？ 前言平时在逛掘金和少数派等网站的时候，经常有跳转外链的场景，此时基本都会被中转到一个官方提供的提示页面。 掘金： 知乎： 少数派： 这种官方脱裤子放屁的行为实在令人恼火。是、是、是、我当然知道这么做有很多冠冕堂皇的理由，比如： 防止钓鱼攻击增强用户意识品牌保护遵守法律法规控制流量去向（以上5点是 AI 告诉我的理由） 但是作为混迹多年的互联网用户，什么链接可以点，什么最好不要点(悄悄的点) 我还是具备判断能力的。 互联网的本质就是自由穿梭，一个 A 标签就可以让你在整个互联网翱翔，现在你每次起飞的时候都被摁住强迫你阅读一次免责声明，多少是有点恼火的。 解决方案这些中转站的实现逻辑基本都是将目标地址挂在中转地址的target参数后面，在中转站做免责声明，然后点击继续跳转才跳到目标网站。 掘金: https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.apple.com%2Fcn%2Fdesign%2Fhuman-interface-guidelines%2Fapp-icons%23macOS/ 少数派：https://sspai.com/link?target=https%3A%2F%2Fgeoguess.games%2F 知乎：https://link.zhihu.com/?target=https%3A//asciidoctor.org/ 所以我们就可以写一个浏览器插件，在这些网站中，找出命中外链的 A 标签，替换掉它的href属性(只保留 target 后面的真实目标地址)。 核心函数： functionfindByTarget(){ if(!hostnames.includes(location.hostname))return; constlinkKeyword ="?target="; constaLinks =document.querySelectorAll( `a[href*="${linkKeyword}"]:not([data-redirect-skipper])` if(!aLinks)return; aLinks.forEach((a) ={ consthref = a.href; consttargetIndex = href.indexOf(linkKeyword); if(targetIndex !==-1) { constnewHref = href.substring(targetIndex + linkKeyword.length); a.href =decodeURIComponent(newHref); a.setAttribute("data-redirect-skipper","true"); } } 为此我创建了一个项目仓库 redirect-skipper ，并且将该浏览器插件发布在谷歌商店了 安装地址 。 「安装并启用这个浏览器插件之后，在这些网站中点击外链就不会看到中转页面了，而是直接跳转到目标网站。」 因为我目前明确需要修改的就是这几个网站，如果大家愿意使用这个插件，且有其他网站需要添加到替换列表的，可以给 redirect-skipper 仓库 提PR。 如果需要添加的网站的转换规则是和findByTarget一致的，那么仅需更新sites.json文件即可。 如果需要添加的网站的转换规则是独立的，那么需要更新插件代码，合并之后，由我向谷歌商店发起更新。 为了后期可以灵活更新配置（谷歌商店审核太慢了）,我默认将插件应用于所有网站，然后在代码里通过 hostname 来判断是否真的需要执行。 { "$schema":"https://json.schemastore.org/chrome-manifest.json", "name":"redirect-skipper", "manifest_version":3, "content_scripts": [ { "matches": ["all_urls"], "js": ["./scripts/redirect-skipper.js"], "run_at":"document_end" } ], } 在当前仓库里维护一份sites.json的配置表，格式如下： { "description":"远程配置可以开启 Redirect-Skipper 插件的网站 （因为谷歌商店审核太慢了，否则无需通过远程配置，增加复杂性）", "sites": [ { "hostname":"juejin.cn", "title":"掘金" }, { "hostname":"sspai.com", "title":"少数派" }, { "hostname":"www.zhihu.com", "title":"知乎" } ] } 这样插件在拉取到这份数据的时候，就可以根据这边描述的网站配置，决定是否执行具体代码。 插件完整代码： functionreplaceALinks(){ findByTarget(); } functionobserverDocument(){ constmb =newMutationObserver((mutationsList) ={ for(constmutationofmutationsList) { if(mutation.type ==="childList") { if(mutation.addedNodes.length) { replaceALinks(); } } } mb.observe(document, {childList:true,subtree:true } // 监听路由等事件 ["hashchange","popstate","load"].forEach((event) ={ window.addEventListener(event,async() = { replaceALinks(); if(event ==="load") { observerDocument(); awaitupdateHostnames(); replaceALinks();// 更新完数据后再执行一次 } }); lethostnames = ["juejin.cn","sspai.com","www.zhihu.com"]; functionupdateHostnames(){ returnfetch( "https://raw.githubusercontent.com/dogodo-cc/redirect-skipper/master/sites.json" ) .then((response) ={ if(response.ok) { returnresponse.json(); } thrownewError("Network response was not ok"); }) .then((data) ={ // 如果拉到了远程数据，就用远程的 hostnames = data.sites.map((site) ={ returnsite.hostname; }) .catch((error) ={ console.error(error); } // 符合 '?target=' 格式的链接 // https://link.juejin.cn/?target=https%3A%2F%2Fdeveloper.apple.com%2Fcn%2Fdesign%2Fhuman-interface-guidelines%2Fapp-icons%23macOS/ // https://sspai.com/link?target=https%3A%2F%2Fgeoguess.games%2F // https://link.zhihu.com/?target=https%3A//asciidoctor.org/ functionfindByTarget(){ if(!hostnames.includes(location.hostname))return; constlinkKeyword ="?target="; constaLinks =document.querySelectorAll( `a[href*="${linkKeyword}"]:not([data-redirect-skipper])` if(!aLinks)return; aLinks.forEach((a) ={ consthref = a.href; consttargetIndex = href.indexOf(linkKeyword); if(targetIndex !==-1) { constnewHref = href.substring(targetIndex + linkKeyword.length); a.href =decodeURIComponent(newHref); a.setAttribute("data-redirect-skipper","true"); } } 更详细的流程可以查看 redirect-skipper 仓库地址： https://github.com/dogodo-cc/redirect-skipper AI编程资讯AI Coding专区指南：https://aicoding.juejin.cn/aicoding 点击"阅读原文"了解详情~ 阅读原文