Chrome Extensions aren't as scary as they sound!

By Jarod Kurland

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:

  • Chrome Extensions are incredibly easy to develop and maintain
  • The knowledge you need is HTML, CSS, JS
  • Developed primarily with JS
  • Integrates with an exposed API within Chrome to access browser functions

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:

  • The former if you do not wish to expose a GUI to the user of some form, and keep that code in a single script file.
  • The latter, whereby you can have a cool settings screen which loads in a tab, and you can allow the user to configure or access advanced features of your extension.

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

  • Your background file(s) MAY use Chrome’s Extension API
  • You can have code run across multiple tabs
  • This can act as an intermediary between other script sections

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:

  • Your popup view MAY use Chrome’s Extension API
  • Code is only run upon clicking of your extension button
  • This is typically used for small settings screens or small ways of interacting with your extension

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:

  • Your content scripts MAY NOT use all of Chrome’s Extension API. Just when you thought everything did. This is possibly due to the fact that if they did open the API to content pages, malicious sites could do some nasty things to your browser, since all scripts upon rendering are executed.
  • You are limited to using some portions of Chrome’s Extension API, such as the broadcasting/messaging services. This allows you to draft code for your content scripts to interact with the other portions of your extension.

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.