Chrome扩展注入JS修改input值后如何触发onchange事件启用继续按钮？

核心原因 #

你之前直接通过inputBox.value = "xxx"赋值的操作，本质是直接修改DOM元素的静态属性值，不会触发页面侧的输入值变更事件流。现在绝大多数网页的校验逻辑（包括原生自定义校验、React/Vue等框架的双向绑定逻辑），都不会监听普通的属性赋值动作，只会监听浏览器在真实用户输入时派发的一系列标准事件，所以就算你赋的完全是正确值，校验逻辑根本收不到“值已经变了”的通知，自然不会执行按钮解锁的判断。
你之前手动在输入框按删除键能触发校验，本质是这个操作走完了浏览器的完整输入事件流程，把值变更的信号传到了校验逻辑里。

具体操作步骤 #

1. 绕开框架的属性拦截，用原生方法正确赋值 #

直接给value属性赋值会被多数框架的属性拦截器拦截，无法和内部维护的输入状态同步，正确的赋值方式是调用HTMLInputElement原型上原生的value setter：

// 定位目标输入框
const inputBox = document.querySelector("你的input选择器");
// 获取原生value属性的set方法
const nativeValueSetter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set;
// 给输入框赋目标值
nativeValueSetter.call(inputBox, "requiredValueToContinue");

2. 按真实用户输入的顺序，派发对应变更事件 #

赋值完成后，需要手动依次派发页面校验逻辑实际监听的标准事件，每个事件都要开启冒泡，保证事件能被上层的监听器捕获：

// 触发实时输入事件（绝大多数实时校验逻辑的核心监听事件）
inputBox.dispatchEvent(new Event("input", { bubbles: true }));
// 触发值变更事件（对应onchange监听逻辑）
inputBox.dispatchEvent(new Event("change", { bubbles: true }));
// 触发失焦事件（部分页面会把失焦作为最终校验、解锁按钮的时机）
inputBox.dispatchEvent(new Event("blur", { bubbles: true }));

特殊场景的补充处理 #

如果走完上面的步骤后按钮依然没有解锁，说明页面的校验逻辑还监听了键盘输入类事件，你可以手动模拟一次和你之前手动按删除键完全一致的键盘事件，复刻手动操作的触发路径：

// 模拟退格键的按下、抬起事件，完全匹配手动操作的触发逻辑
inputBox.dispatchEvent(new KeyboardEvent("keydown", { key: "Backspace", bubbles: true }));
inputBox.dispatchEvent(new KeyboardEvent("keyup", { key: "Backspace", bubbles: true }));

注意：所有派发的事件必须加上bubbles: true配置，否则事件只会在输入框自身触发，无法冒泡到绑定在父节点、document层级的校验监听器，等于白触发。

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