This update is part one of a series of posts explaining how to make a Chrome extension that manipulates elements within web pages. One example of such an extension is my extension Chickenify, a Chrome extension which changes [nearly] all text on web pages to the word “chicken.” (Chickenify is inspired by the “Chicken chicken chicken” paper and talk by Doug Zongker.)

There are quite a few tutorials that explain the process of creating a Chome plugin, but few provide both a) a thorough overview of the files that make up a Chrome extension and b) updated references to the Chrome extension API. Hopefully, I can provide you with both.

Your typical Chrome plugin will consist of, at the minimum, two files: manifest.json and a JS script. The file called manifest.json is a manifest file written in JSON format that describes the files included, as well of descriptors of the app's permissions. The other file –  let's call it “whatever.js” – can be either a content script or a background script.

Content scripts are snippets of JavaScript that execute as if they were dropped into the page. However, they don't have access to the funkier and more expressive bits of the Chrome extension API. This makes sense if you think about it – the power of a content script is that the JavaScript it contains functions as if it were included locally in the page content. The downside to this is that content scripts are then blissfully unaware of the user interacting with the browser: if my extension consists solely of the required manifest file plus a content script, I have no way of intercepting user actions like as clicking the extension's toolbar button.

Luckily, developers can create background scripts that will listen for actions happening outside of the web page. Background scripts and content scripts can communicate with each other via messaging. For example, when a user visits a page with Chickenify loaded, the content script sends a message to the application's background script, which checks to see if the Chickenify button is pressed. The background script sends the result of “buttonStatus” to the content script, and if “buttonStatus” is true, the content script then proceeds to change every word in the page's body to the word “chicken.” While a server/client model isn't a 1:1 map, it might be useful to think of a background script as the “back end” that powers your application.

There are a number of ways to create a Chrome extension, but for the purposes of this tutorial, I'll be using my current project, which consists of a manifest file, a background script, and a forward script.