如何解决Tampermonkey无法修改Payoneer登录页输入框值的问题

Payoneer登录页基于React框架构建，直接通过document.getElementById("username").value = "xxx"修改DOM值的方式完全无效，核心原因是React内部独立维护了一套表单状态，直接修改DOM属性不会触发React的状态同步——React内部存储的表单值始终为空，一旦触发输入框聚焦、表单校验、提交动作，React就会用内部状态重绘DOM，把你手动赋值的内容清空。
你观察到的手动输入后新增的text-box__input--filled、text-box__input--fixed-label样式类，也是React监听到原生输入事件后才会追加的，直接改value不会触发这部分逻辑。

方案1：模拟原生用户输入事件（适配性最高，无需抓包） #

核心逻辑是还原真实用户输入的完整行为流，让React的事件系统能正常捕获输入动作、同步内部状态，和手动输入的行为特征完全一致。
首先写通用填充函数，注意必须调用HTMLInputElement原型上的原生value setter，绕过React对元素value属性的拦截：

function fillInput(element, content) {
  // 模拟用户先聚焦输入框
  element.focus();
  // 拿到原生value属性设置方法，绕过框架拦截
  const nativeValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    "value"
  ).set;
  nativeValueSetter.call(element, content);
  // 按真实输入顺序派发事件，触发React状态更新
  const triggerEvents = ["input", "change", "blur"];
  triggerEvents.forEach(evt => {
    element.dispatchEvent(new Event(evt, { bubbles: true }));
  });
  // 手动补充输入完成后的样式类，绕过前端样式层面的非空校验
  element.classList.add("text-box__input--filled", "text-box__input--fixed-label");
}

Tampermonkey脚本中不要直接在页面加载时立刻执行逻辑，Payoneer的表单是异步渲染的，需要等对应DOM节点挂载完成后再操作，推荐用MutationObserver监听节点加载：

// 替换为自己的账号信息
const ACCOUNT = {
  username: "你的Payoneer用户名",
  password: "你的Payoneer密码"
};

// 等待目标元素加载完成的工具方法
function waitEl(selector, callback) {
  const node = document.querySelector(selector);
  if (node) return callback(node);
  const observer = new MutationObserver(() => {
    const target = document.querySelector(selector);
    if (target) {
      observer.disconnect();
      callback(target);
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

// 执行填充登录流程
waitEl("#username", usernameInput => {
  fillInput(usernameInput, ACCOUNT.username);
  waitEl("#password", passwordInput => {
    fillInput(passwordInput, ACCOUNT.password);
    waitEl('button[type="submit"]', submitBtn => {
      // 加随机延时模拟真人操作间隔，避免触发风控
      const delay = 600 + Math.random() * 500;
      setTimeout(() => submitBtn.click(), delay);
    });
  });
});

注意：操作延时不要低于300ms，固定零延时操作极大概率触发Payoneer的人机验证。

方案2：走浏览器原生自动填充链路（风控识别概率最低） #

如果方案1偶尔触发风控，可以修改输入框的autocomplete属性，调用浏览器原生的密码管理器填充逻辑，这种填充方式和用户手动点击浏览器保存的密码填充行为完全一致，几乎不会被反爬系统识别。
只需要在节点加载时修改属性即可：

waitEl("#username", el => el.setAttribute("autocomplete", "username"));
waitEl("#password", el => el.setAttribute("autocomplete", "current-password"));

配合Tampermonkey的GM_setValue/GM_getValue存储账号信息，触发浏览器自动填充即可，稳定性比模拟事件更高。

方案3：直接请求登录接口（执行效率最高） #

有抓包基础的话可以直接抓Payoneer的登录接口，逆向清楚接口的CSRF参数、风控签名规则后，直接在脚本里发POST请求拿到登录态Cookie，把Cookie写入浏览器域下后直接跳转后台页面，完全绕过前端表单渲染逻辑。这个方案的缺点是接口参数、签名规则一旦更新就需要重新适配，维护成本比前两个方案高。

• 不要在document-idle状态下立刻执行填充，必须等表单节点完全挂载再操作
• 不要只给输入框赋值不派发事件，否则React状态不同步一定会清空值
• 不要用固定的极短操作间隔，很容易触发反自动化校验

内容的提问来源于stack exchange，提问作者Randy VU