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注入的一种方法here，因为它似乎适用：

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

但是，当我按下chrome扩展名时，目标页面不会响应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);

但是，生成＆＃34; undefined不是函数＆＃34;在＆＃34; initKeyEvent＆＃34;。

我还尝试了可用的建议here，here（但是没有指定哪个或keyCode，here（但同样没有keyCode或者哪个），

如何从Chrome扩展程序触发纯JS keydown侦听器？

谢谢

Answer 1

试试这个（模式）

的manifest.json

  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }

js（已修改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)
        })       
      };        
    });

资源https://developer.chrome.com/extensions/samples

https://developer.chrome.com/extensions/getstarted#unpacked

Chrome扩展触发器Keydown JS

1 个答案: