Data, Maps, Usability, and Performance

How to Convert a Bookmarklet to a Chrome Extension

Last updated on July 7, 2016 in Development

Converting Bookmarklet to 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:

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:

background.js

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.

OnlyImages Chrome Extension

External:
Extensionizr
Developing Google Chrome Extensions
Chrome Apps on GitHub
boilerplate project for Chrome DevTools extensions

Tags: , ,

Facebook Twitter Hacker News Reddit More...