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”.

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: