//
you're reading...
HowTo, Uncategorized

How to Display “accesskey” shortcuts in Google Chrome (and much more)


Have you ever heard about access keys? Well, I did. And I loved them. Your productivity can be so improved when surfing a web page by avoiding to use the mouse and by using shortcuts, instead.

The bad thing about access keys is that they’re often hidden, by default, in the web pages. This doesn’t make sense to me.

Take the Twitter home page. How many of you knew that, during a search, you could press CTRL+ALT+n to display the “N new tweets since you started searching” or that you could press CTRL+ALT+s to visit your “settings” page? As a different example, let’s consider Wikipedia. Did you know that CTRL+ALT+e lead you to the “edit” mode? Probably not.

Resuming, “accesskey” shortcuts can be very useful. So why they are not displayed by default on the web pages? How should we know about them? And how could we ever remember all of them?

Long time ago, I found this post on how to display the “accesskey” keyboard shortcuts in Firefox and I used it for a while. But I’ve recently fallen in love with Google Chrome and I was wondering if the same feature was already available.

At first, I googled for a quick solution and I couldn’t find anything really useful. Then, I asked on Superuser if what I wanted was somehow possible. After a couple of hours, someone answered my question, claiming he created a new Chrome extension just for that. I must admit I was more impressed by the rapidity of the answer than by the answer itself. If this guy could read my specification and implement a solution in such a short time, there was only one possible consequence: “Creating extension for Google Chrome is easy”.

So, I tried by myself.

First of all, I had a look to the “Getting Started” section of the Chrome extensions documentation. As expected, everything was extremely simple. To implement the “accesskey” shortcuts, it took me no more than five minutes. Literally. And now my Twitter page looks like:

Can you see the pink characters close to the links? They are all available “accesskey” shortcuts, a piece of information that was already embedded in the web page but that has just been hidden. Let’s see how can we make it visible again via a brand new Google Chrome Extension.

First of all, create a new folder somewhere in your hard drive and call it “shortcuts”.

Every Chrome extension is characterized by a “manifest” file, written in json, reporting the “properties” of the extension itself. Inside the “shortcuts” folder, create a new file, named “manifest.json”:

{
  "name": "Shortcuts",
  "version": "1.0",
  "description": "Display the accesskey shortcuts.",
  "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "css": ["style.css"]
  }]
}

Apart from the name, the version number and the description of the extension, you can notice a “content_scripts” property. This is used to “inject” some code automatically every time a web page is displayed. In our case, we simply want to apply some specific CSS properties to the pages. The “matches” section tells Chrome to apply the transformation to every page using the http or the https protocol.

Now, we just need to create a style.css file (inside the same “shortcuts” folder) containing the needed stylistic information:

a[accesskey]:after,
button[accesskey]:after,
input[accesskey]:after,
label[accesskey]:after,
legend[accesskey]:after,
textarea[accesskey]:after {
  margin-left: 0.3em;
  color: Plum;
  content: "[" attr(accesskey) "]";
}

That’s all folks. We’re done. We can just install our brand new Google Chrome Extensions by visiting the URL:

chrome://extension

and clicking on the “Load Unpacked Extension” button.

Using the same strategy, it is obviously possible to apply different CSS transformations. Imagine for a second that you would like to hide all the images from a web page. A CSS like the following would do the job:

img {
  display: none;
}

Hope this help.

About these ads

About Roberto Aloi

Software Engineer and Erlanger. Author of www.tryerlang.org.

Discussion

3 thoughts on “How to Display “accesskey” shortcuts in Google Chrome (and much more)

  1. I can see the accesskeys, but when I try the keyboard combination of Ctrl + Alt + n (where n = the accesskey), nothing happens. Any ideas? Thanks!

    Posted by GambitDeclined | August 18, 2010, 2:11 am
  2. Nice & quick intro to extension development.

    TNX

    Posted by ADMiN | October 16, 2010, 12:08 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: