简介
油猴（Tampermonkey）是一个流行的浏览器扩展，主要用于管理用户脚本。用户脚本是一种运行在网页上的小型脚本程序，可以改变网页的外观或功能。它们通常由用户自己编写或下载，并通过油猴这样的扩展在浏览器中运行。
用户脚本可以用来：
- 自定义网页的显示方式。
- 增强网页的功能，比如自动填写表单、显示额外信息等。
- 屏蔽广告或不适当的内容。
- 改进网页的用户体验。
使用油猴脚本需要先在浏览器中安装油猴扩展，然后在油猴的界面中添加或管理脚本。这些脚本通常以JavaScript语言编写，可以在网页加载时自动执行。
不过需要注意的是，使用用户脚本时也要考虑到安全性和隐私问题，确保脚本的来源可靠，避免下载和运行可能带来风险的脚本。
简单实例
油猴脚本主要是用JavaScript编写的，这里给你一个简单的脚本，它的作用是在网页的标题中添加一些额外的文字。
// ==UserScript==
// @name 网页标题增强
// @namespace http://tampermonkey.net/
// @version 0.1
// @description 尝试在网页标题中添加一些文字
// @author 你的名字
// @match *://*/*
// @grant none
// ==/UserScript==(function() {'use strict';// 获取当前网页的标题var oldTitle = document.title;// 添加一些额外的文字var newTitle = oldTitle + " - 增强版";// 设置新的网页标题document.title = newTitle;
})();
如何使用这个脚本：
- 安装油猴扩展：首先确保你的浏览器中已经安装了Tampermonkey扩展。
- 创建新脚本：在油猴扩展中点击“添加新脚本”。
- 粘贴脚本代码：将上面的代码复制并粘贴到新脚本的编辑器中。
- 保存并运行：保存脚本，并访问任意网页，你应该会看到网页标题中增加了“ - 增强版”。
脚本解析：
@name：脚本的名称。@namespace：脚本的命名空间。@version：脚本的版本号。@description：脚本的描述。@author：脚本的作者。@match：脚本需要运行的网页URL模式。@grant：脚本需要的权限。
这个脚本只是一个非常基础的示例，你可以根据需要修改它，实现更复杂的功能。
需求
电脑版微信读书，全屏看书的时候无法看到当前时间，希望在全屏页面动态显示时间，效果如下：
实现
1、单击油猴插件，添加新脚本
2、编写脚本，思路为给body添加一个显示时间的div，位置选择fix，固定到左上角
3、点击保存
代码
注意：微信读书网站的setInterval函数会失效，所以使用 requestAnimationFrame 替代 setInterval
// ==UserScript==
// @name 微信读书增强
// @namespace https://weread.qq.com/
// @version 2024-07-18
// @description try to take over the world!
// @author Fengxu
// @match https://weread.qq.com/**
// @icon https://www.google.com/s2/favicons?sz=64&domain=moonshot.cn
// @grant none
// ==/UserScript==(function() {'use strict';// 创建一个显示时间的元素var timeElement = document.createElement('div');timeElement.id = 'current-time';timeElement.style.position = 'fixed';timeElement.style.top = '0';timeElement.style.left = '0';timeElement.style.padding = '10px';timeElement.style.color = 'white';timeElement.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';timeElement.style.zIndex = '10000';// 将时间元素添加到body中document.body.appendChild(timeElement);// 更新时间的函数function updateTime() {var now = new Date();var hours = now.getHours().toString().padStart(2, '0');var minutes = now.getMinutes().toString().padStart(2, '0');var seconds = now.getSeconds().toString().padStart(2, '0');var formattedTime = `${hours}:${minutes}:${seconds}`;// 格式化时间显示timeElement.textContent = formattedTime;}// 使用 requestAnimationFrame 替代 setIntervalvar lastTime = 0;function loop(timestamp) {updateTime();lastTime = timestamp;requestAnimationFrame(loop);}requestAnimationFrame(loop);
})();
