Tampermonkey Tutorial

油猴脚本教程

Posted by Tony Chan on 2019-04-04

浏览器神器教程

文档


第一步当然是看官方文档啦.

Hello World


1
2
3
4
5
6
7
8
9
10
11
// ==UserScript==
// @name douban-ifttt-airtable-tampermonkey
// @namespace http://tampermonkey.net/
// @version 1.0
// @description try to take over the world!
// @author CoderTonyChan
// @match https://*.douban.com/people/103961302/*
// @connect *
// @grant GM_xmlhttpRequest
// @require http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// ==/UserScript==

@name就是脚本名,@namespace是脚本的主页,@version是版本,@description是介绍,@author是作者,@match是匹配到什么页面执行此脚本,@grant是需求权限。其他属性在油猴的文档里可以看到,在此就不再赘述。

⚠️:一定要写做 ==/UserScript== 以上 不然没办法使用

加上这个 hello world就完成了

1
2
3
4
5
(function() {
'use strict';

alert('Hello, world!');
})();

匹配

1
// @match        https://*.douban.com/people/103961302/*

这个就是匹配使用的站点 但是具体还要如何配匹呢? 可以用 ,参考这个

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
(function () {
'use strict';

const doubanSite = location.href;
const reMovie = /movie.douban/i;
const reBook = /book.douban/i;
const reGame = /\/games/i;

const ifttt = '<button class="ifttt" style="font-size: 18px;outline: none;">[upload airtable]</button>';

// 电影
if (reMovie.test(doubanSite)) {
}

// 📖
if (reBook.test(doubanSite)) {
}

// 🎮
if (reGame.test(doubanSite)) {
}

})();

按钮hook

利用jQuery

1
2
3
4
5
6
7
const ifttt = '<button class="ifttt" style="font-size: 18px;outline: none;">[upload airtable]</button>';
const ul_tag = $("div.grid-view .item .info .title");
if (ul_tag) {
ul_tag.append(ifttt);
}
$(".ifttt").click(function (event) {
});

这样就可以做一些东西了

网络请求


如果需要网络请求 需要加上这些

1
2
3
4
5
6
7
8
9
// @connect        *
// @grant GM_xmlhttpRequest
// ==/UserScript==

// This Userscirpt can't run under Greasemonkey 4.x platform
if (typeof GM_xmlhttpRequest === "undefined") {
alert("不支持Greasemonkey 4.x,请换用暴力猴或Tampermonkey");
return;
}

然后再封装一下 ⚠️ : GM_xmlhttpRequest 不会帮你拼任何 Content-Type 啊 和 处理object类型 需要自己封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function post(url, data, callback) {
// console.log('post');
// console.log(data);
if (typeof data === "object") {
data = JSON.stringify(data);
}


const req = GM_xmlhttpRequest({
method: 'POST',
url: url,
headers: {
'Connection': 'keep-alive',
'Content-Type': 'application/json',
},
data: data,
onreadystatechange: function (res) {
if (res.readyState == 4) {
if (res.status == 200) {
callback(res.response);
}
}
}
});
}

function getDoc(url, meta, callback) {
GM_xmlhttpRequest({
method: 'GET',
url: url,
onload: function (responseDetail) {
if (responseDetail.status === 200) {
let doc = page_parser(responseDetail.responseText);
callback(doc, responseDetail, meta);
}
}
});
}

function getJSON(url, callback) {
GM_xmlhttpRequest({
method: 'GET',
url: url,
headers: {
'Accept': 'application/json'
},
onload: function (response) {
if (response.status >= 200 && response.status < 400) {
callback(JSON.parse(response.responseText), url);
} else {
callback(false, url);
}
}
});
}

发布脚本


1
2
3
4
5
6
// ==UserScript==
// @homepageURL https://domain/folder/index.html
// @supportURL https://domain/folder/issues.html
// @downloadURL https://domain/folder/code.user.js
// @updateURL https://domain/folder/code.user.js
// ==/UserScript==

@homepageURL是主页,@supportURL是问题报告页面,@downloadURL是下载地址,@updateURL是自动更新地址。值得注意的地方是下载地址和更新地址一定要是.user.js结尾的,这样如果你装了油猴插件,在打开这个URL的时候,会跳转到油猴脚本的安装页面。只需要把这个URL共享给别人,他就可以直接安装脚本了。


Reference:

GitHub Repo:Tony Studio

Follow: CoderTonyCHan · GitHub