3

I want to write an extension for Chrome where, certain mouse actions on the extension icon trigger certain responses.

For example, I want the icon to behave differently when it's clicked, double clicked, scroll clicked, and scrolled on 1

How can I attach event listeners to the extension icon? I don't mind if the icon has to be in the address bar or in the extensions bar.

1. I actually am focussed on one event, "being scrolled on"--because this is the only even that can be triggered without having the window in focus. But I decided that a more general question is better.

4

2 回答 2

5

可以跟踪单击和双击

a)浏览器动作

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

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

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

此示例代码更改了单击和双击的浏览器操作图标，同样可以使用其Listener和setter扩展页面操作。

清单.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"
    }

}

背景.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这些小图像。

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

于 2012-12-11T11:08:13.670 回答
2

使用 Sudarshan 的答案，我能够修改代码并编写我的答案，如下所示：

var OnDoubleClickListener = function(config){
    // Max time between click events occurrence;
    var CONTROL_TIME = 250;

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

    if(config && config.onDoubleClick instanceof Function)
    return function(tab) {

        //Check for previous click
        if (alreadyClicked) {
            //Yes, Previous Click Detected

            //Clear timer already set in earlier Click
            clearTimeout(timer);

            //Clear all Clicks
            alreadyClicked = false;


            return config.onDoubleClick.apply(config.onDoubleClick,[tab]);
        }

        //Set Click to  true
        alreadyClicked = true;

        //Add a timer to detect next click to a sample of 250
        timer = setTimeout(function () {
            //Clear all timers
            clearTimeout(timer);
            //Ignore clicks
            alreadyClicked = false;
        }, CONTROL_TIME);
    };
    throw new Error("[InvalidArgumentException]");
};

然后很简单：

//Add Default Listener provided by chrome.api.*
chrome.browserAction.onClicked.addListener(new OnDoubleClickListener({
    onDoubleClick : function(tab) {
        alert("Double Clicked!!!");
    }
}));
于 2015-09-11T04:33:32.733 回答