1. Tampermonkey脚本与自定义UI元素
Tampermonkey作为一款强大的浏览器扩展，允许用户通过JavaScript脚本修改网页功能。在许多场景下，我们需要为脚本添加自定义的用户界面（UI）元素，例如复选框，以便用户能够轻松地控制脚本的行为。
以下代码片段展示了如何在网页的右下角创建一个浮动面板，并在其中添加一个名为“Pumping Energy”的复选框。这个复选框将作为我们控制游戏玩家移动的开关。
// ==UserScript==
// @name Erz Online Energy Pump
// @namespace https://app.erz.online/
// @version 1
// @description Adds a panel to the lower right corner of the screen on https://app.erz.online/ with a checkbox labeled 'pumping energy' that activates pressing the 'A' and 'D' keys to move in the game.
// @match https://app.erz.online/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建浮动面板
const panel = document.createElement('div');
panel.style.position = 'fixed';
panel.style.bottom = '100px';
panel.style.right = '0';
panel.style.width = '200px';
panel.style.height = '100px';
panel.style.backgroundColor = '#262626';
panel.style.borderRadius = '5px';
panel.style.padding = '10px';
panel.style.boxShadow = '2px 2px 5px rgba(0, 0, 0, 0.3)';
panel.style.zIndex = '1000'; // 确保面板在最上层
// 创建复选框
const checkbox1 = document.createElement('input');
checkbox1.type = 'checkbox';
checkbox1.id = 'pumping-energy';
checkbox1.style.marginRight = '10px';
// 创建标签
const label1 = document.createElement('label');
label1.htmlFor = 'pumping-energy';
label1.style.color = "#ffffff";
label1.innerText = 'Pumping Energy';
// 将复选框和标签添加到面板
panel.appendChild(checkbox1);
panel.appendChild(label1);
// 将面板添加到页面body
document.body.appendChild(panel);
// 后续我们将在这里添加复选框的事件监听器和键盘模拟逻辑
// ...
})();2. 核心挑战：模拟键盘事件
在网页环境中模拟键盘事件，尤其是为了与游戏或复杂应用交互时，常常会遇到一些挑战。直接使用 new KeyboardEvent() 和 dispatchEvent() 方法可能无法达到预期效果，原因有以下几点：
- keyCode 的弃用: 原始的 KeyboardEvent 构造函数中使用 keyCode 属性来指定按键，但这个属性已经被弃用。现代浏览器推荐使用 key 和 code 属性来更准确地描述按键。key 表示按键的字符值（如 'a', 'Enter'），而 code 表示按键的物理位置（如 'KeyA', 'NumpadEnter'）。
- 事件目标的选择: 将键盘事件分派到哪个DOM元素至关重要。虽然游戏可能在 canvas 元素上渲染，但它通常通过监听 document 或 window 对象来捕获全局键盘输入。将事件分派到错误的元素可能导致游戏无法识别。
- 事件属性的完整性: KeyboardEvent 构造函数需要传入一个选项对象，其中包含 bubbles（事件是否冒泡）和 cancelable（事件是否可取消）等属性。将它们设置为 true 可以确保事件的行为更接近真实的用户输入。
- keydown 和 keyup 的配对: 真实的按键操作包括按下 (keydown) 和释放 (keyup) 两个过程。许多游戏引擎会根据这两个事件来判断按键状态和执行相应动作。仅仅分派 keydown 事件可能不足以触发持续的动作或正确的状态转换。
3. 构建可靠的键盘事件模拟函数
为了解决上述挑战，我们需要一个更健壮的 simulateKeyPress 函数。这个函数应该能够：
- 使用 key 和 code 属性。
- 确保事件可冒泡和可取消。
- 同时分派 keydown 和 keyup 事件，模拟完整的按键过程。
- 允许指定事件分派的目标元素。
// 优化后的键盘事件模拟函数
function simulateKeyPress(targetElement, keyName, codeName) {
// 构造keydown事件
const downEvent = new KeyboardEvent('keydown', {
key: keyName,
code: codeName,
bubbles: true, // 允许事件冒泡
cancelable: true, // 允许事件可取消
// 其他可选属性，如 metaKey, ctrlKey, altKey, shiftKey 等
});
// 构造keyup事件
const upEvent = new KeyboardEvent('keyup', {
key: keyName,
code: codeName,
bubbles: true,
cancelable: true,
});
console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keydown 事件: ${keyName}`);
targetElement.dispatchEvent(downEvent);
// 模拟按键持续时间，然后分派keyup事件
// 对于某些游戏，可能需要更长的延迟或持续的 keydown 循环
setTimeout(() => {
console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keyup 事件: ${keyName}`);
targetElement.dispatchEvent(upEvent);
}, 50); // 短暂延迟50毫秒，模拟按键持续时间
}在上述函数中，我们选择了 document 作为 targetElement 的默认推荐值，因为它通常是捕获全局键盘事件最可靠的目标。对于字母 'A'，其 key 为 'a'，code 为 'KeyA'。
4. 集成到复选框事件监听器
现在，我们将这个可靠的键盘事件模拟函数集成到复选框的 change 事件监听器中。当复选框被选中时，我们将调用 simulateKeyPress 来模拟 'A' 键的按下。
// ... (接上一节的UI创建代码)
// 为复选框添加事件监听器
checkbox1.addEventListener('change', function() {
if (this.checked) {
console.log("Pumping Energy: ON");
// 当复选框被选中时，模拟 'A' 键的按下
// 将事件分派到 document 对象，通常比 canvas 更可靠
simulateKeyPress(document, 'a', 'KeyA');
} else {
console.log("Pumping Energy: OFF");
// 如果需要停止持续移动，这里可能需要清除定时器或其他逻辑
}
});
// ... (simulateKeyPress 函数)关于事件监听器的选择： 原始代码使用 checkbox1.addEventListener('change', ...)，这是一种直接且有效的方式，因为 checkbox1 是一个已知且可直接引用的DOM元素。虽然也可以使用事件委托（例如 document.addEventListener('change', function(event) { if (event.target.id === 'pumping-energy') { ... } })），但在这种特定场景下，直接监听元素本身通常更简洁和高效。
5. 完整Tampermonkey脚本示例
将所有部分整合起来，形成一个完整的Tampermonkey脚本，用于在 erz.online 网站上添加一个控制玩家移动的复选框：
// ==UserScript==
// @name Erz Online Energy Pump
// @namespace https://app.erz.online/
// @version 1
// @description Adds a panel to the lower right corner of the screen on https://app.erz.online/ with a checkbox labeled 'pumping energy' that activates pressing the 'A' and 'D' keys to move in the game.
// @match https://app.erz.online/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 1. 创建并添加自定义UI面板和复选框
const panel = document.createElement('div');
panel.style.position = 'fixed';
panel.style.bottom = '100px';
panel.style.right = '0';
panel.style.width = '200px';
panel.style.height = '100px';
panel.style.backgroundColor = '#262626';
panel.style.borderRadius = '5px';
panel.style.padding = '10px';
panel.style.boxShadow = '2px 2px 5px rgba(0, 0, 0, 0.3)';
panel.style.zIndex = '1000';
const checkbox1 = document.createElement('input');
checkbox1.type = 'checkbox';
checkbox1.id = 'pumping-energy';
checkbox1.style.marginRight = '10px';
const label1 = document.createElement('label');
label1.htmlFor = 'pumping-energy';
label1.style.color = "#ffffff";
label1.innerText = 'Pumping Energy';
panel.appendChild(checkbox1);
panel.appendChild(label1);
document.body.appendChild(panel);
// 2. 定义可靠的键盘事件模拟函数
function simulateKeyPress(targetElement, keyName, codeName) {
const downEvent = new KeyboardEvent('keydown', {
key: keyName,
code: codeName,
bubbles: true,
cancelable: true,
});
const upEvent = new KeyboardEvent('keyup', {
key: keyName,
code: codeName,
bubbles: true,
cancelable: true,
});
console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keydown 事件: ${keyName}`);
targetElement.dispatchEvent(downEvent);
setTimeout(() => {
console.log(`在 ${targetElement === document ? 'document' : 'canvas'} 上分派 keyup 事件: ${keyName}`);
targetElement.dispatchEvent(upEvent);
}, 50);
}
// 3. 为复选框添加事件监听器，触发键盘模拟
checkbox1.addEventListener('change', function() {
if (this.checked) {
console.log("Pumping Energy: ON");
// 假设 'A' 键用于向左移动
simulateKeyPress(document, 'a', 'KeyA');
// 如果需要模拟 'D' 键，可以再调用一次
// simulateKeyPress(document, 'd', 'KeyD');
} else {
console.log("Pumping Energy: OFF");
// 如果有持续按键逻辑，这里需要停止
}
});
})();6. 注意事项与最佳实践
- 事件目标优先级: 优先尝试将键盘事件分派到 document 或 window 对象。如果这不起作用，再尝试游戏渲染的 canvas 元素，但这通常不太可靠。
- 持续按键模拟: 如果游戏需要按住某个键才能持续移动，仅仅触发一次 keydown 和 keyup 可能不够。在这种情况下，你需要使用 setInterval 在复选框选中时重复触发 keydown 事件，并在复选框取消选中时清除 setInterval 并触发 keyup。
- 游戏引擎兼容性: 不同的游戏引擎（如Unity、Phaser、Babylon.js等）可能有自己独特的输入处理机制。有些引擎可能不会监听标准的DOM键盘事件，而是使用自定义的事件或直接从浏览器API读取按
