Overview

Chrome extensions have pretty good documentation and pretty good community support. Naturally, you might expect that between docs and forums that you can get a small project up and running quickly.

Unfortunately, sometimes minor simple tasks can get lost in the weeds. Documentation usually only covers the basic, small, happy flow cases and forums usually only ask about difficult, large problems. Well what about issues of medium size and complexity? Leave that to the bloggers!

Here we’ll take a look at how to create a chrome extension that uses a Content Script to change the background color of any page using jQuery.

Manifest.json

First things first. You need a way to tell chrome what your intentions are, what components come with your extension, and when they apply. To do this, we’ll use a manifest file.

The manifest file contains some JSON formatted data that Google knows how to read. There is a lot of boiler plate info that you can explore, but, for our purposes, we want to pay special attention to the content script section:

{
  "manifest_version": 2,
  "name": "Page Changer",
  "version": "0.1",
  "description": "Page Changer",
  "icons": { "16": "Icons/Logo16.png",
             "32": "Icons/Logo32.png",
             "48": "Icons/Logo48.png",
            "128": "Icons/Logo128.png" },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["jquery.min.js", "script.js"]
    }
  ]
}

The content script must specify two things:

1. The pages against which to run the code
2. The external code files to run.

In this case, we’ve specified that we want to our content to run whenever the web url matches the pattern *://*/*, which is to say for all protocols, for all domains, for all pages (in other words, run everywhere).

If you just wanted to target google.com or any of it’s content pages, then you could put that there.

The second thing we’ve specified is which files to run and in which order. First we’ll load jQuery from a local copy that we deploy, and next we’ll run a file called script.js that we’ll look at in a second.

Script.js

In this simplified example, let’s say we just want to change the background color of the current page for a very obvious example of whether or not all the right components have been called. In a real world example, you might want to find all the links in the page and turn them a particular color. Or attach some code to any images on the page to allow you to easily email them. Whatever you want!

For now, let’s just run the following script which will find the body element and use the css() method in jQuery to apply the value blue to the background property:

$(function() {
	$("body").css("background","blue");
});

Note: Just so I don’t get comments about it. If this was the only change you wanted to make to the page, you can and should do this purely with CSS. The idea was to add jQuery to a page in a trivial example so you can implement your own functionality later.

Deployment

To run the extension, do the following steps:

1. In Chrome, Open the Browser Menu
2. Click on Tools, and then Extensions
3. Make sure Developer Mode is checked (usually in the top right)
4. Click Load Unpacked Extension and select the folder that contains your manfiest and extension files.

That’s it! Go to any affected page and hit refresh to see your changes applied:

To get started, you can download all the files you need to run this extension from the SkyDrive folder below.

If you’ve made changes and are happy with them, you can even deploy to the Chrome Extension Store for other people to use after getting a developer account.

Here’s a couple of extensions I’ve built for chrome, along with their source code if you’re looking for examples. Feel free to leave comments on GitHub with any suggestions or bugs using GitHub’s issue tracker.

• Link Finder - Find all links to named anchors within the page so you can create descriptive links to content within a page
  
  • Store Link
  • Git Hub
• Copy Tabs - Creates a keyboard shortcut (Ctrl + Shift + C) which copies links for selected tabs
  
  • Store Link
  • Git Hub

---

Upcoming: Part 2 - How to Insert HTML, CSS, and JavaScript into any page using a browser action.

The Problem

Let’s say you want to have a set of mutually exclusive check boxes and want to implement that logic on the client so that the user can get immediate, responsive feedback about their selection choices. Normally, mutual exclusivity would be enforced with radio buttons ensuring user familiarity with the interface selections. However, in this specific case, let’s suppose that within a specific sub category, a user can select as many options as they want, but cannot select options from more than one subcategory. Imagine setting contact preferences as either No or some type of Yes. Or perhaps there is a Online food order form where certain topping choices are mutually exclusive between categories.

Solution

You can bind JQuery to the click event of your checkboxes and use that event to ensure that checkboxes in any other groups are set to checked=false.
First group each distinct set of checkboxes inside a set of <div></div> tags:

<div id="opt1">  
  <input id="a" type="checkbox">  
  <input id="b" type="checkbox">  
</div>  

We can monitor for clicks to any of the child items inside of the div tag, by using it’s ID as our initial selector $('#opt1') and looking for a Click event on that div. This will fire when any element inside of that div tag is clicked.

Next, we’ll check if the event that fired the event has a checked property set to true, by chekcing if (event.target.checked). This will prevent clicks on the label from processing our code or de-selections in a particular category from running un-neccessary code.

Finally, we’ll want to go through all check box categories and remove any check marks from any checkboxes that they contain. To do this, we’ll first start by selecting the ID from an alternate div tag. Then we’ll call find('input') to find all child items of type Input. To each of these items, we’ll call removeAttr('checked') to remove the checked attribute from each one.

$('#yes').click(function (event) {  
  if (event.target.checked) {  
    $('#no').find('input').removeAttr('checked');  
  }  
}); 

Source Code