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.
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.
blog comments powered by Disqus