Detecting shift/command click on Chrome browser action button

Question

Is it possible to detect a shift-click or command-click on a browser action button in the chrome bar?

For example, the following code does not work:

chrome.browserAction.onClicked.addListener(function(e) {
    console.log(e.shiftKey) // is undefined
});

Answer 1

I've found a way to accomplish this. In my case, I needed to detect a ctrl-click and a ctrl-alt-click event on the toolbar icon.

Apparently the background script cannot capture keyboard events, but the content script can. So I set an event listener in the content script to listen for ctrl and alt keypresses and send a message to the background script. As it happens, the keydown event has boolean properties for ctrlKey and altKey built in so I did't have to implicitly check the value of the keypress. In your case, can use the shiftKey property.

content.js

window.addEventListener('keydown',function(event){
    if(event.ctrlKey){
        chrome.runtime.sendMessage({type: 'ctrlPressed'}, function(){});
    }
    if(event.altKey){
        chrome.runtime.sendMessage({type: 'altPressed'}, function(){});
    }       
});

window.addEventListener('keyup',function(event){
    chrome.runtime.sendMessage({type: 'keyup'}, function(){});  
});

background.js

var ctrlPressed = false;
var altPressed = false;
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
    switch(request.type){
        case 'ctrlPressed':
            ctrlPressed = true;
            break;
        case 'altPressed':
            altPressed = true;
            break;
        case 'keyup':
            ctrlPressed = false;
            altPressed = false;
            break;
    }
}); 

Now my chrome.browserAction.onClicked.addListener can detect a click, double-click, ctrl-click, and ctrl-alt-click. (With just a little more code I could also detect ctrl-double-click and ctrl-alt-double-click.) The only caveat is that the active tab must have focus to capture keypresses. The window.focus() line at the end of the routine should handle that.

background.js

// Listen for toolbar icon clicks
var clickCnt = 0;
chrome.browserAction.onClicked.addListener(function(tab){
    clickCnt++; 
    if(clickCnt > 1){       
        console.log('Double click detected');
        clickCnt = 0;
        clearTimeout(timer);
    }else{                          
        if(ctrlPressed){
            if(altPressed){
                console.log('ctrl-alt-click detected');
            }else{
                console.log('ctrl-click detected');
            }
        }
        timer = setTimeout(function(){  
            console.log('Single click detected');
            clickCnt = 0;
        }, 250);
    }
    window.focus()
});

Answer 2

No, it's not provided by the API. You can't detect modifiers, or different mouse buttons.

Chrome API events are not DOM events, looking for e parameter won't help. Each event has its own list of parameters passed to the callback; look it up in the documentation.

In case of the browserAction.onClicked:

The callback parameter should be a function that looks like this:

function(tabs.Tab tab) {...};

tabs.Tab tab

So the only information you get is the current tab at the time the button was clicked.