Hacking Crome extensions - How I added keyboard shortcuts to 1Password in Chrome

Hacking Crome extensions - How I added keyboard shortcuts to 1Password in Chrome

May 14, 2010

I love 1Password. It looks good, it’s safe, it has a web-accessible UI, it has an iPhone/iPad application…

What I didn’t like about it was it’s Chrome extension, which required me to use the mouse to click the 1Password icon in the toolbar each time I wanted to auto-fill a form with login details!! That was so annoying.

So annoying in fact that I took upon myself to implement keyboard shortcuts in the 1Password extensions. I knew it wouldn’t be that hard, since Chrome extensions are basically JavaScript & HTML files.

And it turned out to be pretty easy indeed:

I added an event listener for keyUp in the content script (that’s executed each time a page is loaded):

window.addEventListener(“keyup”, keyListener, false);

Then in the keyListener function, I simply check for the keyboard shortcuts I want:

That sendRequest line simply calls another JavaScript function, but a function that is defined and executed in the ‘background’ context (the equivalent of a singleton pattern for Chrome extensions).In the background HTML file, I simply added some code in that function that would popup a small window that would show the same popup.html file as when I clicked the 1Password button in the toolbar.

The only thing left was to change the existing functions from popup.html that fetched the available login informations, and auto-filled the forms, to use the parent tab, instead of the current tab, when invoked from the popup.And how lucky I was; there was already a null parameter used for the target window in both those functions! I simply changed that parameter to the parent window id, if the popup was invoked from the keyboard, and that’s it! :)

I now have a working 1Password extension that I can use without my hands leaving the keyboard.

I created a patch of my changes, and posted it in the 1Password forums, so that them developers could take it and base the official implementation from there.