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 ¹

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 focused 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.}

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 ¹

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 focused 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.}

• javascript
• google-chrome
• google-chrome-extension
• dom-events

• It's not possible to my knowledge. – Stan Commented Dec 10, 2012 at 17:40
• @Stan: Single and double click(s) are possible to capture, you can check my answer – Sudarshan Commented Dec 11, 2012 at 11:09
• @Sudarshan, the question was about scrolling event primarily. It's not possible. – Stan Commented Dec 11, 2012 at 12:15

2 Answers 2

Single Click and Double Click can be tracked for

a) Browser Action

b) Page Action using chrome extensions.

By default chrome has an Single Mouse Click Event Listener for Browser and Page Action, by extending this you can capture double click Event too.

Demonstration for Single and Double Click event(s) for Browser Action

This sample code changes browser action icon for single and double click, the same can be extended for page action using its Listener and setter.

manifest.json

Registered browser action and background script in manifest

{
    "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);
});

Browser action\Page Action icons can be up to 19 dips (device-independent pixels) wide and high. Larger icons are resized to fit, ideally you can not scroll click or scroll on for these small images.

Let me know if you need more information

Using the Sudarshan answer I was able to adapt the code and write my answer, which looks like this:

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]");
};

And then is as easy as:

//Add Default Listener provided by chrome.api.*
chrome.browserAction.onClicked.addListener(new OnDoubleClickListener({
    onDoubleClick : function(tab) {
        alert("Double Clicked!!!");
    }
}));