Tampermonkey间谍 unsafeWindow

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。

写在结尾

好了，啰嗦了这么多，见识浅陋，莫怪 ▄█▀█●
有疑问也欢迎私信我