Is it possible to set keyboard shortcuts on a webpage?

Question

Not system or application shortcuts, but keyboard shortcuts used specifically on a certain webpage.

Gmail shortcuts for example.

Example:

Press Alt+f while on Facebook it will change the feed from 'Top Stories' to 'Most Recent' and vice versa.

And allow the user to set these shortcuts themselves? Perhaps a chrome extension?

Answer 1

The extension Shortcut Manager allows you to create custom keyboard shortcuts, but performing inner page actions requires a little knowledge in JavaScript or at least jQuery Selectors.

Offical description

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.

Installation

1. Visit Shortcut Manager.
2. Click Add to Chrome.
3. Click Add.

Example

I don't have a Facebook account, so let's open the Super User inbox using a keyboard shortcut.

1. Click the Shortcut Manager icon at the right of the omnibox.

2. Click See all settings / Add new shortcuts.

3. Click on the input field Shortcut key and press the desired key combination.

   This can be either a single multi-key shortcut (e.g., Ctrl + Shift + I or Alt+I) or a sequence of keys (e.g., I, N, B, O, X).

4. Choose appropriate URL patterns.

   To match all pages of the domain superuser.com and its subdomains, use:

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

5. In Action, select Execute Javascript and enter

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

   in (1).

6. Enter Open inbox in Description.

7. We can use JavaScript's .click() method to simulate mouse clicks on any item of a web page. The tricky part is accessing those items. This is where the jQuery selectors come in handy.

   Normally, to access your inbox, you'd click on the StackExchange dropdown, then inbox. We need appropriate selectors for both.

   • Right-click the StackExchange dropdown and click Inspect Element.

     You'll see the following in the developer tools:

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

     The <a> tag is highlighted; this is the element where we want to simulate the click.

     The class of the element is genu. We could simply use the selector .genu, but that wouldn't work properly if there were multiple elements of the same class. A more reliable approach would be to access it as a child node of the <div> with ID portalLink (ID's are unique), using the selector #portalLink a.genu. Then, we use the .click() method.

     Entering any of the following lines in (2) will do the job:

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

   • In the StackExchange dropdown, right-click inbox and click Inspect Element.

     You'll see the following in the developer tools:

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

     This element has its own ID: seTabInbox.

     Entering any of the following lines in (2) will do the job:

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

8. Click Save and reload all open Super User pages. Your shortcut is ready to use.

Answer 2

Give this a read(Link), it isn't very difficult although you have to open the browser-