木木脚本浏览器 JS 脚本自动化功能详解
本篇深入它的核心：脚本引擎——它支持什么 API、坐标系统怎么算、脚本怎么写怎么装，最后用一个完整的实战脚本把所有知识点串起来。
一、先说结论：你的油猴脚本，大概率能直接跑
木木脚本浏览器完整实现了 Greasemonkey 风格的脚本规范。一个标准用户脚本（xxx.user.js）由元数据头和代码主体组成：
// ==UserScript==
// @name 我的第一个脚本
// @namespace mumudroid.demo
// @version 1.0
// @description 在页面右上角加一个悬浮按钮
// @author yourname
// @match https://www.example.com/*
// @run-at document-end
// ==/UserScript==
(function () {
'use strict';
GM_addStyle('.demo-btn { position: fixed; top: 40px; right: 10px; z-index: 99999; }');
var btn = GM_addElement('button', { class: 'demo-btn', textContent: '点我' });
btn.addEventListener('click', function () {
GM_toast('按钮被点击了');
});
})();
支持的元数据
| 字段 | 作用 |
|---|---|
@match |
URL 匹配规则，命中才会注入脚本；支持多条 |
@run-at |
注入时机：document-start / document-body / document-end / document-idle |
@require |
引入第三方 JS 库（如 jQuery），每行一个 URL |
@resource |
预加载资源，脚本内用 GM_getResourceText / GM_getResourceURL 取用 |
@name / @version / @author / @description |
脚本信息，展示在脚本管理列表中 |
支持的 GM API
经典风格（Greasemonkey 1/2/3）与 GM.* 风格（Greasemonkey 4）均支持：
| API | 作用 |
|---|---|
GM_getValue / GM_setValue / GM_deleteValue / GM_listValues |
脚本私有键值存储（按脚本隔离，持久化在本地） |
GM_xmlhttpRequest |
跨域网络请求（不受浏览器同源策略限制） |
GM_addStyle |
注入 CSS |
GM_addElement |
向页面添加元素 |
GM_getResourceText / GM_getResourceURL |
读取 @resource 预载资源 |
GM_log |
输出日志到控制台 |
GM_info |
脚本自身信息（名称、版本等） |
GM_registerMenuCommand / GM_unregisterMenuCommand |
注册菜单命令 |
也就是说，网上大量公开的 PC 端油猴脚本（去广告、破解复制限制、页面美化、网盘直链……）复制过来基本就能用。
二、重点：原生自动化 API（六件套）
标准油猴 API 只能"改网页"。木木脚本浏览器在这之上扩展了六个原生函数，让脚本可以操作整个屏幕——这是它和其它移动端脚本浏览器最大的区别。
2.1 GM_toast(text) —— 弹 Toast
GM_toast('签到完成');
2.2 GM_click(x, y) —— 模拟屏幕点击
GM_click(0.5, 0.5); // 推荐写法：点击屏幕正中心（归一化坐标）
GM_click(540, 960); // 已知屏幕为 1080x1920 时，也支持像素坐标
2.3 GM_swipe(x1, y1, x2, y2) —— 模拟滑动手势
GM_swipe(0.5, 0.7, 0.5, 0.3); // 从屏幕 70% 高度处向上滑到 30% 处（模拟上滑翻页）
2.4 GM_getImage(left, top, width, height, quality) —— 屏幕截图
var base64img = GM_getImage(0, 0, 1, 0.5, 75); // 截取屏幕上半部分，质量 75，返回 Base64
配合 GM_xmlhttpRequest 把截图上传到第三方 OCR / 图像识别接口，可以实现完全自定义的视觉识别方案。
2.5 GM_findOcrText(left, top, width, height, callback) —— 屏幕 OCR
识别指定区域的文字，异步返回每段文字的内容和屏幕坐标：
GM_findOcrText(0.5, 0.5, 0.5, 0.5, function (data) {
// data 是数组，每个元素形如：
// { left, top, width, height: 文本区域左上角与宽高,
// x, y: 文本中心点坐标, text: 识别出的文字 }
});
2.6 GM_findColor(color, offset, x_step, y_step, left, top, width, height, callback) —— 屏幕找色
在指定区域内按步进扫描，找到第一个匹配的颜色点：
GM_findColor('#ffffff', 5, 3, 3, 0, 0, 1, 1, function (data) {
// 找到时 data 形如 { x: 色值x坐标, y: 色值y坐标 }
});
| 参数 | 说明 |
|---|---|
color |
目标颜色，如 '#ff5722' |
offset |
允许的颜色误差范围（RGB 各通道） |
x_step / y_step |
扫描步进像素，越大越快但越可能漏检 |
left, top, width, height |
搜索区域（归一化或像素均可） |
找色适合识别没有文字的图标、色块、开关状态——比 OCR 更快更轻。
三、坐标系统：归一化优先
所有原生 API 的坐标参数都支持两种写法：
| 写法 | 范围 | 说明 |
|---|---|---|
| 归一化坐标（推荐） | 0.0 ~ 1.0 |
屏幕宽高的比例，0.5 即正中心。换设备、换分辨率脚本照样能用 |
| 像素坐标 | > 1 |
绝对像素值，适合从 OCR / 找色结果直接回传的场景 |
坐标系原点在屏幕左上角，x 向右、y 向下。
一个重要技巧：GM_findOcrText / GM_findColor 返回的就是屏幕像素坐标，可以直接传给 GM_click / GM_swipe，不需要换算。这就形成了"看到 → 点到"的闭环：
GM_findOcrText(0, 0, 1, 1, function (data) {
for (var i = 0; i < data.length; i++) {
if (data[i].text.indexOf('签到') >= 0) {
GM_click(data[i].x, data[i].y); // OCR 结果坐标直接点击
break;
}
}
});
四、脚本从哪来：三种创建方式
打开「脚本」页 → 「创建脚本」，有三种入口：
1. 通过引导创建（零基础友好）
向导式表单：填脚本名称、版本、作者、描述，配置 URL 匹配规则（每行一条，如 https://www.example.com/*），需要的话填引入的第三方 JS 库，最后粘贴代码——APP 自动生成规范的脚本头，帮你避开元数据格式坑。
2. 导入脚本
把 .user.js 文件或代码文本直接导入，APP 解析元数据后入库。适合从网上下载的现成脚本、或在 PC 上写好传到手机的脚本。
3. 脚本仓库（一行代码都不用写）
内置第三方脚本市场，浏览 → 点击安装 → 完成。仓库脚本全部开源免费，也是学习脚本写法的最佳范本：安装后可以在脚本管理里查看和编辑它的源码。
脚本创建后随时可以在「脚本管理」中编辑（内置代码编辑器）、启用/停用、删除，登录账号后还能「备份脚本」到云端，换机时从「我的备份脚本」一键恢复。
五、注入模式：兼容模式 与 暴力模式
脚本注入由浏览器网络层拦截完成，针对不同网站提供两种策略（菜单 → 脚本注入）：
- 兼容模式（默认）：拦截请求并重写注入，不改页面结构，兼容性好。
- 暴力模式：改写 HTML 强制注入。当某些站点兼容模式注入无效（脚本不生效）时尝试，注意它可能改变页面内容结构。
调试脚本时还可以配合菜单里的控制台（查看 console.log / GM_log 输出）和源代码（查看实际注入后的页面源码）定位问题。
六、实战：自动签到脚本
需求：每天打开某网站时，自动识别页面上的"签到"按钮并点击，完成后弹提示。
// ==UserScript==
// @name 每日自动签到
// @namespace mumudroid.demo.signin
// @version 1.0
// @description 打开页面后自动寻找"签到"按钮并点击
// @match https://www.example.com/*
// @run-at document-idle
// ==/UserScript==
(function () {
'use strict';
// 当天已签到则跳过（用 GM 存储做本地去重）
var today = new Date().toISOString().slice(0, 10);
if (GM_getValue('last_signin_' + location.host, '') === today) {
return;
}
// 全屏 OCR，找"签到"字样
GM_findOcrText(0, 0, 1, 1, function (data) {
for (var i = 0; i < data.length; i++) {
var item = data[i];
if (item.text.indexOf('签到') >= 0) {
GM_click(item.x, item.y); // 识别到就点
GM_setValue('last_signin_' + location.host, today);
GM_toast('今日已自动签到');
return;
}
}
// 第一屏没找到，向上滑动翻页后再试一次
GM_swipe(0.5, 0.7, 0.5, 0.3);
setTimeout(function () {
GM_findOcrText(0, 0, 1, 1, function (data2) {
for (var j = 0; j < data2.length; j++) {
if (data2[j].text.indexOf('签到') >= 0) {
GM_click(data2[j].x, data2[j].y);
GM_setValue('last_signin_' + location.host, today);
GM_toast('今日已自动签到');
return;
}
}
});
}, 800);
});
})();
这个 50 行的脚本用到了：元数据头、@match 命中、GM_getValue/GM_setValue 状态记忆、GM_findOcrText 屏幕识别、GM_click 模拟点击、GM_swipe 模拟滑动、GM_toast 结果反馈。每一行都是标准 JavaScript，会写 JS 就会写自动化。
提示：OCR / 找色 / 点击操作的是"屏幕"，所以它们天然不依赖网页 DOM 结构——哪怕是 Canvas 渲染的游戏页面、WebApp、H5 活动页，只要人眼能看到，脚本就能识别和操作。
小结
- 标准油猴 API（1/2/3 + 4 双风格）→ PC 脚本生态直接复用，改网页没问题
- 原生六件套（点击/滑动/截图/OCR/找色/Toast）→ 操作整个屏幕，自动化没问题
- 归一化坐标优先，OCR/找色结果可直接回传点击，形成识别-操作闭环
- 引导创建 / 导入 / 脚本仓库三种入口，零基础也能起步
APP 脚本仓库中有开源免费脚本可以参考学习；遇到问题或想提需求，欢迎通过 APP 内"用户反馈"联系我们。
