5 分钟,教你从零快速编写一个油猴脚本!
Tampermonkey,又称 Greasemonkey 油猴脚本,是一款免费的浏览器扩展,可用于管理用户脚本,它本质上是对浏览器接口的二次封装
油猴脚本可用于更改页面布局样式、完成页面自动化、去广告、下载影视等功能,适用于主流的浏览器
官网:
https://www.tampermonkey.net/index.php
1. 介绍
Tampermonkey 特点包含:
内置的编辑器,可以非常方便地管理、编辑用户脚本
支持自动更新检查功能
标签中脚本运行状态速览
可以通过压缩文件、云存储进行脚本备份及还原
通过面板新建一个用户脚本,默认会生成一个模板,模板内容如下:
模板中会预设部分元数据,用于定义脚本的名称、版本号、更新方式、运行页面、权限等功能
常见的元数据包含:
@name - 油猴脚本的名称
@namespace 脚本的命名空间,用于确定脚本的唯一性
@version 脚本的版本号,用于脚本的更新
@description 脚本的描述信息
@author 作者
@require 定义脚本运行之前需要引入的外部 JS,比如:jQuery
@match 使用通配符执行需要匹配运行的网站地址
@exclude 排除匹配到的网站
@grant 指定脚本运行所属的权限
@connect 用于跨域访问时指定的目标网站域名
@run-at 指定脚本的运行时机
@icon 用于指定脚本的图标,可以设置为图片 URL 地址或 base64 的字符串
2. 常见 API
油猴提供了很多强大的 API,用于操作缓存及窗口等,如果不需要使用这些 API,可以声明权限为 none,即:
@grant none
2-1 打印日志
用于在控制台中打印日志,便于调试
// 授权
@grant GM_log// 在控制台打印日志
GM_log("Hello World");
2-2 缓存管理
包含对缓存的新增、获取、删除,在使用之前我们都需要使用关键字 @grant 进行授权
//授权
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_deleteValue//设置缓存
GM_setValue("hello", true);//获取缓存,默认值为true
GM_getValue("hello", true);//删除缓存
GM_deleteValue("hello")
2-3 缓存监听
有时候,我们需要对缓存中的某个键的值进行监听,当发生变化时,调用一个方法事件
比如,这里新增了一个监听器,对键名为 hello 的值进行监听
// 授权
// @grant GM_addValueChangeListener
// @grant GM_removeValueChangeListener// 添加一个监听器
const listener_id = GM_addValueChangeListener('hello', function(name, old_value, new_value, remote){if(hello == false){//具体的调用方法//....}
})//监听监听器
GM_removeValueChangeListener(listener_id);
2-4 打开一个标签
格式:GM_openInTab(url, options)
该 API 可用于打开一个新的标签页面
其中,第一个参数用于指定新标签页面的 URL 地址,第二个参数用于指定页面展示方式及焦点停留页面
// 授权
// @grant GM_openInTab// 打开新页面
var onpenNewTap = function (){//打开百度页面//active:true,新标签页获取页面焦点//setParent :true:新标签页面关闭后,焦点重新回到源页面newTap = GM_openInTab("https://www.baidu.com",{ active: true, setParent :true});
...
2-5 跨域请求
在授予 GM_xmlhttpRequest 权限之后,就可以跨域发送请求了
PS:第一次跨域请求时,会弹出请求对话框,需要选中允许,才能正常进行跨域请求
// 授权
// @grant GM_xmlhttpRequest...
GM_xmlhttpRequest({url:"http://www.httpbin.org/post",method:'POST',headers: {"content-type": "application/json"},data:"",onerror:function(res){console.log(res);},onload:function(res){console.log(res);}
});
...
3. 实战一下
以某一新闻网站的自动加载下一页为例进行说明
目标网站:IGh0dHBzOi8vd3d3LnBpbmd3ZXN0LmNvbS8=
首先,我们使用关键字 @match 指定匹配的网站 URL,使用 @grant 设置权限 GM_log,使用关键字@run-at 指定执行时机为页面加载完成,即:document-end
// ==UserScript==
// @name 新闻查看更多
// @namespace com.xag.more
// @version 0.1
// @license GNU General Public License v3.0
// @description 自动查看下一页
// @author xingag
// @match 目标网站
// @icon 图标icon地址
// @grant GM_log
// @run-at document-end
// ==/UserScript==
...
接着,添加一个定时任务,获取每一页底部的加载更多按钮
最后,判断元素存在时,执行点击操作即可
...
(function() {'use strict';console.log("location.hostname:",location.hostname)if(location.hostname == "www.pingwest.com"){setInterval(() => {const more_element = document.querySelector(".load-more-box").querySelector("a")if(more_element){GM_log("元素存在,点击加载更多。。。")more_element.click();}}, 2000);}
})()
...
4. 总结
本篇文章以一个简单的实例讲解了编写一个油猴脚本的完整流程
为了提升开发效率,实际编写脚本可以使用 VS Code 编译器,安装插件 Tampermonkey Snippets 后再进行用户脚本开发
当然,应对一些复杂的场景,可以借助一些优秀的脚手架框架
https://github.com/kinyaying/wokoo
https://www.npmjs.com/package/create-tampermonkey
https://github.com/qianjiachun/vue3-tampermonkey
如果你觉得文章还不错,请大家 点赞、分享、留言 下,因为这将是我持续输出更多优质文章的最强动力!
推荐阅读
JavaScript 逆向爬虫中的浏览器调试常见技巧
自动化篇 | 实现自动化抢茅台超详细过程!
干货 | 盘点 Chrome 插件开发中那些关键的点!
教你用 Python 快速获取行业板块股,辅助价值投资!
END
好文和朋友一起看~
5 分钟,教你从零快速编写一个油猴脚本!相关推荐
- 从零快速编写一个油猴脚本
Tampermonkey,又称 Greasemonkey 油猴脚本,是一款免费的浏览器扩展,可用于管理用户脚本,它本质上是对浏览器接口的二次封装 油猴脚本可用于更改页面布局样式.完成页面自动化.去广告 ...
- python批量删缩进_鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频?...
鬼畜小姐姐+野狼disco,十分钟教你如何用Python剪辑一个牛逼的抖音小视频? 前言 半个月前,后台有个小伙伴问我,如何将视频中的音频提取出来,并且将声音转成文字写入到 word 中,正好接下来的 ...
- Tampermonkey(油猴)脚本编写快速入门
目录 油猴脚本概述 脚本注释/注解 脚本权限 grant 添加新脚本 自定义网页倒计时 网页浏览离开黑屏保护 微博视频下载助手 华为云工作项列表突出展示工作项 Greasy Fork 发布脚本 油猴脚 ...
- 编写一个watchdog.sh脚本_拍摄Vlog,如何构思和编写脚本?
拍摄Vlog,如何构思和编写脚本呢? 一个完整的.好的Vlog,是由 主题+形式+时长+内容 构成. 时间不要太短,也不要过长,控制在1分钟到5分钟之内最佳,内容是Vlog最重要的组成部分,要让别人对 ...
- 【教程、无技术含量】简单的油猴脚本编写教程
不建议阅读者: 前端大神 想要深入学习(涉及到分析挖掘调用网站中js算法/自己写算法)油猴脚本的读者[备注:楼主也不会,楼主也很绝望啊...] 阅读以下内容所需知识: javascript/jQuer ...
- 自己动手编写一个在线保存百度谷歌搜索关键词历史记录的油猴脚本
标题快捷导航 如何通过Web技术实现我们的需求 需要的技术栈 油猴脚本的编写 浏览器扩展的编写 后台部分 小结 如何通过Web技术实现我们的需求 相信大家只要会一点前端和后端基础的,一看到这个标题就有 ...
- 编写你的第一个油猴脚本
油猴简介 Tampermonkey(油猴)是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Fir ...
- vue前端用服务器上路径的图片展示_5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码,启动web服务器),因此本文所要描述的 ...
- 教我如何使用python编写一个界面
要使用 Python 编写一个界面,通常需要使用 GUI 库,如 Tkinter, PyQt, wxPython 等.这些库都提供了一系列的控件(如按钮.文本框.标签等)和方法,帮助您创建和设计图形界 ...
- 【干货】教你如何通过Netty编写一个SS代理服务器
准备 本文假设读者具备以下知识: 熟悉Java网络编程(了解BIO/NIO)与多线程编程(了解JUC中的常用工具) 熟悉Netty网络编程框架 熟悉Socks5代理协议.SSL加密通信 开发环境: J ...
最新文章
- python余弦相似度文本分类_Jaccard与cosine文本相似度的异同
- SAP_SD常用增强
- win2008WEB服务器集群实践(转)
- 2018-2019-1 20165201 《信息安全系统设计基础》第9周学习总结
- WCF系列之什么是WCF
- python电脑版-python
- CentOS6.5配置网络
- 联想x3850x6重装系统,ibm x3850 x6安装系统,2015ibm服务器x3850x6
- python建模全步骤
- Android签名校验
- 卢菲菲数字编码表_学技树
- 天翼网关F452超级密码获取(亲测有效)
- 基于jQuery发展历程时间轴特效代码
- BootstrapTable中文文档
- 如何使用lerna管理你的仓库
- 显卡---显卡驱动---CUDA---Cudnn
- 5月17号软件资讯更新合集....
- 加速 SpringBoot 应用开发,官方热部署神器真带劲
- 驱动专题:第四章MTD及Flash驱动 3. nandflash 详细硬件特性
- PV-RCNN: Point-Voxel Feature Set Abstraction for 3D Object Detection(group的是关键点周围的体素,而不是周围的点)
热门文章
- Linux虚拟网络设备之bridge(桥)
- asp.net入门教程
- 营销圈带你从微博推广角度看《延禧攻略》如何完美KO《如懿传》
- 匈牙利算法(Hungarian algorithm)
- 【瑞芯微RK3188 VS 全志A31】性能向多项目对比评测
- 计算机论文中期考核报告,(硕士学位论文中期考核报告范文.doc
- MySQL数据库酒店客房管理系统(含MySQL源码) 结课作业 做的不是很好
- AJAX的使用方式及教程
- ecshop怎么写原生php,ecshop二次开发的简单实例
- 人工智能是在数学计算机科学控制论信息论,ai人工智能需要学什么 人工智能对数学有何要求...