Chrome extension keydown listener in background.js

Question

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 completely 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.

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 completely loaded before I could send messages to the background.js script“ ? When do you want your script to be executed? — Haibara Ai
– 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 combination 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
– Jack hardcastle, Commented Apr 20, 2016 at 10:02
then I believe @Xan is right, chrome.commands is for that purpose, though many limitation like all key combinations must include Ctrl or Alt, .... — Haibara Ai
– Haibara Ai, Commented Apr 20, 2016 at 10:10

Xan · Accepted Answer · 2016-04-20 10:24:03Z

5

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.commands 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) command to invoke your extension, which would open its popup, which in turn can capture further events with DOM listeners.

edited Apr 20, 2016 at 10:24

answered Apr 20, 2016 at 10:02

Xan

77.9k18 gold badges198 silver badges219 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jack hardcastle Over a year ago

I understand this - however, relying on the DOM events requires the new tab to be loaded before I can switch back to another tab; For example: You open a new tab (ctrl + t) - the content.js script kicks in and starts listening for requests when you load a web-page, but in that time ctrl + 1/2/3/4.. won't be picked up by the listener to switch to those respective tabs. @Xan

Xan Over a year ago

That's because the whole "trying to collect keystrokes by content scripts" is a hack when semantically you want them to work anywhere in the browser. It won't work reliably, period. You do have a tool - chrome.commands - for browser-wide shortcuts but it has limitations you'll have to live with.

Xan Over a year ago

Note that I have a detailed answer on what kind of shortcuts are allowed: stackoverflow.com/a/28410213/934239 For instance, you can't override Chrome's existing shortcuts.

Collectives™ on Stack Overflow

Chrome extension keydown listener in background.js

1 Answer 1

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Linked

Related