如何使用Tampermonkey开发并使用一个浏览器脚本

准备工作

简介

Tampermonkey 是一款强大的浏览器扩展,它允许您定制网页的行为,改变和优化网页的展示方式或者功能以满足个人需求。通过编写自定义脚本,您可以实现许多有趣的功能,从自动化任务到改进网页界面,一切尽在掌握。

脚本一般指用户脚本(User Script),他是一段 Javascript 代码,它们能够优化您的网页浏览体验。

安装

首先,确保您已安装了 Tampermonkey 扩展。

油猴官方下载地址:http://www.tampermonkey.net/

油猴脚本网站:https://greasyfork.org/zh-CN/scripts

油猴支持的浏览器有 Chrome, Microsoft Edge, Safari, Opera Next, Firefox,和 UC 浏览器等等,各大主流浏览器几乎都支持了。

脚本编写和使用

新建脚本

点击 Tampermonkey 图标,然后选择 "添加新脚本"。

这将打开一个编辑器,您可以在其中编写脚本代码。

跳转到编写代码界面:

常见用户脚本标题

属性名

作用

name

油猴脚本的名字

namespace

命名空间,用来区分相同名称的脚本,一般写成作者名字或者网址就可以了

version

脚本的版本号

icon

可以指定脚本的图标,显示在脚本管理器中

description

描述,用来告诉用户这个脚本是干什么用的

author

作者名字

match

这是一个数组,包含了脚本要运行的网页地址。可以使用通配符和正则表达式

exclude

与match属性相反,指定脚本不应运行的网页地址

grant

用于指定脚本需要的特定浏览器权限,如GM_addStyle、GM_xmlhttpRequest等

require

如果脚本依赖其他js库的话,可以使用require指令,在运行脚本之前先加载其他库,常见用法是加载jquery

resource

用于定义脚本所需的外部资源,如CSS文件、图片等

connect

当用户使用GM_xmlhttpRequest请求远程数据的时候,需要使用connect指定允许访问的域名,支持域名、子域名、IP地址以及*通配符

常见API介绍

Tampermonkey 提供了一系列常用的 API,使您能够与页面交互和修改其行为。以下是一些常见的 Tampermonkey API:

权限名

功能

GM_setValue(name,defaultValue),GM_getValue(name,value)

用于在浏览器中存储和获取用户脚本的数据。这可以用于保存设置或其他信息。

GM_xmlhttpRequest(details)

允许用户脚本进行XMLHttpRequest请求,以便与远程服务器进行通信,获取数据等。

GM_setClipboard(data, info)

用于将文本复制到剪贴板,使用户脚本可以方便地与剪贴板交互。

GM_log(message)

用于在控制台中输出调试信息,方便脚本调试,可以使用F12开发者工具查看。

GM_addStyle(css)

像网页中添加自定义css,修改网页外观。

GM_notification(details, ondone), GM_notification(text, title, image, onclick)

设置网页通知,请参考文档获取用法。

GM_openInTab(url, loadInBackground)

允许在新标签页中打开指定的URL。

GM_registerMenuCommand(name, callback, options_or_accessKey)

允许用户脚本在浏览器中向用户脚本的菜单中添加一个新条目,并指定在选择菜单项时要调用的函数。

详情请查看油猴脚本文档。

实现CSDN 免登录复制

为了更好地理解脚本的工作原理,我们以一个实际示例来说明如何编写一个脚本。下面是一个用于允许用户在 CSDN 网站上免登录复制代码的脚本示例:

// ==UserScript==

// @name CSDN 免登录复制

// @version 1.0

// @icon https://blog.csdn.net/favicon.ico

// @description CSDN 免登录复制,净化页面

// @match *://*.csdn.net/*

// @grant GM_addStyle

// ==/UserScript==

(function () {

"use strict";

// 添加样式以隐藏特定元素

GM_addStyle(`

/* 选择了所有

 元素,并设置它们的 user-select 属性为 auto

// 这个规则的效果是允许用户可以复制这些元素中的文本内容*/

pre,

code {

user-select: auto !important;

}

/* 这一部分选择了一系列元素,并将它们的 display 属性设置为 none !important。

这个规则的效果是隐藏了页面上这些元素,以实现页面去除广告的目的。*/

#blogExtensionBox,

.hide-article-box,

.insert-baidu-box,

.signin,

.wwads-horizontal,

.wwads-vertical,

.blog-top-banner,

.blog_container_aside,

.programmer1Box,

.recommend-box,

.recommend-nps-box,

.template-box,

.hide-preCode-box {

display: none !important;

}

/* 将页面主要内容区域的宽度设置为100% */

main {

width: 100% !important;

}

/* 这个规则的效果是将页面中的某些元素的高度设置为自动,为了确保这些元素的内容可以根据需要进行展开。*/

#article_content,

main div.blog-content-box pre.set-code-hide {

height: auto !important;

}

`);

// 移除登录限制类名

let buttons = document.querySelectorAll(".hljs-button");

buttons.forEach(button => {

button.classList.remove("signin");

button.setAttribute("data-title", "免登录复制");

});

// 添加点击事件以防止剪贴板劫持

let codeElements = document.querySelectorAll("code");

codeElements.forEach(code => {

code.setAttribute("onclick", "mdcp.copyCode(event)");

});

})();

脚本注入页面前

脚本注入页面前,页面可能会有一些限制,如复制受限,脚本的注入使您能够绕过这些限制。

登录前

click绑定拦截了复制方法,复制按钮绑定了signin类限制访问

登录后

注入脚本

脚本注入页面后

发布脚本

上传脚本

油猴脚本支持好几个网站,其中目前最主流的是GreasyFork,登录这个网站注册一个账号,然后进入用户页面选择发布你编写的脚本,然后填写脚本代码和各项信息。

https://greasyfork.org/zh-CN/users

``

这样脚本就可以提交上去了,其他人也可以搜索到并安装脚本了。