How to convert a JavaScript bookmarklet into a Chrome extension

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.

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 (Radbox is a save-this-video-for-later type service, an Instapaper for videos, so to speak).

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

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.

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.

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

---

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

• 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:

• Is your Chrome extensions area getting too crowded with icons? There’s a way to tidy up, short of removing them altogether. Check out our post entitled “How to declutter your Chrome toolbar without removing any extensions”.


• Want to find some cool bookmarkets? Check out our “Twelve Must Have Bookmarklets” post.

---

[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].