Chrome Extensions: Dangerously Awesome

Recently, I completed a web application that allows our Inbound Team to more easily distribute client events to event posting sites. Instead of having to type the same event information multiple times a day in each site, they simply have to type the event information once and select the websites where they want to post the event, and with a click of a button the browser will open up a new tab for each site and auto-populate the event details.

Not only does this save time (when you consider it now takes 5-10 minutes to post to eight different event sites instead of an hour or longer), it also stores the events details and posting status so we have event posting records for our clients.

So what does this have to do with Google Chrome extensions? One of the basic requirements for this application was to inject the event details into each site, while also attaching event listeners to the page to detect event submission…and Chrome extensions make this possible. Essentially, Chrome extensions give you programmatic access to just about everything within your Chrome browser. A Chrome extension can watch everything you do, open new windows and tabs, inject JavaScript and CSS into websites, control the DOM, make cross-domain AJAX requests, and much more.

If you’re a nerd and are excited to learn the basics of creating a Chrome extension, keep reading. If not, I ask that you leave with one key takeaway from the above—don’t install a Chrome extension from a non-trusted source. Doing this is essentially pulling a sketchy stranger from the street and allowing him or her to look over your shoulder while you browse the internet (unless you’re into that).

Ok nerds, here we go…

Creating a Chrome extension is very similar to creating a website, as you have HTML, JS and CSS files. The main difference is that extensions require a manifest.json file that acts as the controller where you define file locations and permissions, along with details of your extension like a name, description, version and icons.

There are a few things to note about the manifest, including popup HTML and scripts, permissions, background scripts, and content scripts:

Popup HTML and scripts

The popup is the window displayed when you click on the extension icon in the top of your browser (see below). This HTML file is just like any other HTML file, except you can’t have inline JavaScript. I created this popup much the same way I would have created a small web page, with CSS files to control the styles and JS files to control the UI and events.

Permissions

The permissions array defines the permissions for the extension. In the case of my extension, the only permission I need is permission to perform cross-domain AJAX requests to fourevents.adpearance.com (I use AJAX to monitor pending events and mark events as posted). Without adding the FourEvents URL, the extension would throw a same origin policy error if I made an AJAX request to that URL.

Background & Content Scripts

The heart of the manifest file is the background and content script declarations.  Background scripts are the main scripts that run behind your extension and can communicate with both your popup scripts and your content scripts. Content scripts run on each page in your Chrome browser, and they can communicate with your background scripts but not your popup scripts. Think of content scripts as custom scripts that you inject on every website you visit while your extension is running.

See below for a diagram that helps tie everything together:

All extension scripts have access (with limitations) to the Chrome extension APIs that contain various methods and events. With the APIs you can control just about everything within your Chrome browser. Explore the Chrome JavaScript APIs to find the complete API index.

For the FourEvents extension, I have a popup.html file that loads the popup when you click on the extension icon. The html file includes a popup.js file that performs an AJAX request to fourevents.adpearance.com to grab pending events.

Clicking on “post all pending” (controlled by popup.js) opens a new window with a tab for each site with an event to post. On creation of a new tab, I store the event object (containing all event details) in the background script along with the associating tab id.

When the tab opens, the content script grabs the event object from the background script and navigates the event posting site’s DOM to inject the event details on the page. I then append a custom “Post” button at the bottom of the event form that, when clicked, AJAX’s fourevents.adpearance.com to inform the system that the event was posted.

Finally, I trigger a click event to the event form’s actual submit button and the event is submitted. Voila.

Hopefully you learned a thing or two about Chrome extensions. As is true with most things, the best way to learn is to try it for yourself, and Google provides very good documentation and tutorials so you can get your feet wet. Check out the Chrome extension resources to get started.