É possível definir atalhos de teclado em uma página da web?

Não são atalhos de sistema ou aplicativo, mas atalhos de teclado usados ​​especificamente em uma determinada página da web.

Atalhos do Gmail, por exemplo.

Exemplo:

Pressione Alt+ fenquanto no Facebook ele mudará o feed de 'Principais notícias' para 'Mais recentes' e vice-versa.

E permitir que o usuário defina esses atalhos eles mesmos? Talvez uma extensão do chrome?

A extensão Shortcut Manager permite criar atalhos de teclado personalizados, mas executar ações internas da página requer um pouco de conhecimento em JavaScript ou, pelo menos, nos seletores jQuery .

Descrição oficial

Personalizar teclas de atalho; Atribua qualquer código Javascript ou ações do navegador a qualquer pressionamento de tecla.

Você pode alterar as teclas de atalho padrão do navegador e atribuir qualquer bookmarklets ou ação Javascript às suas teclas de atalho. Funciona como Keyconfig no Firefox.

Ações de exemplo:

• Guias: "Guia Esquerda", "Diretório superior", "Fechar as guias à direita", "Abra sua página favorita", ...
• Página: "Rolar para cima / baixo", "Inserir sua assinatura", ...
• Especial: "Captura de tela"
• Personalizado: execute qualquer Bookmarklets ou código Javascript!

Você também pode importar ou exportar suas configurações para compartilhá-las com outras pessoas.

Instalação

1. Visite o Gerenciador de atalhos .
2. Clique em Adicionar ao Chrome .
3. Clique em Adicionar .

Exemplo

Como não tenho uma conta no Facebook, vamos abrir a caixa de entrada Superusuário usando um atalho de teclado.

1. Clique no ícone Gerenciador de atalhos à direita da omnibox.

2. Clique em Ver todas as configurações / Adicionar novos atalhos .

3. Clique no campo de entrada Tecla de atalho e pressione a combinação de teclas desejada.

   Este pode ser um atalho único multi-chave (por exemplo, Ctrl+ Shift+ Iou Alt+ I) ou uma sequência de teclas (por exemplo, I, N, B, O, X).

4. Escolha padrões de URL apropriados .

   Para corresponder a todas as páginas do domínio superuser.come seus subdomínios, use:

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

5. Em Ação , selecione Executar Javascript e digite

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

   em (1) .

6. Digite Abrir caixa de entrada em Descrição .

7. Podemos usar o .click()método JavaScript para simular cliques do mouse em qualquer item de uma página da web. A parte complicada é acessar esses itens. É aqui que os seletores do jQuery são úteis.

   Normalmente, para acessar sua caixa de entrada, clique no menu suspenso StackExchange e depois na caixa de entrada . Precisamos de seletores apropriados para ambos.

   • Clique com o botão direito do mouse no menu suspenso StackExchange e clique em Inspecionar elemento .

     Você verá o seguinte nas ferramentas do desenvolvedor:

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

     A <a>tag é destacada; este é o elemento em que queremos simular o clique.

     A classe do elemento é genu . Poderíamos simplesmente usar o seletor .genu, mas isso não funcionaria corretamente se houvesse vários elementos da mesma classe. Uma abordagem mais confiável seria acessá-lo como um nó filho do <div>ID de portalLink (os IDs são exclusivos), usando o seletor #portalLink a.genu. Então, usamos o .click()método

     Digitar qualquer uma das seguintes linhas em (2) fará o trabalho:

     // 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();});
     

   • No menu suspenso StackExchange , clique com o botão direito do mouse na caixa de entrada e clique em Inspecionar elemento .

     Você verá o seguinte nas ferramentas do desenvolvedor:

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

     Este elemento possui seu próprio ID: seTabInbox .

     Digitar qualquer uma das seguintes linhas em (2) fará o trabalho:

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

8. Clique em Salvar e recarregue todas as páginas abertas de superusuário. Seu atalho está pronto para uso.

Leia isto ( Link ), não é muito difícil, embora você precise abrir o navegador.