当前位置：首页 > news >正文

3.编写油猴脚本之-helloword

news 2025/7/19 15:20:25

3.编写油猴脚本之-helloword

Start

通过上一篇文章的学习，我们安装完毕了油猴插件。今天我们来编写一个helloword的脚步，体验一下油猴。

1. 开始

点击油猴插件=>添加新脚本

在这里插入图片描述

默认生成的脚本

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/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
// @version      0.1
// @description  脚本的说明 hellotomato
// @author       tomato
// @match        http://*/*
// @match        https://*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// ==/UserScript==/*
1.虽然是注释，但是通过`==UserScript==`包裹。用来和普通的注释做区分
==UserScript== 
==/UserScript==
*//*
2.@match 
定义所有的http或者https的网站，都会加载我们的脚本。
*/(function() {'use strict';// 3.编写一个输出console.log('我是番茄')// 4.打印一下全局变量
console.log(globalThis,'')// 查看是否可以debdebugger
})();

在这里插入图片描述