Chrome 扩展中的 JavaScript - 创建 Keydown 事件答案

【问题标题】：JavaScript in Chrome Extension - Creating Keydown EventChrome 扩展中的 JavaScript - 创建 Keydown 事件
【发布时间】：2015-08-18 17:22:23
【问题描述】：

我正在编写一个小型 Chrome 扩展程序时遇到问题。基本上问题是我需要在输入字段中模拟一个 keydown 事件，以便目标站点将其监听器拾取。

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

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

我尝试过使用键盘事件，但没有成功，也许我没有正确完成它们（在 Chrome 中很难找到键盘事件的文档），或者我需要走另一条路。任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： javascript events keypress

【解决方案1】：

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

在网页中注入 jQuery。
我正在使用这个 jQuery 扩展：https://github.com/jquery/jquery-simulate 也将其注入网页中。
在注入脚本之前，我将使用 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 
  } + ')()';
}

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

现在您可以使用以下函数将带有 jQuery 模拟插件的 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 键码参考表：http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

【讨论】：