Chrome Extension Trigger Keydown JS

Question

我正在编写一个Chrome扩展程序，该扩展程序必须能够在目标页面的文档级别触发按键事件。 目标页面有一个使用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;
})();

但是，当我按入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);

但是，这会在“ initKeyEvent”上生成“未定义的不是函数”。

我也试过建议可在这里，在这里（但一个没有指定哪个或键代码，在这里（但再无键代码或）

如何从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 Extension Trigger Keydown JS

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-04-13 20:32:07

Chrome Extension Trigger Keydown JS

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-04-13 20:32:07

解决方案1
2 已采纳 2014-04-13 20:32:07