Chrome扩展实现ChatGPT文本框模拟按键输入及发送功能求助

ChatGPT的输入框是基于React实现的组件，直接修改DOM的value属性不会触发组件内部的状态更新，这就是你设置值后发送按钮依然禁用的核心原因。直接移除按钮的disabled属性也没用，因为React内部的状态逻辑依然判定按钮应该处于禁用状态。

你之前模拟按键事件失败，是因为普通的keypress/keydown事件没被React的合成事件系统正确捕获，而且没有触发React监听的input事件——这才是React感知输入框内容变化的关键事件。

可行的解决方案 #

修改输入框值后，手动触发input事件同步React状态：

// 获取输入框元素
const textarea = document.getElementById('prompt-textarea');
// 先聚焦输入框，确保状态上下文正确
textarea.focus();
// 设置要发送的内容
textarea.value = '你的消息内容';
// 触发input事件，让React感知到内容变化
textarea.dispatchEvent(new Event('input', { bubbles: true }));

// 此时发送按钮应已启用，获取并点击按钮
const sendButton = document.querySelector('button[data-testid="send-button"]');
if (sendButton) {
  sendButton.click();
}

关键说明 #

• Event('input', { bubbles: true })：必须设置bubbles: true，因为React的事件监听是通过父元素事件委托实现的，冒泡事件才能被正确捕获。
• 使用data-testid选择发送按钮比依赖类名更稳定，类名可能随ChatGPT的UI更新而变化。

内容的提问来源于stack exchange，提问作者maťo