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

标签：脚本 box 浏览器使用网页 GM 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(`
    /* 选择了所有 <pre> 和 <code> 元素，并设置它们的 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)");
 	 });
})();