javascript Chrome擴展觸發器Keydown JS
0
Answers
javascript jquery google-chrome-extension
我正在編寫一個Chrome擴展,它需要能夠在目標頁面的文檔級觸發keydown事件。 目標頁面有一個使用JavaScript的事件監聽器,如下所示:
document.addEventListener("keydown", function (event) {…});
我的manifest.json如下:
{
"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>"]
}
和我的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);
而我的inject.js(我使用了JS注入方法之一,因為它似乎適用:
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;
})();
但是,當我推鉻擴展,目標頁面不響應keydown事件。 這讓我想,也許一個jQuery生成的事件不能觸發一個純粹的JS偵聽器。 為了測試這個理論,我把以下內容放在一個HTML文件中並運行它:
<!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>
當我運行上面的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不是函數”。
我也嘗試了這裡提供的建議,但是這裡沒有指定哪個或者keyCode, 在這裡 (但是沒有keyCode或者哪個)
如何從Chrome擴展中觸發一個純JS的keydown監聽器?
謝謝
0 votes
javascript