9

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?

6
  • 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? Feb 3, 2013 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.
    – juil
    Feb 7, 2013 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. Feb 7, 2013 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.
    – juil
    Feb 8, 2013 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, 2013 at 14:57

3 Answers 3

8

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.

3
  • 5
    URL gives a 404
    – Kev
    Dec 11, 2018 at 10:56
  • 2
    For Shortcut Manager, that is
    – Kev
    Dec 21, 2018 at 20:02
  • Hey Dennis, the Shortcut Manager URLs all lead to 400 Bad Request errors.
    – Ollie
    Oct 24, 2020 at 17:19
1

I believe what they were looking for is the "accesskey" attribute. To use, press Alt + (the letter specified by accesskey).

Some examples:

<label for="myInput" accesskey="r"/>
<a href="https://www.w3schools.com/html/" accesskey="h">HTML</a>*

Note: Test the Alt+(letter of your choosing) before specifying it in your page to make sure that it doesn't already do something (i.e. Alt+F will usually activate the Chrome's main menu, so choose your letters wisely) Also, to make it more user-friendly, its best to indicate what letter you are using as the shortcut by underlining the letter. (i.e. as in the previous example the link should look like:

<a href="#" accesskey="h" title="Press [Alt+H] to follow link"><u>H</u>TML</a>

-1

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

1
  • 2
    As I stated in my question. I am talking about keyboard shortcuts within the web page, not to the website.
    – juil
    Feb 7, 2013 at 3:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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