Chrome扩展触发器Keydown JS [英] Chrome Extension Trigger Keydown JS
问题描述
我正在编写一个Chrome扩展程序，它需要能够在目标页面的文档级别触发keydown事件。目标页面有一个使用JavaScript的事件监听器，如：
document.addEventListener（keydown，function（event）{... }）;
我的manifest.json如下：
< pre $ {
manifest_version：2，
name：Title，
version：1.0，
description：Testing，
图标：{
default_icon：icon.png
}，
browser_action ：{
default_title：标题
}，
作者：James McLaughlin，
背景：{
scripts：[jquery.js，event.js]，
persistent：false
}，
permissions：[< all_urls>]
}
和我的event.js：
函数injectMethod（tab，method，callback）{
chrome.tabs.executeScript（tab.id，{file：'jquery.js'}，function（） {}）;
chrome.tabs.executeScript（tab.id，{file：'inject.js'}，function（）{
chrome.tabs.sendMessage（tab.id，{method：method}，callback） ;
}）;
function run（tab）{
injectMethod（tab，'run'，function（response）{
return true;
}）;
}
chrome.browserAction.onClicked.addListener（run）;
我的inject.js（我使用了JS注入方法之一这里，因为它似乎适用：
var inject = inject ||（function（）{
var methods = {};
methods.run = function（）{
injectScript（function（）{
var e = jQuery.Event（keydown）;
e.which = 40;
$（document）.trigger（e）;
}）;
}
函数injectScript（func）{
var actualCode ='（' + func +'）（）;';
var script = document.createElement（'script'）;
script.textContent = actualCode;
（document.body || document.documentElement） .appendChild（script）;
//script.parentNode.removeChild(script）;
}
chrome.runtime.onMessage.addListener（function（ request，sender，sendResponse）{
$（'< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< /script>').appendTo('head'）;
var data = {};
if（methods.hasOwnProperty（request.method））
data = methods [request.method]（）;
sendResponse（{data：data}）;
返回true;
}）;
返回true;
}）（）;
但是，当我推chrome扩展时，目标页面不会响应keydown事件。这让我想到，也许一个jQuery生成的事件不能触发一个纯粹的JS侦听器。为了测试这个理论，我把下面的代码放到HTML文件中并运行它：
<！DOCTYPE html>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = UTF-8/>
< title>无标题文档< / title>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>< / script>
< / head>
< body>
< script>
// listener one
document.addEventListener（keydown，function（event）{
alert（event.which）;
}）;
$ b // listener two
$（document）.on（'keydown'，function（event）{
alert（event.which）;
}）;
$ b $（document）.ready（function（e）{
var e = jQuery.Event（keydown）;
e.which = 40;
$（document）.trigger（e）;
}）;
< / script>
< / body>
< / html>
当我运行上面的html文件时，只有jQuery事件侦听器被触发。当我评论jQuery侦听器时，什么都没有发生。此外，当我注释掉了JS侦听器并且取消了JS侦听器的注释时，jQuery事件侦听器没有问题地被解雇了。
由于jQuery的keydown并没有触发纯JS在任何情况下，我试图用纯JS触发keydown：
var pressEvent = document.createEvent（'KeyboardEvent'） ;
pressEvent.initKeyEvent（'keydown'，true，true，window，true，false，false，false，65，0）;
document.dispatchEvent（pressEvent）;
但是，在initKeyEvent上生成undefined不是函数。
我也尝试了可用的建议此处
a>，此处（但那一个没有指定哪个或keyCode，这里（但又没有keyCode或哪个），如何从Chrome扩展中触发纯JS的keydown侦听器？
谢谢
试试这个（pattern）
manifest.json
background：{
scripts：[background.js]，
persistent：false
jquery-1.10-2.min-chromium -ext.js ）
//如果`jquery`不在`window`中， jquery-1.10-2.min-chromium-ext.js`
if（！ window.jQuery）{
//`jquery-1.10.2.min.js`
};
// _eof_
js（background.js）
chrome.browserAction.onClicked.addListener（function（tab）{
chrome.tabs.executeScript（null，{file：jquery-1.10.2 .min-chromium-ext.js}，function（）{
chrome.tabs.executeScript（null，{file：chromium-extension.js}）
}）;
}）;
js（chromium-extension.js）
< pre $ $（function（）{
if（window.jQuery）{
$（document）.on（keydown，function（e）{
alert（e.which）
}）
};
}）;
资源 https://developer.chrome.com/extensions/samples
https://developer.chrome.com/extensions/getstarted#unpacked
I am writing a Chrome extension which needs to be able to trigger keydown events at the document level of the target page. The target page has an event listener which uses javascript like:
document.addEventListener("keydown", function (event) {…});
My manifest.json is as follows:
{
"manifest_version": 2,
"name": "Title",
"version": "1.0",
"description": "Testing",
"icons": {
"default_icon": "icon.png"
},
"browser_action": {
"default_title": "Title"
},
"author": "James McLaughlin",
"background": {
"scripts": ["jquery.js", "event.js"],
"persistent": false
},
"permissions": ["<all_urls>"]
}
And my event.js:
function injectedMethod (tab, method, callback) {
chrome.tabs.executeScript(tab.id, {file: 'jquery.js'}, function() {});
chrome.tabs.executeScript(tab.id, {file: 'inject.js'}, function() {
chrome.tabs.sendMessage(tab.id, {method: method}, callback);
});
}
function run (tab) {
injectedMethod(tab, 'run', function (response) {
return true;
});
}
chrome.browserAction.onClicked.addListener(run);
And my inject.js (I used one of the methods of JS injection available here because it seemed applicable:
var injected = injected || (function(){
var methods = {};
methods.run = function () {
injectScript(function () {
var e = jQuery.Event("keydown");
e.which = 40;
$(document).trigger(e);
});
}
function injectScript(func) {
var actualCode = '(' + func + ')();';
var script = document.createElement('script');
script.textContent = actualCode;
(document.body||document.documentElement).appendChild(script);
//script.parentNode.removeChild(script);
}
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
$('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>').appendTo('head');
var data = {};
if (methods.hasOwnProperty(request.method))
data = methods[request.method]();
sendResponse({data:data});
return true;
});
return true;
})();
However, when I push the chrome extension, the target page does not respond to the keydown event. This got me thinking that perhaps a jQuery-generated event cannot trigger a pure JS listener. To test this theory, I put the following in an HTML file and ran it:
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<script>
//listener one
document.addEventListener("keydown", function (event) {
alert(event.which);
});
//listener two
$(document).on('keydown', function (event) {
alert(event.which);
});
$(document).ready(function(e) {
var e = jQuery.Event("keydown");
e.which = 40;
$(document).trigger(e);
});
</script>
</body>
</html>
When I ran the above html file, only the jQuery event listener was fired. When I commented out the jQuery listener, nothing happened. Furthermore, when I commented out the JS listener and uncommented the JS listener, the jQuery event listener fired without problem.
Since the jQuery keydown did not appear to fire the pure JS listener in either case, I tried to trigger the keydown with pure JS:
var pressEvent = document.createEvent ('KeyboardEvent');
pressEvent.initKeyEvent ('keydown', true, true, window, true, false, false, false, 65, 0);
document.dispatchEvent (pressEvent);
However, that generates an "undefined is not a function" on the "initKeyEvent".
I also tried the suggestion available here, here (but that one did not specify a which or keyCode, here (but again no keyCode or which),
How can I trigger a pure JS keydown listener from a Chrome extension?
Thank you
Try this (pattern)
manifest.json
"background": {
"scripts": ["background.js"],
"persistent": false
}
js (modified jquery-1.10-2.min-chromium-ext.js)
// if `jquery` not in `window`, utilize `jquery-1.10-2.min-chromium-ext.js`
if (!window.jQuery) {
// `jquery-1.10.2.min.js`
};
// _eof_
js (background.js)
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "jquery-1.10.2.min-chromium-ext.js"}, function() {
chrome.tabs.executeScript(null, {file: "chromium-extension.js"})
});
});
js (chromium-extension.js)
$(function() {
if (window.jQuery) {
$(document).on("keydown", function(e) {
alert(e.which)
})
};
});
Resources https://developer.chrome.com/extensions/samples
https://developer.chrome.com/extensions/getstarted#unpacked
这篇关于Chrome扩展触发器Keydown JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
