油猴脚本入门（微信读书显示当前时间）

简介

油猴（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;
})();

如何使用这个脚本：

1. 安装油猴扩展：首先确保你的浏览器中已经安装了Tampermonkey扩展。
2. 创建新脚本：在油猴扩展中点击“添加新脚本”。
3. 粘贴脚本代码：将上面的代码复制并粘贴到新脚本的编辑器中。
4. 保存并运行：保存脚本，并访问任意网页，你应该会看到网页标题中增加了“ - 增强版”。

脚本解析：

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