How to convert a JavaScript bookmarklet into a Chrome extension

If you use Chrome you know that extensions are laid out neatly to the right of the address bar.

One thing about having all of your extensions accessible via small icons that are grouped together in the same place is that it makes sense from both a user experience and organizational standpoints.

However, you may be using bookmarklets on your Chrome toolbar or your bookmarks folder as well that you may have wished could be moved or grouped with the other Chrome extensions. This post will show you how to do exactly that.

Convert Bookmarklet to Chrome Extension Screenshot

Step 1: first, find a bookmarklet that you want to convert to a Chrome extension. For the purposes of this article I used the “Add to Radbox” bookmarklet which I conveniently found on my Chrome toolbar (Radboxis a save-this-video-for-later type service, an Instapaper for videos, so to speak).

radbox

Step 2: next, go to the following site: Convert Bookmarklet to Chrome Extension, a free web service which does exactly what it says.

Step 3: type the name and description for  your chrome extension in the form, then drag and drop the bookmarklet from the Chrome toolbar to the field that reads “drag bookmarklet here”.

drag and drop to sandbox

Step 4: Once the javascript code appears, click ‘Generate Extension’. Your browser will now start saving a zip file on your hard drive (“bookmarklet2extension.zip”); go ahead and unzip it.

generate extension

Step 5: go to chrome Options > Extensions. Next check “developer mode” box and click on “Load Chrome Extensions” (labeled ‘1’ and ‘2’ in the screenshot below). Then browse to the unpacked “bookmarklet2extension” folder that you had just unzipped at the end of previous step, and load it.

Options Extensions- Load Extension

Step 6: That’s it. Enjoy your new Chrome extension. You can now delete the original bookmarklet from the Chrome toolbar if you want.

my brand new extension


Note on the your new extension ICON.

If you would prefer to have another icon that is different from the black orb in the screenshot above, here’s what you can do.

  • Open the unzipped “bookmarklet2extension” folder in Windows explorer. You will see three PNG files (icon-16.png, icon-48.png, and icon-128.png). Replace these with new PNG icons of the same size for each (16×16, 48×48, and 128×128, respectively).

bookmarklet2extension folder

  • Reinstall from the “bookmarklet2extension” folder with the modified PNG files (i.e. from step 5 onwards above). If you’ve previously installed it with the black orb icon, you will now have installed twice with different icons; simply uninstall the previous one (right click on the black orb icon in Chrome and select ‘Uninstall’).

More cool stuff for you:


[Thanks go to Alaa K for the screenshots in this post, and to reader Panzer for tipping us off about the Bookmarklet to Chrome service].


 
 
 
Samer Kurdi

Samer Kurdi

Has been reviewing software since 2006 when he started Freewaregenius.com
flattr this!
  • http://www.zoniweb.com ZoNi

    @ Title: Java or JavaScript?

  • cc

    Please do not make the mistake of writing “Java” when you are actually talking about JavaScript, they’re two entirely separate programming/scripting languages.
    See http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java#245068

    Other than this, good article, useful tip!

    • Samer

      Oops. Thanks guys; changed Java to JavaScript.

      • http://skuda.net skopp

        Before I learnt that they were not related – AT ALL (my reaction, btw, was:
        “LOL- uh… ?_? WUT ?!”) – I thought they were absolutely, irrevocably related. In fact, I thought Java was more “native” and JS a web script framework derived from it.

        I know better know, but still don’t get why this obvious misconception was, instead of resolved, but worsened. JS was originally called Mocha [(co)incidentally an offshoot of JavaScript called COFFEEscript now exists as well). Then the name was changed to JavaScript despite Java being around at the same time as well as the knowledge that the two were not the same thing; just shared maybe some syntax and C/C#/C++ hardcoding – but if you really think about it, what doesn’t? All programming languages are different means to the same ends, ie. speaking to the computer.

        Could this be a onspiracy? Or, perhaps they just didn’t have the foresight back then to understand the repurcussions.
        They just didn’t C# enough.

  • Pingback: Convert Bookmarklets Into Chrome Extensions | CisforComputers

  • zef

    But the extension made this way will not be synchonized between your chrome instances.
    While the original bookmarklet was.
    That is a big downside. Or am I missing something?

  • http://twitter.com/vonbrucken Vonbrucken

    There is also a cool extension called Spell Book to access your bookmarklets via right-click:
    https://chrome.google.com/webstore/detail/ihckioenbbjedpocnnennnehjaacojil

  • buddy

    when i dragged my chrome bookmark i didn’t get the javascript code instead i was simply shown the URL