Chrome扩展为Angular输入框赋值无按键事件不生效如何解决

问题根因 #

Angular 表单（无论是模板驱动表单还是响应式表单）的取值依赖内部维护的表单模型，直接修改 DOM 输入框的 value 属性会绕开 Angular 的表单更新逻辑和变更检测，内部模型的值不会同步更新，因此提交时会出现字段为空的情况。你之前尝试的按键事件无法生效，是因为 Angular 默认监听 input 事件来同步表单值，而非单独的 keydown/keyup/keypress 事件。

解决方法 #

你需要在修改 DOM 值后主动触发 input 事件通知 Angular 同步更新内部模型，同时修正你原有代码的异步逻辑问题：原有代码中 chrome.storage.sync.get 是异步执行的，将赋值逻辑放在外层的 setTimeout 中很可能出现还未拿到存储值就执行赋值操作的问题，直接把赋值逻辑放到存储的回调函数中即可，无需额外加延时。

修正后的注入执行函数代码如下：

function testFunction() {
  chrome.storage.sync.get(['pp'], (result) => {
    const ppa = result.pp;
    const inputEl = document.getElementById("page-input-id");
    // 给DOM输入框赋值
    inputEl.value = ppa;
    // 触发input事件，通知Angular更新内部表单模型
    inputEl.dispatchEvent(new Event('input', { bubbles: true }));
    // 若表单设置为失焦才更新值，额外触发change事件兜底
    inputEl.dispatchEvent(new Event('change', { bubbles: true }));
  });
}

特殊场景兜底 #

如果上述方案仍未生效，可在触发事件前先调用输入框的 focus() 方法聚焦，触发完事件后调用 blur() 方法失焦，适配部分自定义表单控件的监听逻辑：

inputEl.focus();
inputEl.value = ppa;
inputEl.dispatchEvent(new Event('input', { bubbles: true }));
inputEl.dispatchEvent(new Event('change', { bubbles: true }));
inputEl.blur();

内容的提问来源于stack exchange，提问作者Andrei Alexandru Pescaru