Atajos de teclado con la API Commands
Proporcione a los usuarios avanzados un acceso rápido a su extensión mediante atajos de teclado globales definidos con la API commands.
Atajos de teclado con la API Commands es una lección gratuita de Browser Extensions Development (Chrome & Edge) en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Browser Extensions Development (Chrome & Edge), y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Atajos de teclado con la API Commands» es gratis?
Sí — el texto completo de «Atajos de teclado con la API Commands» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Browser Extensions Development (Chrome & Edge), actualiza a CoddyKit PRO. El curso de Browser Extensions Development (Chrome & Edge) incluye 4 lecciones en total.
¿Qué aprenderé en «Atajos de teclado con la API Commands»?
Proporcione a los usuarios avanzados un acceso rápido a su extensión mediante atajos de teclado globales definidos con la API commands. Practicas Browser Extensions Development (Chrome & Edge) con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Browser Extensions Development (Chrome & Edge)?
No se requiere experiencia previa. Browser Extensions Development (Chrome & Edge) en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Atajos de teclado con la API Commands»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Browser Extensions Development (Chrome & Edge)?
Sí. Cada lección de Browser Extensions Development (Chrome & Edge) incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Adición de elementos al menú contextual
- Integración de palabras clave del omnibox
- Respuesta a la entrada del omnibox
- Atajos de teclado con la API Commands