[javascript] Chrome擴展觸發器Keydown JS

Question

[javascript] Chrome擴展觸發器Keydown JS

Answers

Question

我正在編寫一個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監聽器？

謝謝

[javascript] Chrome擴展觸發器Keydown JS

Share

Related

Tags