Chrome扩展填充Google Places地址表单值重置问题解决方法

核心问题在于沃尔玛结账页使用前端框架的受控组件机制管理表单状态：直接通过DOM API修改value属性只会更新DOM层的显示值，不会同步框架内部维护的状态数据，一旦页面触发重渲染（如点击其他区域导致输入框失焦、组件状态更新），框架就会用内部存储的旧值覆盖DOM上的手动修改内容，这也是之前尝试聚焦、选中、删占位符等操作无效的根本原因。

可直接复用的实现代码 #

通过调用原生input值设置器+派发完整的用户交互事件流，模拟真实用户输入行为，即可触发框架状态同步，同时适配Places API的地址联想校验逻辑：

/**
 * 适配受控组件的原生输入填充方法
 * @param {HTMLInputElement} inputEl 目标输入框元素
 * @param {string} value 要填充的内容
 */
function setControlledInputValue(inputEl, value) {
  // 调用浏览器原生value赋值方法，绕过页面对value属性的setter拦截
  const nativeValueSetter = Object.getOwnPropertyDescriptor(
    window.HTMLInputElement.prototype,
    'value'
  ).set;
  nativeValueSetter.call(inputEl, value);

  // 按真实交互顺序派发事件，触发框架状态同步
  inputEl.dispatchEvent(new Event('focus', { bubbles: true }));
  inputEl.dispatchEvent(new Event('input', { bubbles: true }));
  inputEl.dispatchEvent(new Event('change', { bubbles: true }));

  // 等待Places API地址联想列表加载完成，模拟回车选中第一个匹配项，通过地址合法性校验
  setTimeout(() => {
    const enterKeyOptions = {
      key: 'Enter',
      code: 'Enter',
      keyCode: 13,
      bubbles: true
    };
    inputEl.dispatchEvent(new KeyboardEvent('keydown', enterKeyOptions));
    inputEl.dispatchEvent(new KeyboardEvent('keyup', enterKeyOptions));
    inputEl.blur();
  }, 350);
}

// 调用示例
const addressInput = document.getElementsByName('addressLineOne')[0];
setControlledInputValue(addressInput, '12345 SouthWest 123 Drive');

适配Chrome扩展隔离上下文的补充方案 #

Chrome扩展的content script默认运行在隔离世界中，和页面自身的JS上下文不共享原型链，如果上述代码在content script中运行无效，可以通过注入行内script的方式把填充逻辑放到页面主上下文执行：

/**
 * 把代码注入到页面主上下文执行
 * @param {string} code 要执行的JS代码字符串
 */
function injectToPageContext(code) {
  const scriptEl = document.createElement('script');
  scriptEl.textContent = code;
  document.documentElement.appendChild(scriptEl);
  scriptEl.remove();
}

// 注入填充逻辑
injectToPageContext(`
  ${setControlledInputValue.toString()}
  const addressInput = document.getElementsByName('addressLineOne')[0];
  setControlledInputValue(addressInput, '12345 SouthWest 123 Drive');
`);

注意事项 #

• 延时触发回车的时间可以根据实际网络情况调整，一般300-800ms即可，确保Places API的联想结果加载完成后再触发选择，避免被地址校验逻辑判定为非法输入重置
• 不要尝试直接移除Places联想的下拉DOM，会触发沃尔玛的表单校验拦截，导致无法进入下一步结账流程
• 其他表单字段（城市、邮编、姓名等）都可以复用同一个setControlledInputValue方法填充，不需要额外适配

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