使用jquery编写第一个油猴(tempermonkey)脚本
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. 油猴插件下载地址
安装成功后可以看到浏览器多了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 class
var 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 id
var 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。
发布成功后如下图: