JavaScript开发Web扩展如何模拟原生键盘输入填充输入框文本

手动通过new KeyboardEvent()创建并派发的合成事件，属于DOM层面的模拟事件，不具备浏览器原生输入的底层行为能力：

• 这类事件只能触发页面上通过addEventListener绑定的对应事件回调，比如YouTube播放页绑定的空格键暂停/播放逻辑，所以能实现播放控制
• 出于安全和一致性考虑，合成键盘事件不会直接修改<input>、<textarea>这类输入控件的实际值，也不会触发输入控件内置的文本渲染、前端框架（React/Vue等）的内部状态同步，自然无法实现文本填充效果。

以下方案均在Firefox扩展内容脚本环境下测试通过，可正常填充YouTube搜索框： #

方案1：直接赋值+触发标准事件流（最稳定，优先用） #

YouTube这类现代前端框架渲染的站点，只需要在设置输入框值之后，按真实输入的事件流顺序派发冒泡事件，就能让框架识别到值的变化，实现填充效果。
示例代码：

// 定位YouTube搜索框，多选择器兼容页面结构变动
const searchInput = document.querySelector('ytd-searchbox input#search, input[name="search_query"]');
if (!searchInput) return;

const targetKeyword = "需要填充的搜索词汇";

// 聚焦输入框
searchInput.focus();
// 设置输入框值
searchInput.value = targetKeyword;
// 按顺序派发冒泡事件，同步框架状态
searchInput.dispatchEvent(new Event('input', { bubbles: true }));
searchInput.dispatchEvent(new Event('change', { bubbles: true }));

填充完成后如果需要自动触发搜索，直接找到搜索按钮派发click事件，或者给搜索框所在表单派发submit事件即可，不需要额外模拟回车。

方案2：execCommand插入文本（反检测能力最强） #

如果遇到站点做了反自动化校验，拦截了直接赋值value的行为，可以用浏览器原生的文本插入命令，行为和用户真实手打输入完全一致，会自动触发所有原生输入事件，绕过绝大多数检测。
示例代码：

const searchInput = document.querySelector('ytd-searchbox input#search, input[name="search_query"]');
if (!searchInput) return;

const targetKeyword = "需要填充的搜索词汇";
searchInput.focus();
// 全选输入框原有内容，实现替换效果
searchInput.select();
// 调用原生插入文本命令
document.execCommand('insertText', false, targetKeyword);

注：该API虽然在Web规范中被标记为废弃，但目前所有主流浏览器（包括Firefox）均保持兼容，做扩展开发可放心使用。

方案3：逐字模拟输入（适配特殊交互需求） #

如果需要模拟用户逐字打字的效果（比如部分站点绑定了逐字输入的联想逻辑），可以基于方案2加延迟逐字插入，同时派发keydown/keyup/keypress事件做行为伪装即可。
示例代码：

const searchInput = document.querySelector('ytd-searchbox input#search, input[name="search_query"]');
if (!searchInput) return;

const targetKeyword = "需要填充的搜索词汇";
searchInput.focus();
searchInput.select();
document.execCommand('delete', false, null); // 清空原有内容

let index = 0;
const typeInterval = setInterval(() => {
  if (index >= targetKeyword.length) {
    clearInterval(typeInterval);
    searchInput.dispatchEvent(new Event('change', { bubbles: true }));
    return;
  }
  const char = targetKeyword[index];
  // 派发键盘按下事件做伪装
  searchInput.dispatchEvent(new KeyboardEvent('keydown', { key: char, bubbles: true }));
  // 插入单字
  document.execCommand('insertText', false, char);
  // 派发键盘抬起事件做伪装
  searchInput.dispatchEvent(new KeyboardEvent('keyup', { key: char, bubbles: true }));
  index++;
}, 100); // 每个字间隔100ms，可自行调整速度

• 所有派发的事件必须加bubbles: true配置，YouTube的事件监听大多绑定在输入框的父级容器上，事件不冒泡会导致监听无法触发
• 上述代码需要运行在YouTube页面对应的内容脚本（Content Script）上下文，不要在后台脚本（Background Script）中直接操作DOM，后台脚本无法访问页面DOM环境
• 不要尝试只派发键盘事件实现输入，所有现代浏览器都对合成事件做了安全限制，这类方案不可能生效

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