如何捕获扩展图标上触发的事件？

Question

我想为Chrome编写扩展程序，扩展程序图标上的某些鼠标操作会触发某些响应。

例如，我希望图标在点击，双击，滚动点击并在 ^1上滚动

时表现不同

如何将事件侦听器附加到扩展图标？我不介意图标必须在地址栏中还是在扩展栏中。

^{1。我实际上专注于一个事件，“正在滚动” - 因为这是唯一可以在没有窗口聚焦的情况下触发的事件。但我认为更普遍的问题更好。}

Answer 1

可以跟踪单击和双击

a）Browser Action

b）Page Action使用Chrome扩展程序。

默认情况下，chrome为Browser和Page操作提供了单一鼠标点击事件监听器，通过扩展此功能，您也可以捕获双击事件。

演示针对浏览器操作的单击和双击事件

此示例代码changes browser action icon用于单击和双击，page action使用Listener和setter可以扩展{{3}}。

的的manifest.json 的

清单中注册的浏览器操作和后台脚本

{
    "name": "Mouse Clicks",
    "version": "0.0.1",
    "manifest_version": 2,
    "description": "This demonstrates how mouse clicks are tracked",
    "background":{
        "scripts":["background.js"]
    },
    "browser_action":{
        "default_icon":"normal.png"
    }

}

的 background.js 的

//Set click to false at beginning
var alreadyClicked = false;
//Declare a timer variable
var timer;

//Add Default Listener provided by chrome.api.*
chrome.browserAction.onClicked.addListener(function (tab) {
    //Check for previous click
    if (alreadyClicked) {
        //Yes, Previous Click Detected

        //Clear timer already set in earlier Click
        clearTimeout(timer);
        console.log("Double click");

        //Change Icon
        chrome.browserAction.setIcon({
            "path": "double.png"
        }, function () {
            console.log("Changed Icon for Double Click");
        });

        //Clear all Clicks
        alreadyClicked = false;
        return;
    }

    //Set Click to  true
    alreadyClicked = true;

    //Add a timer to detect next click to a sample of 250
    timer = setTimeout(function () {
        //No more clicks so, this is a single click
        console.log("Single click");

        //Chane Icon
        chrome.browserAction.setIcon({
            "path": "single.gif"
        }, function () {
            console.log("Changed Icon for Single Click");
        });

        //Clear all timers
        clearTimeout(timer);

        //Ignore clicks
        alreadyClicked = false;
    }, 250);
});

浏览器操作\页面操作图标的宽度和高度最多可达19个凹陷（与设备无关的像素）。较大的图标会调整大小以适应，理想情况下，您无法scroll click或scroll on这些小图片。

如果您需要更多信息，请告诉我