Hello, and welcome to the third and final instalment of building a full Google Chrome extension from scratch. To recap, in the first part of the series, we built a Chrome extension that roughly counted the words in a Google Document that’s currently in focus, and did so via jQuery. It added a status bar at the bottom of the screen, and echoed out the count there.

In part two, we upgraded the extension significantly — we added precision to the word counter, added a page counter alongside the word counter, updated the manifest to the newest version as required by Chrome and, most importantly, removed jQuery in favor of vanilla JavaScript, to profit in terms of performance and resource consumption.

In this part we’ll finalize our extension by adding an Options page which can be accessed via the Extensions tab and can be used to configure the abilities we want our extension to have.

Adding the Options Page

An extension’s option page is basically just an HTML document which (usually) contains some form elements. Now, we could manually build an options page and throw in some elements for good measure, but I’ve never been a fan of reinventing the wheel and there is already an amazing package that does just what we want — it offers a default settings page that looks and feels like Chrome’s native settings page. Please download Fancy Setting and unzip it into your extension’s folder, giving it the name “fancy-settings”.

In order to make our extension load an options page, we need to add the following anyhwere in our manifest file:

"options_page": "fancy-settings/source/index.html"

This tells the extension the options page is to be loaded from fancy-settings/source/index.html, which is where we unzipped the downloaded Fancy Settings code. While we’re editing the manifest.json file, let’s bump up the version to 0.3.

To see this options page in action (although it won’t be of any use just now), reload the extension (as per instructions in part one) and click “Options” next to it (it should be next to “Allow in incognito”). This should open a new tab containing some quite beautiful form elements for us to edit and tweak.

Editing the Options Page

We’ll add the following simple options: we’ll let the user choose one of three visual themes, we’ll let the user turn off the word and page counters, and we’ll let the user remove the GDWC link from the statusbar.

For the first one, we need a group of radio buttons with three values. For the second, we need a group of checkboxes. For the third, we need a solitary checkbox. These can all be built via fancy-settings, so we’ll use their syntax. To find out more options you can use with Fancy Settings, read their documentation page.

In order to add the elements we need, we must edit the manifest of the options page itself. Replace the content of fancy-settings/source/manifest.js with the following:

What we did there was change our background page from JS to HTML so that we can also load HTML content and other scripts in the background. In this HTML page, we simply include all the JS scripts we want to load when the extension starts up (in our case, store.js from fancy-settings and our own background.js from before). Now that store.js is active and loaded, we can use it in the background page itself.

Open background.js and at the very top of the file, paste the following:

This fetches the settings from the client computer’s localStorage, and if they’re not set yet, sets the defaults. We need to be able to access these settings via our content script main.js, though. Remember that call to the background script from part one where we did this:

chrome.extension.sendRequest({}, function(response) {});

only to display the extension icon? Let’s put that to some better use.

In background.js, change:

sendResponse({});

to

sendResponse(settings.toObject());

This will send the retrieved settings back to the main.js script. Open main.js now, and change:

This means that the sendRequest call not only shows the icon, but now also fetches the settings and populates the newly added options variable with the received response. We now have options available in our main.js script. However, if we try to execute our main script outside the sendRequest callback and still set options = response inside the callback, the outside code will execute slightly faster than the one in the callback, thus complaining the “options” variable is not yet set. The asynchronous nature of JavaScript is something to carefuly consider here, so in order to avoid these problems we move this existing code:

This change makes sure our extension calls the background scripts and fetches the options before anything else, thus making sure the options become available for all later parts of the extension. In a positive turn of events, all this also handled the saving of our options automatically through the Store.js library.

Using the Settings to Manipulate the Status Bar

Now that our settings can be saved and loaded and we have all the necessary elements, let’s actually add some of that functionality. At the end of our sendRequest callback in main.js, add the following code:

This code grabs the GDWC SitePoint link, checks options for whether or not it should be visible, and acts accordingly. We don’t really have a gdwclink ID in the statusbar, so let’s wrap the link and the separator after it in a span with such an ID. Open statusbar.html and change this:

As you can see, we added some if checks before every counter, and we created a variable to store the message that is displayed in the status bar. The content of this message depends on the options we’ve chosen — that is, whether or not we wish to see page count, word count, none, or both.

If you reload now, the status bar will be transparent and awkward-looking. We need to force the default theme on it first. At the end of the sendRequest callback, immediately after the gdwc show/hide logic, add this:

That’s it. Now reload the extension, and the Google document you were testing it on. No change, right? Now go into the options of our extension and try selecting an option, then refresh the document you were testing it on to see the change go live. Play around and add some more options of your own if you wish.

Unfortunately, we need to reload the extension for the options we’ve chosen to take effect. While it’s not overly complicated to make the extension update in regards to new settings dynamically, it falls outside the scope of this article due to its length and and level. Regardless, allow me to point you in the right direction should you desire to do so yourself — all Fancy Settings elements can have event listeners, so in order to do this, you must listen for a change event on the elements we use and access all instances of the extension to edit the content of the status bar. Further information can be found at the Fancy Settings wiki page linked above, and in the Google Developers Guide.

Conclusion

In this final part of the series we’ve further upgraded our extension with an options page which resembles Chrome’s native settings pages, and we’ve added the ability to choose themes, deactivate certain features, and hide some elements on the status bar. I hope this introduction into option pages was enough to whet your appetite, and that it will encourage you to experiment on your own. The world of Chrome extensions is a big one and there’s a niche for high-quality, innovative extensions that enhance workflow. Who knows? You might even end up making a commercially viable one with some practice.

Bruno is a coder from Croatia with Master’s Degrees in Computer Science and English Language and Literature. He’s the editor of SitePoint’s PHP channel and a developer evangelist for Diffbot.com. He avoids legacy code like the plague and when picking projects makes sure they’re as cutting edge as possible. He’s a treadmill desk enthusiast and active (board)gamer who sometimes blogs.

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.