Chrome扩展中的JavaScript-创建按键事件

我在写一个小的Chrome扩展时遇到了一个问题。基本上，问题是我需要在输入字段中模拟一个keydown事件，以便目标站点可以用它的侦听器接收它

为了找到监听器，我为所有键盘事件设置了一个事件监听器断点，然后在输入字段中键入。有3个断点，我必须通过，所有键盘->按键事件。以下是他们的基本信息：

Arguments: Arguments[1]
E: KeyboardEvent
This: input#header-search.form-control

Arguments: Arguments[1]
E: KeyboardEvent
This: document

Arguments: Arguments[1]
E: KeyboardEvent
This: Window

---

我尝试过使用keyboardevents，但运气不佳，也许我只是没有正确地使用它们（在Chrome中很难找到keyboardevents的文档），或者可能我需要走另一条路。任何帮助都将不胜感激，谢谢

您需要在扩展所使用的网页上下文中触发事件。这是对我有用的

在网页中插入jQuery

我正在使用这个jQuery扩展： 也将其注入到web页面中

在注入脚本之前，我将使用jQuery重命名所有$事件，原因是不与网页脚本产生冲突

您可以使用以下模式注入脚本（还有其他注入js的方法）：

在扩展的内容脚本中添加以下函数

function injectJQuery() {
  var s = document.createElement('script');
  s.textContent = '(' + function() {
    //paste jQuery plugin here 
  } + ')()';
}

function injectJQuerySimulate() {
  var s = document.createElement('script');
  s.textContent = '(' + function() {
    //paste jQuery simulate plugin here 
  } + ')()';
}

然后使用相同的模式进行注入模拟扩展

function injectJQuery() {
  var s = document.createElement('script');
  s.textContent = '(' + function() {
    //paste jQuery plugin here 
  } + ')()';
}

function injectJQuerySimulate() {
  var s = document.createElement('script');
  s.textContent = '(' + function() {
    //paste jQuery simulate plugin here 
  } + ')()';
}

当扩展的内容脚本运行时，调用这两个函数一次，以便将脚本注入网页

现在，您可以使用以下功能将带有jQuery simulate插件的keydown事件发送到网页：

function sendKeydown(elemId, keyCode) {
  var s = document.createElement('script');
  s.textContent = '(' + function(elemId, keyCode) {
    jQuery(elemId).simulate('keydown', {
      keyCode: keyCode
    });
  } + ')("' + elemId + '", "' + keyCode + '");';
  (document.head || document.documentElement).appendChild(s);
  s.parentNode.removeChild(s);
}

示例用法：

sendKeydown('#SomeElementId', 37); //37 is the keyCode for left arrow key

ASCII键代码的参考表：