I had a problem.
If you know me at all, you know this is how 99% of my code lessons start. I have a problem I can’t solve easily, so I dig into it and write about it. In this case, my problem was one of those really stupid, messy things where I needed to force some code to run on certain pages and I didn’t have any access to those pages. Why? Well … let’s just say I wanted to make something like the Hey Girl chrome extension okay? Yes, I need an extension for Google Chrome.
It doesn’t really matter what you’re making, what matters is how easy it is to make a Chrome Extension. It really only needs two files, a manifest.json and then your content files. Let me explain by making Google Red.
Manifest
The manifest is where you list what’s in the Extension. It’s going to have the name, summary, what files to call, when and where. A really simple example would be like this:
{
"name": "Half-Elf's Chrome Extension",
"description": "This is an example extension that doesn't do anything useful at all.",
"version": "1.0",
"manifest_version": 2,
"content_scripts": [
{
"matches": [
"http://www.google.com/*",
"https://www.google.com/*"
],
"css": ["mystyle.css"],
"js": ["myscript.js"]
}
]
}
This is pretty straight forward. Name, description, etc. The value for manifest_version has to be the number 2, no quotes, no matter what. This is mandated by Google. They don’t use it yet, but they will. Then we get to the fun stuff, content_scripts, which is also pretty obvious. Using “matches” says “Only run this when the URL matches…” This is an inclusive match. For a different example, here’s an extension I want to run on every website, but not when I’m in wp-admin:
"content_scripts": [ {
"matches": [ "http://*/*", "https://*/*" ],
"exclude_globs": [ "http://*/wp-admin/*"],
"css": [ "mystyle.css" ],
"js": [ "myscript.js" ]
} ]
You can take this even further and only have it take action at specific actions (like when you make a tab active). The content_scripts documentation is pretty overwhelming, but it has all sorts of options. Today, though, saying we want to match just Google’s pages is okay.
In order to do this, I made a blank file called manifest.json and saved it in my ‘Development’ folder called~/Development/Chrome/extensions/GoogleRed but this doesn’t actually matter. Save it anywhere on your computer. Just know where it is. I also put blank files for mystyle.css and mystyle.js in there because they’re my content files! They’re blank, we’ll get to the real code soon.
Content Files
This is the fun part. The content files are what makes the magic happen and the super cool thing? It’s all basic JS or CSS or HTML. Seriously. Anything you can do in those languages, you can do in an Extesion and call it a day. For example, here’s one I used to strip referrers from URLs on Facebook (I was experimenting):
document.body.innerHTML = document.body.innerHTML.replace(new RegExp('?fb_source=pubv1" target="', 'g'), '" target="');
I set this to only run on Facebook.com and it was exactly what I needed. I admit, there are better JS ways to do this, but I suck at JS still, so this was as far as I got.
The Example
Google actually already made the files, so you can download them from Chromium “Make Page Red” and toss them in your folder. My files are as follows:
mainfest.json
{
"name": "Page Redder",
"description": "Make the current page red",
"version": "2.0",
"permissions": [
"activeTab"
],
"background": {
"scripts": ["myscript.js"],
"persistent": false
},
"browser_action": {
"default_title": "Make this page red"
},
"manifest_version": 2
}
myscript.js
// Copyright (c) 2011 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
// No tabs or host permissions needed!
console.log('Turning ' + tab.url + ' red!');
chrome.tabs.executeScript({
code: 'document.body.style.backgroundColor="red"'
});
});
That’s it. Two files. But how do I get it installed?
Adding it to Google Chrome
Go to chrome://extensions/ in Chrome and you get this kind of view:
See the box on the upper right? Developer Mode? Check it. Now you get extra information!
What interests us the most here is “Load unpacked extension…” but also that ID code jcpmmhaffdebnmkjelaohgjmndeongip is really important. This tells me where the extension lives on my computer, because I can go to ~/Library/Application Support/Google/Chrome/Profile/Extensions/jcpmmhaffdebnmkjelaohgjmndeongip and see all the code for the other extensions. This makes it super easy for me to fork them. Since this is all just for me, and I have no plans to release them, I’m less worried about licenses than I might be, but I still am in the habit of checking what they are and so should you. Your folder locations will vary depending on your OS, and how many Google Profiles you have (I actually have 3 – me, work, fansite).
Click that “Load unpacked extension…” and select the folder:
Once you upload it, you get this:
Now you know where the file is, but also you get a special link for Reload (⌘R) which is a life saver. Click that and any changes you made to your source files are re-installed into Chrome! This is great because Google’s example of making pages redder? Doesn’t work.
Okay, that’s not fair, it does work, just not on every page. It didn’t work on https pages for me until I edited the manifest and changed permissions from "activeTab" to "activeTab", "tabs", "http://*/*", "https://*/*" and then clicking on the magic button worked:
It’s kind of nice to be able to bully things around that way.
I’m just dabbling my toes into the Extensions water, and I find it highly powerful to push Chrome into my paths right now. Have you written any extensions?
