油猴脚本的中级教程：拦截和修改网页的小技巧#
这是油猴脚本中拦截和修改网页的一些小技巧。这些内容可能很多人都知道，但是对于一些人来说可能仍然有用，所以我在这里分享给大家。
当特定元素添加到 DOM 时触发脚本#
使用 setInterval 定期检查元素不是一个好主意，因为它并不高效，可能会导致性能问题。
通过使用 MutationObserver ，我们可以在特定元素添加到 DOM 时触发脚本。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| function wait_for_element(selector, callback) {
const observer = new MutationObserver((mutationsList, observer) => {
for (const mutation of mutationsList) {
if (mutation.type === 'childList') {
const elements = document.querySelectorAll(selector);
if (elements.length > 0) {
observer.disconnect();
callback(elements);
}
}
// Filter desired elements by `mutation.addedNodes` here
}
});
observer.observe(document.body, {childList: true, subtree: true});
}
|
拦截 fetch 请求#
要拦截 fetch 请求，我们可以覆盖 window.fetch 函数。以下是如何拦截 fetch 请求的示例：
1
2
3
4
5
6
| const originalFetch = window.fetch;
window.fetch = function(input, init) {
console.log('fetch request:', input, init);
// Modify the input or init object here
return originalFetch.apply(this, arguments);
};
|
你可以用类似的方式拦截任何请求，比如 XMLHttpRequest，JQuery.ajax。
修改 fetch 响应的另一种方法是覆盖 Response.prototype.json 方法：
1
2
3
4
5
6
7
8
9
| const json = Response.prototype.json;
Response.prototype.json = function () {
return json.call(this).then((data) => resolve(this.url, data));
};
function resolve(url, data) {
console.log('fetch response:', url, data);
return data;
}
|
与第一种方法相比，这种方法更高效，因为它只修改了 Response.prototype.json 方法。
拦截函数 call#
如果我们无法直接访问函数（例如，函数在不同的作用域中），我们可以通过覆盖 Function.prototype.call 方法来拦截任何 function.call()：
1
2
3
4
5
6
7
| const originalCall = Function.prototype.call;
Function.prototype.call = function(thisArg,...args) {
if (this.name === 'foo') {
console.log('function call:', this, thisArg, args);
}
return originalCall.apply(this, arguments);
};
|
当网站使用 Webpack 等打包工具时，这特别有用。使用时要小心，以避免无限递归和性能问题。
注入到 shadow DOM#
Shadow DOM 是一种封装 Web 组件的样式和结构的方法。我们无法直接从父文档访问 shadow DOM。在 devtools 中看起来像这样：
1
2
3
4
| <my-element>
#shadow-root (close)
<p>Hello, World!</p>
</my-element>
|
要将脚本注入到 shadow DOM 中，我们可以覆盖 attachShadow 方法，将脚本注入到 shadow root 中。以下是如何将脚本注入到 shadow DOM 的示例：
1
2
3
4
5
6
7
8
| Element.prototype._attachShadow = Element.prototype.attachShadow;
Element.prototype.attachShadow = function(init) {
const shadowRoot = this._attachShadow(init);
const script = document.createElement('script');
script.textContent = 'console.log("Injected script")';
shadowRoot.appendChild(script);
return shadowRoot;
};
|
其实这和上面的几个例子类似，使用了一种称为“monkey patch”的技巧。
覆盖变量#
要覆盖变量，我们可以使用 Object.defineProperty 定义一个具有 getter 和 setter 的属性。以下是如何覆盖变量的示例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| let __bad_variable = 42;
Object.defineProperty(window, 'bad_variable', {
get: function() {
return __bad_variable;
},
set: function(value) {
console.log('variable wanna change to:', value);
__bad_variable = -value;
}
});
console.log(bad_variable); // 42
bad_variable = 100; // variable wanna change to: 100
console.log(bad_variable); // -100
|
拦截 canvas 绘图命令#
要拦截 canvas 绘图命令，我们可以使用 Proxy 覆盖 CanvasRenderingContext2D.prototype 的所有方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| function proxy_all_methods(obj, handler) {
const descriptors = Object.getOwnPropertyDescriptors(obj);
for (const key in descriptors) {
if (typeof descriptors[key].value === 'function') {
obj[key] = new Proxy(descriptors[key].value, handler);
}
}
}
proxy_all_methods(CanvasRenderingContext2D.prototype, {
apply: function(target, thisArg, args) {
console.log('canvas drawing:', target.name, args);
return target.apply(thisArg, args);
}
});
// Example:
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle ='red';
ctx.fillRect(10, 10, 100, 100);
|
在本教程中，我们学习了一些使用油猴脚本拦截和修改网页的技术。这些技术对于调试、测试或修改网页可能很有用。仅供教育目的或个人使用。
以下是一些可以在油猴脚本中使用的代码片段：
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
| const range = (start, stop, step = 1) => Array(Math.ceil((stop - start) / step)).fill(start).map((x, y) => x + y * step);
const randint = (min, max) => Math.floor(Math.random() * (max - min) + min);
const char2int = c => c.charCodeAt();
const int2char = i => String.fromCharCode(i);
const crange = (start, stop, rclose = 0) => range(char2int(start), char2int(stop) + rclose).map(int2char);
Math.factorial = x => Math.factorial[x] ||= x? x * Math.factorial(--x) : ++x;
const $ = (s) => document.querySelector(s);
const $$ = (s) => [...document.querySelectorAll(s)];
String.prototype.reverse = function() {
return [...this].reverse().join('');
}
String.prototype.splitn = function(n, tail = true) {
return this.match(RegExp(tail? `.{1,${n}}` : `.{${n}}`, 'g'));
}
Array.prototype.sum = function() {
return this.reduce((s, a) => s + a, 0);
}
Array.prototype.transpose = function() {
return this.map((row, i) => row.map((_, j) => this[j][i]));
}
reshape = (a, dim, i = 0, d = 0) => dim[d]? Array(dim[d]).fill().map((_, j) => reshape(a, dim, i * dim[d] + j, d + 1)) : a[i];
string = a => Array.isArray(a)? `[${a.map(string).join(',')}]` : a;
Array.prototype.shuffle = function() {
let array = [...this];
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
const sleep = (ms) => new Promise(r => setTimeout(r, ms));
const element = (html) => {
const t = document.createElement('template');
t.innerHTML = html.trim();
return t.content.firstChild;
}
function on(elem, event, func) {
return elem.addEventListener(event, func, false);
}
function off(elem, event, func) {
return elem.removeEventListener(event, func, false);
}
const download = function(content, filename, mimetype = 'application/octet-stream') {
var a = document.createElement('a');
a.href = URL.createObjectURL(new Blob([content],{
type: mimetype
}));
a.download = filename;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
new URLSearchParams(location.search).get('key');
|
大家有什么油猴脚本的奇技淫巧，也可以分享一下。