So, I thought I’d run through the creation/development of Chrome Extensions since a few of my developer friends had the vague idea that they’re complex to produce and maintain, as well as integrate with Chrome.

So just so we’re clear, the initial clarification of this story is:

The primary parts of a Chrome Extension are background, popup and content. So I’ll jump right in to each of these.

1) Background

If you’re considering having code running in the background while a user continues to do things within the browser, this is where you’d place it. A Chrome Extension can have background code in the form of JavaScript files, or an HTML file – the differences being:

Some important things I want to point out to you about the background part of Chrome Extensions:

If you’re not 100% sure what this means, take a look at some extensions that use background views/code, for example Momentum (seen in the feature image above) or Screencastify.

2) Popup

When your extension gets added to Chrome, the logo image you added in your manifest file is added to a button on the top right hand section of the browser toolbar within Chrome. When selecting the button, any HTML and JS relating to your popup is loaded. You’ll notice some extensions in Chrome have a window that appears upon a click event on this button, this is a popup HTML that’s loaded and any other resources linked to it.

Again, there are a couple of notes to point out when it comes to popups:

And for the sake of consistency, examples of extensions that have popups include Checker Plus for Gmail and Adblock.

3) Content

If your plugin ever needs to interact with content on a page within a browser (think of advert blockers, or the infamous Nicholas Cage extension), you’ll need some content scripts and permissions. Upon setting up the permissions to modify content on tabs, you can write your own JS files to actually alter the content of a loaded page.

Important things to note when it comes to content scripts include:

Adblock provides an example of an extension that modifies the content of pages.

There you have it folks. Chrome Extensions aren’t as scary as they sound. What they definitely are, though, is interesting to play with. So why not get imaginative with it, and happy developing.