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

crazy_rays

已于 2024-04-19 15:26:34 修改

阅读量6.6k

点赞数 28

CC 4.0 BY-SA版权

分类专栏：脚本语言文章标签： jquery chrome javascript 前端框架

于 2022-09-28 14:58:17 首次发布

本文链接：https://blog.youkuaiyun.com/crazy_rays/article/details/127087784

脚本语言专栏收录该内容

2 篇文章

订阅专栏

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

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

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

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

可以从github去下载最新的release（kiwi browser官方下载地址：https://github.com/kiwibrowser/src.next/releases）
同时，我也上传到了优快云的下载资源里，下载地址是：https://download.youkuaiyun.com/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插件菜单栏，在下拉列表中点击“获取新脚本”，如下图：

Tampermonkey插件菜单栏

0202. 脚本社区

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

在这里插入图片描述

0203. GreasyFork社区

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

GreasyFork

0204. 搜索

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

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

在这里插入图片描述

0205. 插件详情

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

插件详情

03. 编写新脚本

0301. 脚本头部声明

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

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

0302. 插件菜单栏

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

Tampermonkey插件菜单栏

0303. 在线脚本IDE

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

在线脚本IDE

0304. 使油猴脚本支持jquery

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

使油猴脚本支持jquery

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");
    }
})();