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

Question

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

例如,我希望图标在单击,双击,滚动单击和滚动¹时的行为不同

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

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

Answer 1

可以跟踪单击和双击

a)浏览器操作

b)使用chrome扩展的页面操作.

默认情况下,chrome有一个用于浏览器和页面操作的单一鼠标单击事件监听器,通过扩展它,您也可以捕获双击事件.

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

此示例代码更改浏览器操作图标以进行单击和双击,同样可以使用其Listener和setter扩展页面操作.

的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为这些小图像.

如果您需要更多信息,请与我们联系