第一步 先安装油猴扩展
Edge浏览器请访问这个链接，直接跳转到对应的应用商店页面，或者去Edge的应用商店搜索“Tampermonkey”。
https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd
Google浏览器请访问这个链接，直接跳转到对应的应用商店页面，或者去Google的应用商店搜索“Tampermonkey”。
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo?hl=zh-CN
使用Chromium开源项目的浏览器可直接去Google的应用商店安装油猴，Edge浏览器也支持Google的扩展。
第二步 开始第一个油猴脚本
点击浏览器工具栏的油猴图标，会弹出一个悬浮小窗口，再次选择【管理面板】可进入油猴的管理页面，用来管理脚本的启用与关闭等等。
若是点击悬浮小窗口的【添加新脚本】，则是创建一个空的脚本示例，可分成两个大模块：元信息、代码。
暂时不需要了解太多，简单了解元信息包含脚本名、脚本说明、生效网址等等就行。
开始写第一行代码，在闭包函数内写上第一行代码，测试脚本是否生效。代码结尾要记得写上分号哦。这两个随便选一个都行。
console.log("Hello World");
alert("Hello World");
重要补充：元信息的 // @match 代表着生效的网址，星号*表示匹配任何内容，而现在的网站基本使用https加密，所以需要另外补充一行，表示匹配任何以https开头的网站。（才不会说我忘了）
// @match https://*/*
初次保存会切到已安装的脚本列表，点击名称或者右侧的编辑图标都可以重新编辑代码。
可以发现左上角的【】有了一个具体的脚本名，下面跟随脚本作者名。
随便访问一个网站，重新刷新网站加载一下保存的脚本，只要出现弹窗或者F12的控制台有打印信息，就说明脚本成功运行了。
根据我的观察，油猴本身不提供额外的功能，比如函数啊、API啊之类的，所以每个油猴脚本实现的任何功能，代码基本全是JavaScript的内容。而元信息只是提供一个辅助用途。
比如我想给某个网页元素添加css样式让其背景色变暗，先找到这个元素所在位置，然后在这个元素的位置右键找到【复制】-【复制 JS 路径】，然后就能够用querySelector元素选择器快速定位该元素，通过setAttribute给这个元素添加css样式，这些都是JavaScript的内容。
window.onload 的作用是当页面载入之后再运行内部的代码块，这是因为JS的运行优先级比渲染HTML的DOM高，容易造成元素选择器找不到对应的元素，需要人为的压制”速度“。
window.onload = function () {
let MyDiv = document.querySelector("body > div.L3eUgb > div.o3j99.LLD4me.yr19Zb.LS8OJ > div");
MyDiv.setAttribute("style", "background-color: #383838;");
}
第三步 使用第三方文本编辑器码代码
油猴扩展本身内置了一个文本编辑器，能满足简单的需求，也能自动缩进（相当于代码格式化），但是不够高效率，因此推荐使用第三方文本编辑器来写代码。
但是使用第三方编辑器，代码文件会保存在硬盘里面，浏览器里面的油猴不能直接读取到，所以需要手动操作一番。
可以点击【文件】->【保存到磁盘】，把脚本代码保存到硬盘里，文件名的格式一般是 xxx.user.js。
先去浏览器的扩展管理面板，也可以在浏览器地址栏输入以下内容快捷跳转。
edge://extensions/
chrome://extensions/
vivaldi://extensions/
找到【Tampermonkey】扩展程序，请点击下面的【详细信息】
并开启【允许访问文件URL】，就可以愉快的访问本地文件啦~
然后在油猴的编辑器的元信息末尾添加一行代码，注意元信息的结尾是 // ==/UserScript== ，不要跑出这个范围之外写元信息的属性值。
// @require file:///D:\xxxx.user.js
file:/// 后面接上js脚本文件的全路径，可以在资源管理器按住Shift同时右键文件，可以看到【复制文件地址】，点击之后就能复制文件的全路径。
如下图所示，油猴编辑器的自运行函数可以留空，具体代码可放到硬盘的脚本文件里。
下图为生效示意图。写完脚本也要记得实机测试一下，也就是全选复制脚本文件的代码后，再去浏览器的油猴编辑器替换代码，无需再使用 @require 读取本地脚本文件。发布脚本的地方支持直接上传文件，非常方便。
第四步 了解油猴脚本相关文档
一般去下面这个网址发布脚本，也有一些基础的文档，可点击右上角导航栏的【站点帮助】，查看一些使用说明和开发注意事项，元属性表可以稍微看一看。
https://greasyfork.org/zh-CN
分享一些油猴文档站点：
GreaseSpot（英文） —— https://wiki.greasespot.net/Main_Page
一个大佬编写的油猴脚本教程 —— https://blog.chrxw.com/archives/2021/10/19/1623.html
一个油猴脚本交流的中文网站 —— https://bbs.tampermonkey.net.cn/
然后就是学习JavaScript的站点：
菜鸟教程 —— https://www.runoob.com/js/js-tutorial.html
现代 JavaScript 教程 —— https://zh.javascript.info/
阮一峰的 ES5 教程 —— https://wangdoc.com/javascript/
阮一峰的 ES6 教程 —— https://wangdoc.com/es6/
廖雪峰 —— https://www.liaoxuefeng.com/wiki/1022910821149312
MDN —— https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
w3schools（英文） —— https://www.w3schools.com/js/default.asp
可以先去菜鸟教程看几遍，稍微了解一下基础，不需要一次性啃下来，一般来说一边实战一边只搜索当前需要的知识点就行。
了解基础也是为了能够让你知道，一般遇到问题，需要去搜索什么关键词，你的需求可以用什么来实现。
搜索是一个好文明。
第五步 准备一款好用的文本编辑器（可选）
油猴脚本采用的语言是Javascript，这方面推荐WebStorm和Visual Studio Code，前者是商业软件需要付费（可30天试用或申请免费授权），后者免费使用还有各种超方便的插件辅助开发。
WebStorm —— https://www.jetbrains.com/webstorm/
Visual Studio Code —— https://code.visualstudio.com
实际上任何一款文本编辑器都可以拿来写JavaScript代码，比如Notepad3、Sublime Text、jEdit、NetBeans等等。
Notepad3 —— https://www.rizonesoft.com/
Sublime Text —— http://www.sublimetext.com
jEdit —— http://jedit.org
NetBeans —— https://netbeans.apache.org
vscode支持中文，不过需要手动去安装中文语言包，去vscode的扩展搜索“Chinese (Simplified) Language Pack for Visual Studio Code”，推荐安装。
也可以用浏览器访问，点击安装（Install）会跳转到vscode进行安装，非常方便。
https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-zh-hans
写js代码的时候没有代码补全、代码提示等便捷功能可不行，所以需要另外安装一些vscode插件。
1. Prettier – Code formatter 代码格式化插件，能够美化代码片段，推荐安装。
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
2. 代码片段，可选，能够节省敲代码块的时间。搜索“JavaScript snippets”挑选一个合适的安装。这边推荐一个：JavaScript (ES6) code snippets。
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
3. 主题，可选，美化代码显示的颜色。搜索 @category:”Themes” 筛选出所有的主题，我这边用的“Eva Theme”。还有一个能够以不同颜色区分tab缩进的插件，叫“indent-rainbow”，让代码区块更有层次感，比较推荐。
Eva Theme —— https://marketplace.visualstudio.com/items?itemName=fisheva.eva-theme
indent-rainbow —— https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow
4. 注释增强，比较推荐，可以给变量、函数等东西写上详细的说明，这样鼠标悬浮在变量、函数上方时可以快速看到对应的描述。我这边用的“JavaScript Comment Snippet”，本质上是JSDoc内容，相关参数有点烧脑。
JavaScript Comment Snippet —— https://marketplace.visualstudio.com/items?itemName=NicholasHsiang.vscode-javascript-comment
JSDoc 入门 —— https://www.shouce.ren/api/view/a/13232
5. 切换窗口自动保存，节省你按Ctrl+S的时间，推荐。vscode自带的功能，下面教你如何开启：
依次点击vscode菜单栏的【文件】-【首选项】-【设置】，可以打开vscode的设置。
或者按 Ctrl+, 快捷键能够快速打开vscode的设置，也就是M键右侧的逗号键，逗号上面有 的按键。
在设置的搜索框输入 Auto Save，在下拉框里选择 onWindowChange 项，完事。
6. 窗口置顶小工具，有时候可以用来置顶vscode窗口，这样就能够一边写代码一边操作浏览器，适合小屏幕的用户，可选。
我这边用的 Window TopMost Control，非常好用，软件英文不影响使用。若是找不到Download下载按钮，可直接访问第二个链接自动下载。
https://www.sordum.org/9182/window-topmost-control-v1-3/
https://www.sordum.org/downloads/?st-topmost
请去任务栏右键该软件，第一栏的 Window List 可以自由选择任意的窗口进行置顶，第二栏的 Remove All Windows on Top 能够清除所有置顶的窗口，其他的无需关注。
感谢阅读，若有错误遗漏之处可留言评论，以上。