I'm creating an extension that will allow users to use chrome-like tab switching on Vivaldi browser.

In my background.js I have tried

addEventListener("keydown", function(e) {
    console.log(e.code); // never gets here
})

I originally had the event being handled by a content.js script, however this required any new tabs to be pletely loaded before I could send messages to the background.js script

function Listener()
{
    this.stage = 0;
    this.listen();
}

Listener.prototype.listen = function()
{
    addEventListener("keydown", this.handleKeyDown);
    addEventListener("keyup", this.handleKeyUp);
}

Listener.prototype.handleKeyDown = function(event)
{
    for(var i = 0; i < 9; i++) {
        if(event.ctrlKey) {
            if(event.code == "Digit" + (i + 1)) {
                chrome.runtime.sendMessage({
                    greeting: i
                }, function(response) {
                    console.log(response);
                })
            }
        }
    }
}
new Listener();

I want to move this functionality to my background.js so that it runs independently of browser actions.

I'm creating an extension that will allow users to use chrome-like tab switching on Vivaldi browser.

In my background.js I have tried

addEventListener("keydown", function(e) {
    console.log(e.code); // never gets here
})

I originally had the event being handled by a content.js script, however this required any new tabs to be pletely loaded before I could send messages to the background.js script

function Listener()
{
    this.stage = 0;
    this.listen();
}

Listener.prototype.listen = function()
{
    addEventListener("keydown", this.handleKeyDown);
    addEventListener("keyup", this.handleKeyUp);
}

Listener.prototype.handleKeyDown = function(event)
{
    for(var i = 0; i < 9; i++) {
        if(event.ctrlKey) {
            if(event.code == "Digit" + (i + 1)) {
                chrome.runtime.sendMessage({
                    greeting: i
                }, function(response) {
                    console.log(response);
                })
            }
        }
    }
}
new Listener();

I want to move this functionality to my background.js so that it runs independently of browser actions.

• javascript
• google-chrome
• google-chrome-extension

• Only content script has access to DOM related even happening on current web page, what do you mean "this required any new tabs to be pletely loaded before I could send messages to the background.js script“ ? When do you want your script to be executed? – Haibara Ai Commented Apr 20, 2016 at 9:49
• I want my script to be executed regardless of what tabs are loaded @HaibaraAi - it's a tab switcher, so if I open a new tab I want to be able to use a key bination to switch back to tab one with, for example ctrl + 1, which I can do but I simply have to wait for the new tab to load first. – Jack hardcastle Commented Apr 20, 2016 at 10:02
• then I believe @Xan is right, chrome.mands is for that purpose, though many limitation like all key binations must include Ctrl or Alt, .... – Haibara Ai Commented Apr 20, 2016 at 10:10

1 Answer 1

DOM keyboard event listeners capture only keystrokes that happen when the focus is within the page.

A background page cannot be shown, and as such, cannot be focused. It will never receive any input events.

You may want to look into chrome.mands API, but it is fairly restrictive. For a good reason: you really, really don't want extensions to be able to just harvest all keystrokes.

You could partially bypass the restrictions by using a (valid) mand to invoke your extension, which would open its popup, which in turn can capture further events with DOM listeners.