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

Question

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

Atalhos do Gmail, por exemplo.

Exemplo:

Pressione Alt + f enquanto no Facebook ele mudará o feed de 'Notícias principais' para 'Mais recentes' e vice-versa.

E permitir que o usuário defina esses atalhos por conta própria? Talvez uma extensão de cromo?

    

Answer 1

A extensão Gerenciador de atalhos permite que você crie atalhos de teclado personalizados, mas executar ações de página interna requer um pouco de conhecimento em JavaScript ou pelo menos jQuery Seletores .

Descrição oficial

Customize shortcut keys; Assign any Javascript code or browser actions to any key strokes.

You can change the browser default shortcut keys, and assign any bookmarklets or Javascript action to your hotkeys. It works as Keyconfig on Firefox.

Example actions:

• Tabs: "Left Tab", "Upper directory", "Close right tabs", "Open your favorite page",...
• Page: "Scroll up/down", "Insert your signature",...
• Special: "Screen Capture"
• Custom: Execute any Bookmarklets or Javascript code!

You can also import or export your settings so you can share it with others.

Instalação

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

Exemplo

Eu não tenho uma conta no Facebook, então vamos abrir a caixa de entrada do 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.

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

4. Escolha os padrões de URL apropriados .

   Para corresponder a todas as páginas do domínio superuser.com e 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. Insira Abra a caixa de entrada em Descrição .

7. Podemos usar o método .click() do 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, você clica no menu suspenso StackExchange e, em seguida, em 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 para desenvolvedores:

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

     A tag <a> está destacada; este é o elemento onde 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> com ID portalLink (IDs são exclusivos), usando o seletor #portalLink a.genu . Então, usamos o método .click() .

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

   • Na lista suspensa StackExchange , clique com o botão direito do mouse em caixa de entrada e clique em Inspecionar elemento .

     Você verá o seguinte nas ferramentas para desenvolvedores:

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

     Este elemento tem seu próprio ID: seTabInbox .

     Inserir 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 do Superusuário. Seu atalho está pronto para uso.

Answer 2

Dê uma lida ( Link ), não é muito difícil, embora você tenha que abrir o navegador-