使用jquery编写第一个油猴（tempermonkey）脚本

01. 下载安装油猴浏览器插件
- 0101. 关于浏览器的特别说明
- 0102. 油猴插件下载地址
02. 获取新脚本
- 0201. 油猴菜单栏
- 0202. 脚本社区
- 0203. GreasyFork社区
- 0204. 搜索
- 0205. 插件详情
03. 编写新脚本
- 0301. 脚本头部声明
- 0302. 插件菜单栏
- 0303. 在线脚本IDE
- 0304. 使油猴脚本支持jquery
- 0305. 完整测试代码：
- 0306. 调试代码
04. 脚本发布
- 0401. 登录greasyfork社区
- 0402. 代码
- 0403. 检查声明 & 发布

01. 下载安装油猴浏览器插件

0101. 关于浏览器的特别说明

使用chrome内核内核的浏览器理论上都可以安装google的浏览器插件，但是目前手机版的chrome并未开放该功能。

所以我本人是安装了kiwi browser移动浏览器（chrome内核），为的是，我可以为我经常在手机上访问的网站开发一些脚本，为其增加功能，或者修改为我喜欢的样式（比如，去掉一些无法手动关闭的恶意广告）。

可以从github去下载最新的release（kiwi browser官方下载地址：https://github.com/kiwibrowser/src.next/releases）
同时，我也上传到了CSDN的下载资源里，下载地址是：https://download.csdn.net/download/crazy_rays/86620455

0102. 油猴插件下载地址

说明	下载地址	备注
百度网盘下载	https://pan.baidu.com/s/1SqwHjKuBQOdORpJ1KXPO4w?pwd=5hdn	提取码：5hdn
google商店在线安装	https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo	需要能够访问google
google商店离线下载	https://clients2.google.com/service/update2/crx?response=redirect&os=win&arch=x64&os_arch=x86_64&nacl_arch=x86-64&prod=chromecrx&prodchannel=&prodversion=77.0.3865.90&lang=zh-CN&acceptformat=crx2,crx3&x=id%3Ddhdgffkkebhmkfjojejmpbldmpobfkfo%26installsource%3Dondemand%26uc	需要能够访问google，下载后使用chrome浏览器安装

安装成功后可以看到浏览器多了Tampermonkey插件，如下图：

02. 获取新脚本

开始编写自己的脚本之前，先认识一下Tampermonkey的常用脚本发布网站。

0201. 油猴菜单栏

浏览器插件栏点开Tampermonkey插件菜单栏，在下拉列表中点击“获取新脚本”，如下图：

0202. 脚本社区

此时会弹出油猴官方页面，其中提供了几个常用的脚本社区，可以在该页面看到“GreasyFork”社区的相关说明，如下图：

0203. GreasyFork社区

点击链接“GreasyFork”，打开新网页进入该社区，如下图：

0204. 搜索

可以在搜索栏中搜索想要使用脚本的网站，例如tmall.com，搜索结果如下图：

或者你可以按照作者进行搜索，如下图：

0205. 插件详情

点击任意搜索结果可以进入插件详情页面，可以在该页面安装插件、查看其源代码、查看其版本变更记录等，如下图：

03. 编写新脚本

0301. 脚本头部声明

油猴脚本中，头部的一些声明其含义见表格如下：

属性	描述
@name	名称；也就是你给脚本起的名
@namespace	命名空间；可以写你网站的域名
@version	版本；脚本肯定要不断更新的不是
@description	描述；你写的脚本是干什么的
@author	作者；开发者的姓名
@match	匹配；描述脚本会在哪些网站上运行，可以使用 * 通配符代表匹配所有子路径，如 https:///代表匹配所有使用https协议的网站都可以使用本脚本
@grant	权限；用于添加GM_ 函数到白名单
@require	需要导入的外部依赖，此url地址需要维护在油猴官方的白名单地址中方可正确导入并使用

0302. 插件菜单栏

浏览器插件栏点开Tampermonkey插件菜单栏，在下拉列表中点击“添加新脚本”，如下图：

0303. 在线脚本IDE

弹出新页面，是在线脚本IDE，其中// Your code here...注释下面即可编写自己的代码，如下图：

0304. 使油猴脚本支持jquery

需要使用@require声明，并且添加代码this.$ = this.jQuery = jQuery.noConflict(true);防止依赖冲突，如下图：

0305. 完整测试代码：

