Google chrome extension 检测shift/command点击Chrome浏览器操作按钮

是否可以在chrome工具栏中的浏览器操作按钮上检测到shift键单击或命令单击

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

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

---

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

ChromeAPI事件不是DOM事件，查找

e

参数没有帮助。每个事件都有自己传递给回调的参数列表；在文档中查找它

在下列情况下：

回调参数应该是如下所示的函数：

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

选项卡

---

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

我找到了一种方法来实现这一点。在我的例子中，我需要检测工具栏图标上的

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

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

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

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

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

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

现在，我的

chrome.browserAction.onClicked.addListener

可以检测到

单击

，

双击

，

ctrl单击

，以及

ctrl-alt单击

。（只需多一点代码，我就可以检测到

ctrl双击

和

ctrl-alt双击

）唯一需要注意的是，活动选项卡必须具有焦点才能捕获按键。例程末尾的

window.focus（）

行应该可以处理这个问题

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

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

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

---

提交特征请求。谢谢@布拉德，我不认为你是第一个，我认为有一个和我一样的复制版本。是的，我只发现了一个相关的bug。我确实记得它存在——但它不是bug的焦点。你看到我指出了一条评论，我相信我已经找到了一个方法。请看，这是一种有趣的方法，但它需要在当前打开的选项卡中插入内容脚本，而且单击是在该选项卡处于焦点时发生的（否则，修改器信息可能会过时）。即使在

处注入它，也不能总是保证这一点。但我的回答“API不提供这些信息”仍然有效。