Chrome扩展程序中的JavaScript - 创建Keydown事件 [英] JavaScript in Chrome Extension - Creating Keydown Event

问题描述

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

要找到我设置的监听器所有键盘事件的事件侦听器断点，然后键入输入字段。有3个断点，我不得不通过，所有键盘 - >键下来事件。以下是他们的基本信息：

 参数：参数[1] 
 E：KeyboardEvent 
 This：输入＃header-search.form-control 
 
参数：参数[1] 
 E：KeyboardEvent 
 This：document 
 
参数：参数[1 ] 
 E：KeyboardEvent 
这样：窗口
  

我已经尝试使用keyboardevents没有运气，也许我没有正确地做到这一点（在Chrome中很难找到keyboardevent的文档），或者也许我需要去另一条路线。任何帮助将不胜感激，谢谢！

解决方案

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

1. 在网页中注入jQuery


2. 使用这个jQuery扩展名： https://github.com/jquery/jquery-simulate
   / b>
   
3. 在注入脚本之前，我将使用jQuery重命名所有$的事件，原因是不会与网页脚本产生冲突。

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

  function injectJQuery（）{
 var s =使用document.createElement（ '脚本'）; 
 s.textContent ='（'+ function（）{
 //粘贴jQuery插件这里
} +'）（）'; 
} 
  

然后注入模拟扩展名的相同模式

  function injectJQuerySimulate（）{
 var s = document.createElement（'script'）; 
 s.textContent ='（'+ function（）{
 //粘贴jQuery模拟插件
} +'）（）'; 
} 
  

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

现在，您可以使用以下功能将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是左箭头键的keyCode 
  

ASCII键代码的参考表： http://www.cambiaresearch.com/articles/15/javascript-char-代码键代码

I'm running into an issue with a small Chrome extension that I'm writing. Basically the issue is that I need to simulate a keydown event in an input field so that the targeted site will pick it up with its listener.

To find the listeners I set an Event Listener Breakpoint for all Keyboard events then typed into the input field. There were 3 breakpoints that I had to step through, all for Keyboard->keydown events. Here's the basic info for them:

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

I have tried using keyboardevents with no luck, perhaps I just haven't done them correctly (it's hard finding documentation for keyboardevents in Chrome) or maybe I need to go another route. Any help would be greatly appreciated, thanks!

解决方案

You need to fire the events in the context of the web page your extension works with. Here is what works for me.

1. Inject jQuery in the web page.
2. I'm using this jQuery extension: https://github.com/jquery/jquery-simulate Inject this in the web page as well.
3. Before injecting the scripts I am renaming all $ occurrences with jQuery the reason being not to create conflicts with the web page scripts.

You can inject the scripts using the following pattern (there are other ways of injecting js):

Add the following function in the content script of your extension

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

Then same pattern for injecting simulate extension

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

When your extension's content script runs call this two functions once in order to inject the scripts in the web page.

Now you can send keydown events with the jQuery simulate plugin to the web page using the following function:

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);
}

Example use:

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

Reference table for the ASCII key codes: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

这篇关于Chrome扩展程序中的JavaScript - 创建Keydown事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！