检测 shift/command 单击 Chrome 浏览器操作按钮

Question

是否可以检测 chrome 栏中的浏览器操作按钮上的 shift 键单击或 command 键单击？

例如，以下代码不起作用：

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

Answer 1

不，API 不提供。您无法检测修改器或不同的鼠标按钮。

Chrome API 事件不是 DOM 事件，查找 e 参数无济于事。每个事件都有自己的传递给回调的参数列表；在文档中查找。

在 browserAction.onClicked 的情况下：

The callback parameter should be a function that looks like this:
function(tabs.Tab tab) {...};
tabs.Tab tab

因此您获得的唯一信息是单击按钮时的当前选项卡。

Answer 2

我找到了实现此目的的方法。就我而言，我需要检测工具栏图标上的 ctrl-click 和 ctrl-alt-click 事件。

显然后台脚本无法捕获键盘事件，但内容脚本可以。所以我在内容脚本中设置了一个事件侦听器来侦听 ctrl 和 alt 按键并向后台脚本发送消息。碰巧的是，keydown 事件内置了 ctrlKey 和 altKey 的布尔属性，因此我不必隐式检查按键的值。在你的情况下，可以使用 shiftKey 属性.

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

现在我的 chrome.browserAction.onClicked.addListener 可以检测 click、double-click、ctrl-click 和 ctrl-alt-click。（只需多一点代码，我还可以检测到 ctrl-double-click 和 ctrl-alt-double-click。）唯一需要注意的是，活动选项卡必须具有焦点才能捕获按键。例程末尾的 window.focus() 行应该处理该问题。

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()
});

检测 shift/command 单击 Chrome 浏览器操作按钮

Detecting shift/command click on Chrome browser action button

google-chrome-extension