¿Es posible establecer atajos de teclado en una página web?

No atajos del sistema o de la aplicación, sino atajos de teclado utilizados específicamente en una determinada página web.

Accesos directos de Gmail, por ejemplo.

Ejemplo:

Presione Alt+ fmientras está en Facebook, cambiará el feed de 'Historias principales' a 'Más reciente' y viceversa.

¿Y permitir que el usuario configure estos atajos por sí mismo? Tal vez una extensión de cromo?

La extensión Shortcut Manager le permite crear atajos de teclado personalizados, pero realizar acciones de la página interna requiere un poco de conocimiento en JavaScript o al menos jQuery Selectors .

Descripción oficial

Personalizar teclas de acceso directo; Asigne cualquier código Javascript o acciones del navegador a cualquier pulsación de tecla.

Puede cambiar las teclas de acceso directo predeterminadas del navegador y asignar cualquier marcador o acción Javascript a sus teclas de acceso rápido. Funciona como Keyconfig en Firefox.

Acciones de ejemplo:

• Pestañas: "Pestaña izquierda", "Directorio superior", "Cerrar pestañas derechas", "Abra su página favorita", ...
• Página: "Desplazarse hacia arriba / abajo", "Insertar su firma", ...
• Especial: "Captura de pantalla"
• Personalizado: ¡Ejecute cualquier Bookmarklet o código Javascript!

También puede importar o exportar su configuración para poder compartirla con otros.

Instalación

1. Visita el Administrador de accesos directos .
2. Haz clic en Agregar a Chrome .
3. Haz clic en Agregar .

Ejemplo

No tengo una cuenta de Facebook, así que abramos la bandeja de entrada de Superusuario con un atajo de teclado.

1. Haga clic en el icono del Administrador de accesos directos a la derecha del cuadro multifunción.

2. Haga clic en Ver todas las configuraciones / Agregar nuevos accesos directos .

3. Haga clic en el campo de entrada Tecla de acceso directo y presione la combinación de teclas deseada.

   Esto puede ser ya sea un solo acceso directo multi-clave (por ejemplo, Ctrl+ Shift+ Io Alt+ I) o una secuencia de teclas (por ejemplo, I, N, B, O, X).

4. Elija los patrones de URL apropiados .

   Para hacer coincidir todas las páginas del dominio superuser.comy sus subdominios, use:

   *://superuser.com/*
   *://*.superuser.com/*
   

5. En Acción , seleccione Ejecutar Javascript e ingrese

   http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
   

   en (1) .

6. Ingrese Abrir bandeja de entrada en Descripción .

7. Podemos utilizar el .click()método de JavaScript para simular clics del mouse en cualquier elemento de una página web. La parte difícil es acceder a esos elementos. Aquí es donde los selectores jQuery son útiles.

   Normalmente, para acceder a su bandeja de entrada, debe hacer clic en el menú desplegable de StackExchange y luego en la bandeja de entrada . Necesitamos selectores apropiados para ambos.

   • Haga clic con el botón derecho en el menú desplegable StackExchange y haga clic en Inspeccionar elemento .

     Verá lo siguiente en las herramientas para desarrolladores:

     <div id="header">
         <div id="portalLink">
             <a class="genu" onclick="StackExchange.ready(function(){genuwine.click();});return false;">Stack Exchange</a>
             </div>
             ...
     </div>
     

     La <a>etiqueta está resaltada; Este es el elemento donde queremos simular el clic.

     La clase del elemento es genu . Simplemente podríamos usar el selector .genu, pero eso no funcionaría correctamente si hubiera varios elementos de la misma clase. Un enfoque más confiable sería acceder a él como un nodo secundario del <div>con ID portalLink (los ID son únicos), utilizando el selector #portalLink a.genu. Entonces, usamos el .click()método.

     Introducir cualquiera de las siguientes líneas en (2) hará el trabajo:

     // click first <a> element with class `genu'
     // inside the element with ID `portalLink'
     $('#portalLink a.genu')[0].click();
     
     // click first <a> element with class `genu'
     // inside the element with ID `header'
     $('#header a.genu')[0].click();
     
     // click first element with class `genu' of the entire page
     $('.genu')[0].click();
     
     // click first <a> element of the entire page (unreliable)
     $('a')[0].click();
     
     // directly perform the onclick event (easy, but not always available)
     StackExchange.ready(function(){genuwine.click();});
     

   • En el menú desplegable StackExchange , haga clic con el botón derecho en la bandeja de entrada y haga clic en Inspeccionar elemento .

     Verá lo siguiente en las herramientas para desarrolladores:

     <a id="seTabInbox" class="seCurrent">Inbox</a>
     

     Este elemento tiene su propia ID: seTabInbox .

     Introducir cualquiera de las siguientes líneas en (2) hará el trabajo:

     // click first (only) element with ID `seTabInbox'
     $('#seTabInbox')[0].click();
     
     // click sixth <a> element of the entire page (unreliable)
     $('a')[5].click();
     

8. Haga clic en Guardar y vuelva a cargar todas las páginas abiertas de Superusuario. Su atajo está listo para usar.

Lee esto ( Enlace ), no es muy difícil, aunque tienes que abrir el navegador.