I have always been curious about what it takes to write a Chrome extension. Turns out that it’s really simple. Here’s how I created and published an extension called TruthInBrowsing, which you can download from the Chrome Web Store. The extension, which is designed to make us all more honest browsers, replaces all occurrences of phrases like “I have read and agree to the terms of service” with “I haven’t read but nevertheless agree to the terms of service”.

Here’s how you can go about creating your own Chrome extension.

 - 

1. Create A Manifest File
First, create a new folder with the desired name of your extension. Then, create a file called “manifest.json” in that directory. The manifest will contain all of the basic information about your extension — name, version, etc. — and dictate its behavior. Here’s the manifest for TruthInBrowsing (TIB):

You can guess what most of the manifest is for, but the permissions and content_scripts are probably the most interesting. You can start reading up on permissions here and content_scripts here. In addition to running scripts (which is what content_scripts does), extensions can also add buttons next to the address bar that pop up an HTML page, add new items to Chrome’s context menus, and so on.

Ours, however, will run a script on every webpage that a user visits. When set to document_end, the run_at parameter specifies that the script will be run once a page has been parsed but before resources like images have loaded. You can also run scripts before the page is parsed, or after a page is fully loaded. See here for more details.

 - 

2. Write the Script
Next, create a javascript file called “script.js” in your master directory. The script for my extension is actually very simple. Here goes:

The code finds and replaces all occurrences of the phrase “I have read and agree to” with “I haven’t read but nevertheless agree to”. The production version in the Chrome store matches several additional variants, but you get the idea. Not that you just need the one line in your script.js file — no need for any <script> tags or the like. 

 - 

3. Prepare Your Icons
To get ready for prime time, you will need icons of various sizes (128px, 48px, and possibly 16px). Just save these to the same folder you’ve been working with, and make sure the filenames match those specified in your manifest.

 - 

4. Test Your Extension
To test your extension locally, go to the customization menu in Chrome, then click on Tools -> Extensions. Once there, tick the “Developer mode” box, hit “Load unpacked extension…”, and select the directory where you saved the manifest, script, and icons. To verify that the find and replace is working, check out this page from Urban Dictionary. Make sure it says “I haven’t read but…” instead of “I have read and…”

 - 

5. Create a .ZIP, Upload to the Chrome Web Store
This part is clearly optional, especially since it costs $5 — perhaps to keep hobbyists from uploading totally worthless* extensions to the Chrome Web Store. Anyhow, now that your extension is working, cruise over to the Chrome Store Developer Dashboard. Hit “Add new item”, upload your .ZIP file, work your way through the registration process, and you’re done.

 - 

* I do not recommend that anyone actually install my extension. Aside from the fact that it’s useless, it could get in the way of normal browsing. Writing this post, for example, was impossible until I turned off the extension.

** Also, in case anyone else is looking, I found this hack that lets you embed a Gist in Tumblr.