Est-il possible de définir des raccourcis clavier sur une page Web?

Pas de raccourcis système ou d'application, mais des raccourcis clavier utilisés spécifiquement sur une certaine page Web.

Raccourcis Gmail par exemple.

Exemple:

Appuyez sur Alt+ ftandis que sur Facebook, le flux passera de «Top Stories» à «Most Recent» et vice versa.

Et permettre à l'utilisateur de définir lui-même ces raccourcis? Peut-être une extension chrome?

L'extension Gestionnaire de raccourcis vous permet de créer des raccourcis clavier personnalisés, mais effectuer des actions sur la page intérieure nécessite un peu de connaissances en JavaScript ou au moins dans les sélecteurs jQuery .

Description officielle

Personnalisez les touches de raccourci; Attribuez n'importe quel code Javascript ou actions de navigateur à n'importe quel coup de touche.

Vous pouvez modifier les touches de raccourci par défaut du navigateur et affecter des bookmarklets ou des actions Javascript à vos raccourcis clavier. Il fonctionne comme Keyconfig sur Firefox.

Exemples d'actions:

• Onglets: "Onglet gauche", "Répertoire supérieur", "Fermer les onglets de droite", "Ouvrir votre page préférée", ...
• Page: "Défilement haut / bas", "Insérez votre signature", ...
• Spécial: "Capture d'écran"
• Personnalisé: exécutez tous les Bookmarklets ou le code Javascript!

Vous pouvez également importer ou exporter vos paramètres afin de pouvoir les partager avec d'autres.

Installation

1. Visitez le Gestionnaire de raccourcis .
2. Cliquez sur Ajouter à Chrome .
3. Cliquez sur Ajouter .

Exemple

Je n'ai pas de compte Facebook, alors ouvrons la boîte de réception Super User à l'aide d'un raccourci clavier.

1. Cliquez sur l' icône Gestionnaire de raccourcis à droite de l'omnibox.

2. Cliquez sur Voir tous les paramètres / Ajouter de nouveaux raccourcis .

3. Cliquez sur le champ de saisie Touche de raccourci et appuyez sur la combinaison de touches souhaitée.

   Cela peut être un raccourci multitouche (par exemple, Ctrl+ Shift+ Iou Alt+ I) ou une séquence de touches (par exemple I, N, B, O, X).

4. Choisissez les modèles d'URL appropriés .

   Pour faire correspondre toutes les pages du domaine superuser.comet de ses sous-domaines, utilisez:

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

5. Dans Action , sélectionnez Exécuter Javascript et entrez

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

   dans (1) .

6. Entrez Ouvrir la boîte de réception dans la description .

7. Nous pouvons utiliser la .click()méthode JavaScript pour simuler les clics de souris sur n'importe quel élément d'une page Web. La partie délicate est d'accéder à ces éléments. C'est là que les sélecteurs jQuery sont utiles.

   Normalement, pour accéder à votre boîte de réception, vous devez cliquer sur le menu déroulant StackExchange , puis sur boîte de réception . Nous avons besoin de sélecteurs appropriés pour les deux.

   • Cliquez avec le bouton droit sur la liste déroulante StackExchange et cliquez sur Inspecter l'élément .

     Vous verrez ce qui suit dans les outils de développement:

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

     La <a>balise est mise en surbrillance; c'est l'élément où l'on veut simuler le clic.

     La classe de l'élément est genu . Nous pourrions simplement utiliser le sélecteur .genu, mais cela ne fonctionnerait pas correctement s'il y avait plusieurs éléments de la même classe. Une approche plus fiable serait d'y accéder en tant que nœud enfant de l' <div>ID portalLink (les ID sont uniques), à l'aide du sélecteur #portalLink a.genu. Ensuite, nous utilisons la .click()méthode.

     La saisie de l'une des lignes suivantes dans (2) fera le travail:

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

   • Dans la liste déroulante StackExchange , cliquez avec le bouton droit sur la boîte de réception et cliquez sur Inspecter l'élément .

     Vous verrez ce qui suit dans les outils de développement:

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

     Cet élément a son propre ID: seTabInbox .

     La saisie de l'une des lignes suivantes dans (2) fera le travail:

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

8. Cliquez sur Enregistrer et rechargez toutes les pages Super User ouvertes. Votre raccourci est prêt à l'emploi.

Lisez ceci ( Lien ), ce n'est pas très difficile bien que vous deviez ouvrir le navigateur-