How to Convert a Bookmarklet to a Chrome Extension
Bookmarklets, or the ability to execute your own JavaScript code on any page, allows you to customize your browsing experience in many ways. A while ago I wrote some JS code that would simply remove all content from any page and only show images with zoom on click functionality. It works well as a bookmarklet but I wanted to see how easy it is to package this into a Chrome Extension. I am doing this for fun but there are some strong reasons like access to cross domain resources, access to network requests, and ability to share with others via the Chrome Store.
Here are some simple steps that show how to convert JavaScript code into a Chrome Extension
The requirements are simple: press the extension icon which exectures JS code on the page. So, I need an icon, a JavaScript file with the code, and a manifest file that dictates how to execute that JS file when the extension is clicked and what permissions to grant it. Since I am only changing the web page in the active tab, I only need “activeTab” permissions. I am performing a browser action and executing the JS file as a background. Here is the manifest.json:
Since the extension is defined as a browser action, my JS file needs to properly wrap the code around that event. So, we tell Chrome to add a listener for a click event (chrome.browserAction.onClicked.addListener) and when that happens, we tell Chrome to execute some JavaScript code in the tab (chrome.tabs.executeScript). Here is the full JS file:
And here is the extension on GitHub which you can download and add yourself by going to Chrome extensions (chrome://extensions/), enabling developer mode, and selecting the downloaded folder with the “load unpacked extension” button.
External:
Extensionizr
Developing Google Chrome Extensions
Chrome Apps on GitHub
boilerplate project for Chrome DevTools extensions
