Chrome扩展中如何使用JavaScript触发HTML文本元素的change事件？

嘿，这问题我熟！你遇到的报错是因为fireEvent是IE专属的旧API，Chrome这类现代浏览器根本不支持它，所以才会抛出TypeError。要让修改后的文本触发和手动输入一样的表单逻辑，得用标准的事件触发方式，我给你一步步讲清楚：

首先，先纠正一个小细节：如果#tmsg是输入框（input）或文本域（textarea），用value属性设置内容比innerText更准确，因为这才是表单元素存储用户输入的标准属性；如果它是contenteditable的普通元素，那innerText没问题。

然后，关键是要触发正确的事件：手动输入时，浏览器会触发input事件（实时响应输入变化），很多表单的按钮启用逻辑都是监听这个事件来更新状态；而change事件通常是在元素失去焦点时才触发，只触发它可能达不到你要的效果。

给你写一段标准的无依赖JavaScript代码：

const el2 = document.getElementById("tmsg");
// 根据元素类型选择设置方式
if (el2.tagName === 'INPUT' || el2.tagName === 'TEXTAREA') {
  el2.value = "hello world";
} else {
  el2.innerText = "hello world";
}

// 先触发input事件——模拟实时输入的行为
const inputEvent = new Event('input', { 
  bubbles: true,  // 让事件能冒泡到父元素，确保所有监听都能捕获到
  cancelable: true 
});
el2.dispatchEvent(inputEvent);

// 如果还需要模拟失去焦点时的change事件，再加这部分
const changeEvent = new Event('change', { 
  bubbles: true, 
  cancelable: true 
});
el2.dispatchEvent(changeEvent);

为什么这么做？因为现代浏览器都遵循DOM事件标准，用new Event()创建事件对象，再通过dispatchEvent()触发，这样就能模拟出和手动输入完全一致的事件流，表单的按钮启用逻辑、后续流程都会正常响应。

如果还是不行，你可以检查一下页面的事件监听，看看它到底是监听了input、change还是其他事件（比如有些旧系统可能用propertychange，但现代浏览器已经不用了），然后针对性触发对应的事件就行。

内容的提问来源于stack exchange，提问作者Ruwan Kumara Liyanage