开发Chrome扩展填充Nike配送表单，JS赋值后点击值消失

我之前做电商自动填充工具时也碰到过一模一样的问题！像Nike这类现代网站都是用React这类前端框架构建的，直接通过document.getElementById(...).value = xxx修改DOM值的方式，其实只是改了页面上的显示内容，但框架内部的状态并没有同步更新。当你点击按钮或者页面发生重新渲染时，框架会用它自己保存的原始状态覆盖掉你修改的DOM值，这就是为什么填充的内容会消失。

核心解决方案：模拟用户输入，触发框架监听的事件 #

前端框架会监听input、change这类用户交互事件来更新内部状态，所以我们需要在设置完DOM值后，手动触发这些事件，让框架感知到值的变化。

这里给你一个封装好的工具函数，专门用来处理这类表单填充：

function fillFormField(fieldId, value) {
  const field = document.getElementById(fieldId);
  if (!field) {
    console.warn(`找不到ID为${fieldId}的表单元素`);
    return;
  }

  // 设置字段值
  field.value = value;
  
  // 触发input事件（适配文本输入框、文本域等）
  field.dispatchEvent(new Event('input', { 
    bubbles: true, 
    cancelable: true 
  }));

  // 如果是下拉选择框，额外触发change事件
  if (field.tagName === 'SELECT') {
    field.dispatchEvent(new Event('change', { 
      bubbles: true, 
      cancelable: true 
    }));
  }
}

用这个函数替换你原来的赋值代码 #

把你之前的直接赋值代码，换成调用这个函数：

fillFormField('firstName', items['home']['firstname']);
fillFormField('lastName', items['home']['lastname']);
fillFormField('address1', items['home']['addrfirst']);
fillFormField('address2', items['home']['addrsecond']);
fillFormField('city', items['home']['city']);
fillFormField('state', items['home']['state']); // 假设state是下拉框

额外注意事项 #

• 等待元素加载完成：如果Nike的表单是动态加载的（比如点击后才渲染），你需要确保在元素存在后再执行填充逻辑，可以用setInterval轮询或者MutationObserver监听元素出现。
• 特殊字段处理：如果是复选框、单选按钮这类控件，可能需要触发click事件而不是input，你可以在函数里加个判断分支。
• 避免触发反爬机制：频繁自动填充可能会触发Nike的反爬，建议在填充之间加少量延迟（比如100-200ms），模拟真实用户输入节奏。

这样处理后，框架内部的状态会和你填充的DOM值同步，点击操作后就不会再出现值消失的问题了。

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