Skip to content

Instantly share code, notes, and snippets.

@SathyaBhat
Created March 30, 2011 07:36
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save SathyaBhat/894012 to your computer and use it in GitHub Desktop.
Save SathyaBhat/894012 to your computer and use it in GitHub Desktop.
Chrome extensions keyboard shortcut handler
/*
Right here's the thing - for keyPress events to be run, you'll have to make use of
content scripts. Content scripts handle things at webpage & DOM level. You'll have
to do changes to your manifest:
*/
------------------------
manifest.json:
------------------------
/*
Note: don't replace manifest.json, add the relevant changes else
toolbar icon won't work.
*/
{
"name": "blah",
"version": "0.1",
"description": "blah",
"background_page": "bg.html", // change to your background page
"permissions": ["http://*/*", "tabs"], //need permission to access all pages & tabs
"content_scripts": [
{
"matches": ["http://*/*", "https://*/*"], // run for http & https pages
"js": ["key_event.js"], // key_event.js is injected to the page, this handles key press
"run_at": "document_start" // run before everything else, else there will be conflicts at pages which accept keyboard inputs ( eg:google search)
}
]
}
------------------------
key_event.js
------------------------
if (window == top) {
window.addEventListener('keyup', doKeyPress, false); //add the keyboard handler
}
trigger_key = 71; // g key
function doKeyPress(e){
if (e.shiftKey && e.keyCode == trigger_key){ // if e.shiftKey is not provided then script will run at all instances of typing "G"
//alert('Hi!')
}
}
------------------------
/*
Now to make things complicated, content scripts are sandboxed and cannot do things
like URL redirection. So, we'll have to use Chrome's message passing API.
*/
------------------------
bg.html
------------------------
//add this to handle message passing
chrome.extension.onRequest.addListener(function(request, sender) {
chrome.tabs.update(sender.tab.id, {url: request.redirect});
});
/*
consequently, you'll have to change things at key_event.js to pass the message
*/
--------------------------------
key_event.js
--------------------------------
if (window == top) {
window.addEventListener('keyup', doKeyPress, false); //add the keyboard handler
}
trigger_key = 71; // g key
function doKeyPress(e){
if (e.shiftKey && e.keyCode == trigger_key){ // if e.shiftKey is not provided then script will run at all instances of typing "G"
chrome.extension.sendRequest({redirect: newurl}); //build newurl as per viewtext URL generated earlier.
}
}
----------------
/*
To summarize:
Add content script reference to your manifest. If webpage pattern matches
"content_scripts": "matches" pattern, key_event.js will be injected to each page.
key_event will check if shift+g is pressed and will send a message via sendRequest().
The background page will intercept sendRequest and send a redirect
to the new URL (text only URL).
*/
@dvdvdmt
Copy link

dvdvdmt commented May 22, 2019

That is great! But do you know how to handle keyboard events if a user set focus on an address bar or "find on the page" input fields?
I want to catch keyup event of the Alt key in my extension and it is working. But only if the page has a user focus, but if the user is focused on the address bar of the browser then it doesn't fire.

@avalanche1
Copy link

use this: https://developer.chrome.com/apps/commands (4 hotkeys max)

@dvdvdmt
Copy link

dvdvdmt commented Sep 27, 2020

use this: https://developer.chrome.com/apps/commands (4 hotkeys max)

@avalanche1 thanks for the willingness to help but it is not what I described. There is no way to listen on Alt key events in extension if the user is not focused on a page.

@avalanche1
Copy link

You are wrong. Just checked - Alt+z works when focus is in address bar. Try harder ;)

@dvdvdmt
Copy link

dvdvdmt commented Oct 3, 2020

@avalanche1, my question was about single key, specifically Alt key, and not about key combinations.

@Neves97
Copy link

Neves97 commented Mar 25, 2021

Thank you! this was the base for my First Chrome extension
https://github.com/Neves97/ChromeExtensionKeyboardInput.git

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment