油猴脚本初探

Thu, 07 May 2020 00:00:00 +0000

认识

常言道，不装扩展的浏览器只能发挥它 40% 的能力。而扩展中不得不提的神器就是 油猴脚本。

相对扩展来说，它更轻量，只作用于指定网站，占用内存少。所以在脚本和扩展实现相同功能的情况下，我都是优先选用脚本。

个人认为油猴脚本就是一串 Javascript 代码，因而前端工程师很容易上手。作为后端工程师的我。。。应该也比较容易上手吧。开干！

脚本编写

开发环境

Chrome：可以更方便的定位 DOM。
暴力猴：有个为此站点查找脚本的功能，很方便。

需求

如果你像我一样，只是想在某个页面添加一个按钮，实现快速跳转的功能。而自己又非前端，后面的内容应该会帮到你。示例 js 很简单，前端大神的话直接无视看下元数据块的内容就行了。

以 torrentz2 网站为例，该网站磁力链接无法跳转，现在实现点击某一按钮后跳转到谷歌或者弹出磁力链接。

元数据块（Metadata Block）

用暴力猴新建脚本时，会默认创建基础的元数据块。

// ==UserScript==
// @name        New script - torrentz2.eu
// @namespace   Violentmonkey Scripts
// @match       *://torrentz2.eu/*
// @grant       none
// @version     1.0
// @author      -
// @description 2020/5/9 下午4:13:37
// ==/UserScript==

其中：

name：名称
namespace：命名空间，正式发布时需要
match：脚本适用网站，另外有个 include 用法差不多，官网说这个匹配规则更安全些
grant：控制特定 api 的使用，不常用，none 即可
version：版本
author：作者
description：描述

其余我用到的有：

// ==UserScript==
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @run-at      document-idle
// ==/UserScript==

其中：

require：加载第三方库，比如 jquery
run-at：控制脚本在页面哪个阶段运行，如 document-idle 为将在页面和所有资源加载之后运行

我只是将个人用到的介绍下，详细请参考官方文档

方案一：额外添加按钮

简单粗暴的在页面上添加一个很丑很丑的按钮。

var input=document.createElement("input");
input.type="button";
input.value="Custom Button";
input.setAttribute("style", "font-size:18px;position:absolute;top:120px;right:40px;");
document.body.appendChild(input);

然后为按钮添加点击事件。

input.onclick = skipFunc;

function skipFunc()
{
    var info_hash = document.querySelector("#wrap > div.trackersvotebox > div.trackers > div").innerHTML
    window.open("https://www.google.com/search?q=" + info_hash.replace("info_hash: ", ""))
}

本示例中，需要获取 info_hash 内容，浏览器直接右键检查复制 Selector 选择器，用 querySelector 方法定位即可。

另外，innerHTML、window.open 等其他方法就不赘述了，最后展示如下图，点击会跳转至谷歌。

丑哭了有没有。。整个用户脚本如下：

// ==UserScript==
// @name        New script - torrentz2.eu
// @namespace   Violentmonkey Scripts
// @match       *://torrentz2.eu/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @grant       none
// @run-at      document-idle
// @version     1.0
// @author      -
// @description 2020/5/9 下午4:13:37
// ==/UserScript==


// add button in top 
var input=document.createElement("input");
input.type="button";
input.value="Button";
input.onclick = showAlert;
input.setAttribute("style", "font-size:18px;position:absolute;top:120px;right:40px;");
document.body.appendChild(input); 
 
function showAlert()
{
    var info_hash = document.querySelector("#wrap > div.trackersvotebox > div.trackers > div").innerHTML
    window.open("https://www.google.com/search?q=" + info_hash.replace("info_hash: ", ""))
}

方案二：页面原有元素添加点击

在 info_hash 文本上添加点击事件，点击文本会跳转至谷歌。

1
2

var infoHash = document.querySelector("#wrap > div.trackersvotebox > div.trackers > div")
infoHash.onclick = function(){window.open("https://www.google.com/search?q=" + infoHash.innerHTML.replace("info_hash: ", ""))}

此方案完美隐藏，没有破坏原有页面。

方案三：按钮嵌入至页面

思路是在某一节点中，添加其子节点，以共用其子节点的样式。

找到并复制兄弟节点的所有元素

找到父节点的 Selector 选择器

appendTo 方法添加到父节点中

var infoHash = document.querySelector("#wrap > div.trackersvotebox > div.trackers > div")
var infoHashText = infoHash.innerHTML.replace("info_hash: ", "")
$(`
<a href="https://www.google.com/search?q=${infoHashText}" target="_blank" >Google</a>
`).appendTo(document.querySelector("#votebox > span.replist"));

如下，完美嵌入。

初见 on 哲学家