编写Chrome插件实现直接从掘金、简书等跳转外链

不知不止呀
2,290 阅读4分钟

背景

相信很多小伙伴和我一样，经常在掘金、知乎或CSDN等网站浏览文章时，会发现文章中内嵌了相关知识点或者相关技术文档的链接，而大部分此类链接都不是该网站内某一篇文章，因此点击链接后会出现一个新页面，点击页面中的确定跳转按钮后才会进入相关链接的真正页面。
但是这类实现虽然保护了链接跳转的安全性、但是对于我们来说却是徒添麻烦，每次我们点开了多个相关链接，自以为每个链接都打开了对应的页面，结果回头来看，发现都卡在如下的页面，迟迟不动... 掘金link.png 以上图片为从掘金网站跳转到另一个外链，出现的页面，我们总需要再次点击“继续访问”才能进入到真正的页面。
类似的还有知乎、简书等，如下面两张图片所示：

简书.png

知乎.png

外链分析

其实从以上图片可以看出，在实现外链的跳转时，他们都是通过url地址来存储外链地址的。
掘金(link.juejin.cn/?target=外链地址)和知乎(link.zhihu.com/?target=外链地址)是通过在url地址中添加target查询参数，将真实要访问的外链通过编码后放入了参数target中，简书是通过url查询参数存储了真实跳转链接。
其实大部分类似掘金的网站实现外链跳转的原理是类似的，比如CSDN(link.csdn.net/?target=外链地址)也是通过target参数实现、B站(game.bilibili.com/linkfilter/?url=外链地址)则是通过url参数实现。
由此，我们可以通过操作url地址来获取真实外链地址，从而实现跳转。
接下来，先了解编写chrome插件的最基本的内容。

编写Chrome插件入门

实现自定义chrome插件，需要最基本的几个文件，包括manifest.json文件、popup.html文件、content_scrips.js文件等，本文实现外链直接跳转，使用这三个文件即可，官网还有更多详细的内容，可以通过官网学习。

manifest.json文件

该文件是实现编写自己的chrome插件的最基本的配置文件，在该文件中可以定义自定义插件的名称、版本、自定义插件的描述、工具栏图标以及匹配哪些网站等。关于manifest.json文件具体如何使用可以通过此处访问详细内容。
本文实现该插件的manifest.json代码如下：

{
  "manifest_version": 2,
  "name": "juejin_jumpto_link",
  "description": "从掘金等网站直接跳转到某链接插件",
  "version": "1.0.0",
  "icons": {
    "48": "icons/icon48.png",
    "64": "icons/icon64.png",
    "128": "icons/icon128.png"
  },
  "browser_action": {
    "default_icon": "icons/icon64.png",
    "default_title": "jumpto_link",
    "default_popup": "popup.html"
  },
  "permissions": [
    "http://*/*",
    "https://*/*",
    "storage",
    "tabs",
    "activeTab",
    "notifications",
    "contextMenus"
  ],
  "content_scripts": [
    {
      "matches": [
        "*://link.juejin.cn/?target=*",
        "*://link.zhihu.com/?target=*",
        "*://link.csdn.net/?target=*",
        "*://www.jianshu.com/go-wild?ac=2&url=*",
        "*://game.bilibili.com/linkfilter/?url=*",
      ],
      "js": ["content_script.js"],
      "run_at": "document_start"
    }
  ]
}

manifest_version字段表示插件的版本，为2，name字段为自定义插件的名称，本文取为juejin_jumpto_link,permissions字段表示允许有哪些权限、content_scripts字段则定义了该插件需要生效的url地址，以及对应的js文件，其中run_at表示该插件何时执行，一般取为"document_start"，表示文档开始加载时就执行。browser_action字段定义了工具栏图标，也就是安装完插件后在工具栏显示的插件图标，如下图所示：

image.png 而上图中的hello link则是通过popup.html文件实现的。

popup.html

该文件主要是当点击插件时显示的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跳转链接插件</title>
</head>
<body>
    <div>hello link</div>
</body>
</html>

content_scripts.js

该文件是自定义插件的核心实现代码，首先通过获取地址栏的url，将其转为URL对象，再从URL对象中获取所有查询参数searchParams，通过searchParams的get方法传入参数的key，然后获取要查询的参数的value。最后将得到的真实外链地址赋值给location.href，即可完成直接跳转到外链。
代码如下：

(function () {
  "use strict";
  const href = location.href;
  // https://link.juejin.cn/?target=https%3A%2F%2Fsocket.io%2F
  // 得到url中的查询参数
  const getParams = (filed) => {
    const urlObject = new URL(href);
    const urlParamRes = urlObject.searchParams.get(filed);
    return urlParamRes;
  }

  // 得到外链的真实url
  const url = getParams('target') || getParams('url');

  // 跳转
  location.href = url;

})();

完成之后，将代码的文件夹拖入扩展程序中，即可生效。

总结

本次实现了一个非常简单的自定义chrome插件，只需了解如何编写chrome插件和实现该插件的主要功能即可实现。

avatar
文章
阅读
粉丝