// ==UserScript==
// @name         tampermonkey demonstration
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.baidu.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=tampermonkey.net
// @grant        none
// @require      https://code.jquery.com/jquery-2.1.4.min.js
// ==/UserScript==
this.$ = this.jQuery = jQuery.noConflict(true);(function() {'use strict';// Your code here...// delete elements by classvar underSearchboxTips = $(".under-searchbox-tips");if (null !== underSearchboxTips &&typeof(underSearchboxTips) !== "undefined" &&underSearchboxTips.length > 0){for(var i=0; i<underSearchboxTips.length; i++){underSearchboxTips[i].remove();}}// delete elements by idvar hotsearchWrapper = $("#s-hotsearch-wrapper");if (null !== hotsearchWrapper &&typeof(hotsearchWrapper) !== "undefined"){hotsearchWrapper.remove();console.log("delete elements by id:s-hotsearch-wrapper finished");}var hotsearchData = $("#hotsearch_data");if (null !== hotsearchData &&typeof(hotsearchData) !== "undefined"){hotsearchData.remove();console.log("delete elements by id:hotsearch_data finished");}
})();

0306. 调试代码

可以按F12打开浏览器的开发调试功能，在Elements页签中可以查看DOM元素，选中元素，可以在Properties页签中查看该元素的属性，见下图：

在Resouse页签中的左侧栏目列表中可以找到Tampermonkey插件下所有的脚本，在Resource页签中可以对脚本进行断点调试，见下图：

也可以在代码中使用日志打印的方式辅助调试，见下图：

脚本成功运行后，删除了“百度热搜”栏目，运行结果如下图：

04. 脚本发布

0401. 登录greasyfork社区

注册并登录greasyfork社区，进入个人中心，可以看到发布脚本的链接，如下图：

0402. 代码

点击发布脚本，将代码复制粘贴过来，并填写说明，如下图：

0403. 检查声明 & 发布

发布脚本前，检查并确定以下声明是否还需要修改：
// @name，用以确定你的脚本名称。
// @description，其后的内容为你对该脚本的描述。
// @license，用以指名对应的许可，我声明的是MIT。

发布成功后如下图：

【使用jquery编写第一个油猴（tempermonkey）脚本】相关推荐

编写你的第一个油猴脚本
油猴简介 Tampermonkey(油猴)是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome, Microsoft Edge, Safari, Opera Next, 和 Fir ...
我的第一个油猴脚本--微博超话自动签到
简介用户脚本是一段代码,它们能够优化您的网页浏览体验.安装之后,有些脚本能为网站添加新的功能,有些能使网站的界面更加易用,有些则能隐藏网站上烦人的部分内容.其中常见的有油猴插件.ChromeExt ...
我的第一个油猴脚本「屏蔽CSDN底下的登录栏」
CSDN博客不登录就弹这么个东西,挡住视线不胜其烦,你问我为啥不登录?登录过呀,关了浏览器又要重新登,csdn的session不保存的吗(emmmm我也不太懂这方面的东西(´Д`) 于是我就想,在每次 ...
[网盘工具/百度网盘]秒传链接的使用 -2022版油猴网页脚本
注:此项技术仅针对百度网盘有效软件要求:Chrome或Firefox等支持tampermonkey.Violentmonkey的浏览器. 1.什么是秒传链接? 度盘秒传链接(标准提取码)由128位( ...
Chrome油猴(Tampermonkey)脚本使用及常用脚本分享
在我们使用浏览器的时候总是抱怨他的功能不够强大,缺少这个缺少那个,那么好,浏览器支持的一强大的功能-----扩展,也就是我们常说的插件,在这里我要介绍的是一款特别好用的插件,用来管理用户的脚本,也可以 ...
这几个油猴工具脚本，帮助你的浏览器更加的高效
很多人在使用浏览器的时候,都会使用油猴脚本这个插件,油猴插件算得上是一个插件中的插件,因为油猴插件中可以安装各种"神奇"的脚本,这些脚本可以帮助在上网冲浪的过程中拥有更佳的浏览体验 ...
手机如何安装GreasyFork油猴js脚本？
文章目录前言一.狐猴浏览器(安卓)(谷歌微软插件) 二.Iceraven浏览器(火狐)(安卓) 三.Via浏览器(安卓) 四.alook浏览器(苹果)(安卓) 五.kiwi浏览器(安卓) 哪里找到 ...
用 GreaseMonkey （油猴）解码 TinyURL
阿甘说,TinyURL 就像一盒巧克力,你永远不知道会得到什么,虽然 TinyURL 很流行,在 Twitter 一类的微博客以及 IM 系统中无处不在,但这种被缩短的 URL 地址显得很不透明,为了 ...
js弹幕脚本(基于油猴)
js弹幕脚本(基于油猴) 该脚本包含往视频上插入弹幕,发射弹幕,弹幕查询,弹幕暂停,脏话过滤等基础功能.话不多说 ,直接上代码. 仅供参考 ,该代码是我给别人写的定制化的,复制后不可用. // ==U ...

【使用jquery编写第一个油猴（tempermonkey）脚本】