Creating a simple Chrome extension

Working Extension

Image 1. The current popup frame for my extension

With the help of some online tutorials and pretty good documentation I’ve managed to make a simple Google Chrome extension. Built more to experiment with the kind of functionality that can be built, my extension does some pretty basic stuff, but it’s interesting to know how these things can be built to target multiple web pages.

My extension currently has 4 bits of functionality: get the page to display a simple alert, remove all of the images on a page, replace all of the images on a page, and display all of the hypertext links on the page in an alert.

Before  Removed Images

Image 2. The original image search.

Image 3. The image search with sources removed through my extension.

Replaced Images LinkRetrieval

Image 4. The images replaced with a separate PNG image through my extension (original image here)

Image 5. The links retrieved from each <a> tag on the page

As it turns out, you can make the prompt with a simple HTML file. This was a pretty nice surprise as HTML and CSS are simple enough and I can make a fairly nice interface using them. The problem is that an extension doesn’t support inline JavaScript (so StackOverflow says) meaning that you have to add event handler’s to each different button.

One interesting mechanism I’ve had to learn about is the message passing mechanism chrome extensions have to implement for communication between content-scripts (ones that are embedded into the page) and the scripts running in the extension. The messaging code involves sending an appropriate code to the recipient, it is up to the recipient to pick an appropriate action based upon this code. It reminds me of Android’s intent mechanism.

I’ve used messaging in two places in this extension: to trigger the functionality necessary from the extension, and to initially update the extension with the number of images and links on the page.

This hasn’t been a bad experiment, now I just have to think of some kind of missing functionality to base an extension around.

I learnt a significant deal how to get started from this helpful tutorial (Getting Started, accessed June 6th 2017), without which I wouldn’t be able to create the manifest file, and based most of my messaging around the tutorials found on the official messaging page (Message Passing, accessed June 6th 2017).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s