Keyboard Shortcuts with the Commands API
Give power users fast access to your extension through global keyboard shortcuts defined with the commands API.
Keyboard Shortcuts with the Commands API is a free Browser Extensions Development (Chrome & Edge) lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Browser Extensions Development (Chrome & Edge) learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Keyboard Shortcuts
Beyond context menus and the omnibox, the commands API lets users trigger actions with a keystroke. Shortcuts make your extension feel fast and professional to power users.
Declaring Commands
Define each command in the manifest under commands, with a suggested key combination per platform.
{
"commands": {
"toggle-feature": {
"suggested_key": { "default": "Ctrl+Shift+Y" },
"description": "Toggle the feature"
}
}
}Cross-Platform Keys
macOS uses Command instead of Ctrl. Provide platform-specific suggestions so the default keys feel native everywhere.
"suggested_key": {
"default": "Ctrl+Shift+Y",
"mac": "Command+Shift+Y"
}Listening for Commands
In your service worker, handle the onCommand event. The command name you declared is passed to the listener.
chrome.commands.onCommand.addListener((command) => {
if (command === 'toggle-feature') {
console.log('Shortcut fired')
}
})The Special _execute_action Command
A reserved command named _execute_action opens your popup or fires the action click. You do not handle it in code; the browser does.
{
"commands": {
"_execute_action": {
"suggested_key": { "default": "Ctrl+Shift+E" }
}
}
}Acting on the Current Tab
Most shortcuts operate on the active tab. Query it inside the handler, then send a message or inject a script.
chrome.commands.onCommand.addListener(async (command) => {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
chrome.tabs.sendMessage(tab.id, { command })
})Users Can Rebind Keys
Your suggested keys are only suggestions. Users can change them on the browser's extension shortcuts page, and conflicts are resolved there.
// chrome://extensions/shortcuts lets users rebindLimited Number of Suggestions
Browsers limit how many commands can have a suggested key (commonly four). Extra commands still work but start unbound until the user assigns a key.
Reading Registered Commands
Use commands.getAll to inspect what keys are currently bound, useful for showing a help screen in your options page.
const cmds = await chrome.commands.getAll()
cmds.forEach(c => console.log(c.name + ': ' + c.shortcut))Avoiding Conflicts
Pick uncommon combinations to reduce clashes with the browser and other extensions. Combos with Shift plus a letter are usually safe.
Documenting Shortcuts
List your shortcuts in the options page or onboarding so users discover them. A hidden shortcut helps no one.
Quick Check
Test your commands API knowledge.
Recap
You added keyboard shortcuts:
- Declare them under
commandswith per-platform keys - Handle
onCommandin the service worker - Use
_execute_actionfor the popup - Respect the suggested-key limit and user rebinds
- Document shortcuts for discoverability
Shortcuts make your extension feel fast and power-user friendly.
Frequently asked questions
Is the “Keyboard Shortcuts with the Commands API” lesson free?
Yes — the full text of “Keyboard Shortcuts with the Commands API” is free to read here on the web, and the Browser Extensions Development (Chrome & Edge) course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Browser Extensions Development (Chrome & Edge) course, upgrade to CoddyKit PRO.
What will I learn in “Keyboard Shortcuts with the Commands API”?
Give power users fast access to your extension through global keyboard shortcuts defined with the commands API. You practise Browser Extensions Development (Chrome & Edge) with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Browser Extensions Development (Chrome & Edge)?
No prior experience is required. Browser Extensions Development (Chrome & Edge) on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Keyboard Shortcuts with the Commands API” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Browser Extensions Development (Chrome & Edge) lesson?
Yes. Every Browser Extensions Development (Chrome & Edge) lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Adding Context Menu Items
- Omnibox Keyword Integration
- Responding to Omnibox Input
- Keyboard Shortcuts with the Commands API