Tampermonkey的的真名
对于unsafeWindow
这个扩展历史有一些了解的朋友,都知道。
它的真名并不叫“油猴”,而应该叫“篡改(tamper)猴”。
只是因为GreasyMonkey
出现比较早,而且大名鼎鼎。并且早期沿用的习惯,相当于奠定了用户脚本扩展的标准。
所以,虽然现在Tampermonkey
比GreasyMonkey
兼容性更好,但是名字依然被大众习惯性的叫做“油猴”了。
不太恰当的比喻
平时的一些脚本,用来增强网页功能或者进行一定的改造。但是终究隔着一堵墙。
脚本的变量和函数没法被网页本身直接操纵。
同样,脚本也无法直接操控网页的变量和函数。
但是,叔叔要说但是了,
有了 unsafeWindow
, 一切就变得不同了。
就像原来两个公司明面上能够进行一些合作,但是终究没有办法按照自己的意愿随意操纵对方的内部运行。
有了unsafeWindow
,通过这个桥梁就能够轻松打通两者的内部。
所以我把unsafeWindow
比喻成间谍。通过这个“间谍”实现直接操控对方内部运作的功能。
在浏览器面板直接调试用户脚本
很长一段时间,我调试用户脚本,只能够是,
先在编辑器调整功能,然后再去刷新网页,接着查看控制面板的信息。接着调试。
虽然有 VS Code 配合 Live Server 实时刷新,终究是不方便。
如此循环往复。
后来终于有一天我想通了。可以把unsafeWindow
的功能接口全部绑到Window对象上面。这样我就能够在浏览器Console面板,随心所欲地Console了。
走开,叔叔要开始 装逼 敲代码了
- 首先,授权上面要有
// @grant unsafeWindow
- 第二步,把相应权限全部绑定给
Window
,
第一第二步具体代码如下:
// ==UserScript==
// @name Tampermonkey to Window
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 把 Tampermonkey 功能放到全局
// @author You
// @match http://localhost:8080/
// @run-at document-start
// @grant unsafeWindow
// @grant GM_addStyle
// @grant GM_deleteValue
// @grant GM_listValues
// @grant GM_addValueChangeListener
// @grant GM_removeValueChangeListener
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_log
// @grant GM_getResourceText
// @grant GM_getResourceURL
// @grant GM_registerMenuCommand
// @grant GM_unregisterMenuCommand
// @grant GM_openInTab
// @grant GM_xmlhttpRequest
// @grant GM_download
// @grant GM_getTab
// @grant GM_saveTab
// @grant GM_getTabs
// @grant GM_notification
// @grant GM_setClipboard
// @grant GM_info
// ==/UserScript==
unsafeWindow.GM_setValue = GM_setValue;
unsafeWindow.GM_getValue = GM_getValue;
unsafeWindow.GM_addStyle = GM_addStyle;
unsafeWindow.GM_deleteValue = GM_deleteValue;
unsafeWindow.GM_listValues = GM_listValues;
unsafeWindow.GM_addValueChangeListener = GM_addValueChangeListener;
unsafeWindow.GM_removeValueChangeListener = GM_removeValueChangeListener;
unsafeWindow.GM_log = GM_log;
unsafeWindow.GM_getResourceText = GM_getResourceText;
unsafeWindow.GM_getResourceURL = GM_getResourceURL;
unsafeWindow.GM_registerMenuCommand = GM_registerMenuCommand;
unsafeWindow.GM_unregisterMenuCommand = GM_unregisterMenuCommand;
unsafeWindow.GM_openInTab = GM_openInTab;
unsafeWindow.GM_xmlhttpRequest = GM_xmlhttpRequest;
unsafeWindow.GM_download = GM_download;
unsafeWindow.GM_getTab = GM_getTab;
unsafeWindow.GM_saveTab = GM_saveTab;
unsafeWindow.GM_getTabs = GM_getTabs;
unsafeWindow.GM_notification = GM_notification;
unsafeWindow.GM_setClipboard = GM_setClipboard;
unsafeWindow.GM_info = GM_info;
// 下面接着写需要执行的其他代码
console.log("Woonigh 好帅~~")
- 第三步,可以在浏览器开发面板上面直接调用脚本API。
比如发个通知什么的。尝试在 Console 面板执行代码发个通知吧:
GM_notification({
title: 'Console 通知:',
text: 'Hello, 我是Console面板发出的通知啊',
duration: 2000
})
当然,如果你只需要用其中的某一个或者某几个,
就不用像我上面那样全部都授权和绑定到Window
。
写在结尾
好了,啰嗦了这么多,见识浅陋,莫怪 ▄█▀█●
有疑问也欢迎私信我