Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

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?

share|improve this question
    
Do you mean keyboard shortcuts for a specific webpage only, like adding macros to do things in the gmail window? Or do you want shortcuts that will take you to (for example) gmail when you hit a key command anywhere in Chrome? –  Marcus Chan Feb 3 '13 at 5:46
    
@MarcusChan The first. For example, if I press altD while on Facebook it will automatically clear all new notifications. And have the user set these shortcuts themselves. –  haphazard Feb 7 '13 at 3:38
    
If you edit your question to be more specific about what you want to do, we can petition for it to be unclosed. –  Marcus Chan Feb 7 '13 at 4:17
    
@marcus So I've edited the question, and I think it's pretty clear when I mention Gmail shortcuts, as to what I'm talking about. –  haphazard Feb 8 '13 at 2:36
    
You could write a user script of your own. I could get you going with the Facebook example, but since I don't have a Facebook account, I have to ask: What you do usually do to clear all notifications? –  Dennis Feb 11 '13 at 14:57

2 Answers 2

up vote 2 down vote accepted

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.

share|improve this answer
    
Thank you. This was really helpful. –  haphazard Feb 13 '13 at 18:55

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

share|improve this answer
1  
As I stated in my question. I am talking about keyboard shortcuts within the web page, not to the website. –  haphazard Feb 7 '13 at 3:39

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.