简介
油猴(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 替代 setInterval
var lastTime = 0;
function loop(timestamp) {
updateTime();
lastTime = timestamp;
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
})();