news 2026/9/30 5:21:00

脱裤子放屁 - 你们讨厌这样的页面吗?

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
脱裤子放屁 - 你们讨厌这样的页面吗?

前言

平时在逛掘金和少数派等网站的时候,经常有跳转外链的场景,此时基本都会被中转到一个官方提供的提示页面。

掘金:

知乎:

少数派:

这种官方脱裤子放屁的行为实在令人恼火。是、是、是、我当然知道这么做有很多冠冕堂皇的理由,比如:

  • 防止钓鱼攻击
  • 增强用户意识
  • 品牌保护
  • 遵守法律法规
  • 控制流量去向

(以上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 后面的真实目标地址)。

核心函数:

js

体验AI代码助手

代码解读

复制代码

function findByTarget() { if (!hostnames.includes(location.hostname)) return; const linkKeyword = "?target="; const aLinks = document.querySelectorAll( `a[href*="${linkKeyword}"]:not([data-redirect-skipper])` ); if (!aLinks) return; aLinks.forEach((a) => { const href = a.href; const targetIndex = href.indexOf(linkKeyword); if (targetIndex !== -1) { const newHref = href.substring(targetIndex + linkKeyword.length); a.href = decodeURIComponent(newHref); a.setAttribute("data-redirect-skipper", "true"); } }); }

为此我创建了一个项目仓库 redirect-skipper ,并且将该浏览器插件发布在谷歌商店了 安装地址 。

安装并启用这个浏览器插件之后,在这些网站中点击外链就不会看到中转页面了,而是直接跳转到目标网站。

因为我目前明确需要修改的就是这几个网站,如果大家愿意使用这个插件,且有其他网站需要添加到替换列表的,可以给 redirect-skipper 仓库 提PR。

如果需要添加的网站的转换规则是和findByTarget一致的,那么仅需更新sites.json文件即可。

如果需要添加的网站的转换规则是独立的,那么需要更新插件代码,合并之后,由我向谷歌商店发起更新。

为了后期可以灵活更新配置(谷歌商店审核太慢了),我默认将插件应用于所有网站,然后在代码里通过 hostname 来判断是否真的需要执行。

json

体验AI代码助手

代码解读

复制代码

{ "$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的配置表,格式如下:

json

体验AI代码助手

代码解读

复制代码

{ "description": "远程配置可以开启 Redirect-Skipper 插件的网站 (因为谷歌商店审核太慢了,否则无需通过远程配置,增加复杂性)", "sites": [ { "hostname": "juejin.cn", "title": "掘金" }, { "hostname": "sspai.com", "title": "少数派" }, { "hostname": "www.zhihu.com", "title": "知乎" } ] }

这样插件在拉取到这份数据的时候,就可以根据这边描述的网站配置,决定是否执行具体代码。

插件完整代码:

js

体验AI代码助手

代码解读

复制代码

function replaceALinks() { findByTarget(); } function observerDocument() { const mb = new MutationObserver((mutationsList) => { for (const mutation of mutationsList) { 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(); await updateHostnames(); replaceALinks(); // 更新完数据后再执行一次 } }); }); let hostnames = ["juejin.cn", "sspai.com", "www.zhihu.com"]; function updateHostnames() { return fetch( "https://raw.githubusercontent.com/dogodo-cc/redirect-skipper/master/sites.json" ) .then((response) => { if (response.ok) { return response.json(); } throw new Error("Network response was not ok"); }) .then((data) => { // 如果拉到了远程数据,就用远程的 hostnames = data.sites.map((site) => { return site.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/ function findByTarget() { if (!hostnames.includes(location.hostname)) return; const linkKeyword = "?target="; const aLinks = document.querySelectorAll( `a[href*="${linkKeyword}"]:not([data-redirect-skipper])` ); if (!aLinks) return; aLinks.forEach((a) => { const href = a.href; const targetIndex = href.indexOf(linkKeyword); if (targetIndex !== -1) { const newHref = href.substring(targetIndex + linkKeyword.length); a.href = decodeURIComponent(newHref); a.setAttribute("data-redirect-skipper", "true"); } }); }

作者:甜甜的泥土
链接:https://juejin.cn/post/7495977411273490447
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/29 8:53:55

Github 标星 60K,不愧是阿里巴巴内部出厂的“Java 核心面试神技”

前言 作为一个 Java 程序员&#xff0c;你平时总是陷在业务开发里&#xff0c;每天噼里啪啦忙敲着代码&#xff0c;上到系统开发&#xff0c;下到 Bug 修改&#xff0c;你感觉自己无所不能。然而偶尔的一次聚会&#xff0c;你听说和自己一起出道的同学早已经年薪 50 万&#x…

作者头像 李华
网站建设 2026/9/29 8:54:08

时代转型与企业重生:新政策背景下的专精特新企业破局之道

时代转型与企业重生&#xff1a;新政策背景下的专精特新企业破局之道 在产业变革的宏大叙事中&#xff0c;《优质中小企业梯度培育管理办法》的发布标志着中国产业政策的历史性转折。这份文件表面上是规范管理&#xff0c;实质上是发展范式的系统性重构——它不再满足于培育一…

作者头像 李华
网站建设 2026/9/29 8:53:55

对于后端要和linux打交道要掌握的点

管理运行在Linux上的Spring Boot JAR包进程&#xff0c;你需要掌握以下核心命令和技巧&#xff1a; 1. 进程查找命令 查找Spring Boot进程 # 按名称查找 ps aux | grep java ps aux | grep spring ps aux | grep jar# 精确查找jar包进程 ps aux | grep -E \.jar$# 查看指定端…

作者头像 李华
网站建设 2026/9/29 9:05:35

芯片数据数据传输速度评估方法

评估数据传输速度&#xff08;通常指比特率&#xff09;时&#xff0c;一个比特的持续时间必须大于信号从发送到接收并稳定下来所需的总时间 数据传输速率 ≈ 带宽 (2/3)

作者头像 李华
网站建设 2026/9/29 9:05:35

【开题答辩全过程】以 基于SpringBoot的律师事务所管理系统的设计与实现为例,包含答辩的问题和答案

个人简介一名14年经验的资深毕设内行人&#xff0c;语言擅长Java、php、微信小程序、Python、Golang、安卓Android等开发项目包括大数据、深度学习、网站、小程序、安卓、算法。平常会做一些项目定制化开发、代码讲解、答辩教学、文档编写、也懂一些降重方面的技巧。感谢大家的…

作者头像 李华