3.编写油猴脚本之-helloword
Start
通过上一篇文章的学习，我们安装完毕了油猴插件。今天我们来编写一个helloword的脚步，体验一下油猴。
1. 开始
点击油猴插件=>添加新脚本
默认生成的脚本
// ==UserScript==// @name New Userscript// @namespacehttp://tampermonkey.net/// @version0.1// @descriptiontry to take over the world!// @author You// @matchhttp://*/*// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==// @grantnone// ==/UserScript==(function() {'use strict';// Your code here...})();解释：
不会编写脚本？没关系，可以点击获取脚本，然后根据你的需求，去下载并使用对应脚本。
当然我这个系列的目标是，自己编写脚本，根据我们自己具体的需求，去自定义脚本。
上述生成的基础脚本代码，可以发现其实也是一个JS文件。
开头有很多行注释的内容，这些注释的内容有用吗？有什么用？
下一节内容会对这里作说明
后续的具体代码，可以看到，其实就是编写JS代码。
2. 注释项说明
在基础的脚本示例中，开头有很多注释行，既然是注释，那么他们有用吗？
我删除掉注释行，保存试一下？
结合上述的截图，我们可以发现，当我删除掉这些注释行，点击保存按钮时，系统会提示我们“脚本无效”。
那么这些注释代表什么意思呢？
2.1 注释项详细说明
官方注释项说明文档
常见的项：
| 标题 | 作用 | 使用实例 |
|---|---|---|
| name | 脚本的名称。 | New Userscript |
| version | 脚本的版本 | |
| description | 脚本的说明 | |
| author | 脚本的作者 | |
| match | 匹配脚本运行网页的url | |
| grant | 引入函数，或者变量 | |
| @include | 脚本应运行的页面。允许多个标记实例。 | |
| @require | 指向在脚本本身开始运行之前加载和执行的 JavaScript 文件。 |
3. 编写一个 helloworld 脚本。
// ==UserScript==// @name tomato_shell// @version0.1// @description脚本的说明 hellotomato// @author tomato// @matchhttp://*/*// @matchhttps://*/*// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==// @grantnone// ==/UserScript==/*1.虽然是注释，但是通过`==UserScript==`包裹。用来和普通的注释做区分==UserScript== ==/UserScript==*//*2.@match 定义所有的http或者https的网站，都会加载我们的脚本。*/(function() {'use strict';// 3.编写一个输出console.log('我是番茄')// 4.打印一下全局变量console.log(globalThis,'')// 查看是否可以debdebugger})();
解释
- 设定match 可以执行脚本的网站，就可以执行我们的js代码
- 答应全局变量是window
- 可以通过 debugger 调试我们的脚本