第2天：油猴脚本元数据与基本结构详解

今日学习目标

1. 理解油猴脚本的元数据块(metadata block)及其作用
2. 掌握常用@指令的功能和用法
3. 学习脚本的基本结构和工作原理
4. 创建一个简单的页面修改脚本

一、元数据块详解

油猴脚本以特殊的注释块开始，称为"元数据块"，它定义了脚本的基本信息和运行规则。

基本结构

// ==UserScript==
// @name        脚本名称
// @namespace   命名空间
// @version     版本号
// @description 脚本描述
// @author      作者
// @match       匹配的URL
// @grant       需要的特殊权限
// ==/UserScript==

常用@指令说明

1. @name：脚本的名称，显示在管理界面
2. • 示例：// @name My Awesome Script
3. @namespace：防止脚本名称冲突的唯一标识
4. • 通常使用域名或作者标识
   • 示例：// @namespace https://github.com/yourname
5. @version：脚本版本号，用于更新检查
6. • 示例：// @version 1.0.2
7. @description：脚本功能的简短描述
8. • 示例：// @description Enhances the user experience on example.com
9. @author：脚本作者
10. • 示例：// @author John Doe
11. @match：指定脚本运行的URL模式（最重要指令之一）
12. • // @match https://www.example.com/*
    • // @match *://*.example.com/*
13. • 可以使用*通配符
    • 示例：
14. @exclude：排除某些URL，即使它们匹配@match
15. • 示例：// @exclude https://www.example.com/admin/*
16. @grant：声明脚本需要的特殊权限
17. • // @grant GM_setValue
    • // @grant GM_getValue
18. • 如果不需要特殊API，使用// @grant none
    • 示例：
19. @require：加载外部JS库
20. • 示例：// @require https://code.jquery.com/jquery-3.6.0.min.js
21. @icon：为脚本设置图标
22. • 示例：// @icon https://www.example.com/favicon.ico

二、脚本基本结构

油猴脚本的基本代码结构通常如下：

// ==UserScript==
// 元数据块...
// ==/UserScript==

(function() {
    'use strict';
    
    // 你的代码在这里
    
})();

为什么使用IIFE(立即调用函数表达式)？

1. 避免污染全局命名空间
2. 'use strict'启用严格模式，帮助捕获常见错误
3. 确保代码在正确的时间执行

三、动手实践

实践1：创建一个简单的页面修改器

目标：在访问百度首页时，修改搜索按钮的文字

// ==UserScript==
// @name         Baidu Button Modifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改百度搜索按钮的文字
// @author       You
// @match        https://www.baidu.com/
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    // 等待页面加载完成
    window.addEventListener('load', function() {
        // 获取搜索按钮并修改其值
        const searchButton = document.getElementById('su');
        if (searchButton) {
            searchButton.value = '点我搜索';
            console.log('按钮文字已修改');
        }
    });
})();

实践2：为多个网站添加提示

// ==UserScript==
// @name         Multi-site Notifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  在多个网站上显示欢迎信息
// @author       You
// @match        https://www.google.com/*
// @match        https://www.baidu.com/*
// @match        https://www.bing.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    const siteName = location.hostname.replace('www.', '');
    alert(`欢迎访问 ${siteName}！此页面已被油猴脚本增强`);
})();

四、调试技巧

1. 使用console.log()输出调试信息
2. 在浏览器开发者工具中查看脚本是否注入成功
3. 检查元素修改是否生效

五、常见问题解答

Q：为什么我的脚本没有运行？ A：检查以下几点：

• @match指令是否正确匹配当前URL
• 脚本是否已启用
• 是否有JavaScript错误（查看控制台）

Q：如何让脚本在多个网站上运行？ A：添加多个@match指令，每个对应一个URL模式

Q：@grant none是什么意思？ A：表示脚本不需要任何特殊权限，这是最简单的权限声明

六、今日挑战

1. 创建一个脚本，在访问你常去的网站时修改页面标题
2. 尝试为脚本添加图标（使用@icon）
3. 研究并添加@updateURL和@downloadURL指令

示例解决方案：

// ==UserScript==
// @name         Title Modifier
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  修改页面标题
// @author       You
// @match        https://www.example.com/*
// @icon         https://www.example.com/favicon.ico
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    
    document.title = "[" + new Date().toLocaleTimeString() + "] " + document.title;
})();