Tutorial - Creating a Chrome extension with automatic script injection

Recently I started working on a Chrome extension for Reddit (which you can find here), and I hit a bit of a snag as far as getting it started. After some googling and random stack overflow pages, I was able to get going, but for those who just want to skip the homework, below is a quick guide to get you going.

The goal is to setup a Chrome extension that will, on every page, inject and run your JavaScript (which in this case, will make every page's background red).

1. First, setup a directory and create some empty text files named "onLoad.js", "manifest.json", and "script.js".
2. The manifest.json file is the configuration for your chrome extension. The following manifest is setup to load your script, "onLoad.js", on all pages. The injected script is "script.js", and it is added to "web_accessible_resources" so that it's allowed to be used. Finally, make sure to use manifest_version 2, which is the latest version (1 is deprecated).
   
   

   	{
   	"name": "MyFirstExtension",
   	"description": "An extension that injects some javascript on every page",
   	"version": "2.0",
   	"permissions": [
   	],
   	"content_scripts": [
   	{
   	"matches": ["<all_urls>"],
   	"js": ["onLoad.js"]
   	}
   	],
   	"manifest_version": 2,
   	"web_accessible_resources": ["script.js"]
   	}

   view raw manifest.json hosted with ❤ by GitHub
3. onLoad.js is loaded on every page, but unfortunately it lives in a separate area than the actual page. We want to actually inject, or embed, script right into web page. That way we can directly access elements and have the injected script behave as if it is a native part of the page. We do this by telling onLoad.js to find and insert our JavaScript file right into the current page on every page load.
   
   

   	// Inject script on every page load
   	var script = document.createElement('script');
   	script.src = chrome.extension.getURL('script.js');
   	document.body.appendChild(script);

   view raw onLoad.js hosted with ❤ by GitHub
4. We're almost done, all that's left is to define our script and load the extension into Chrome. For now we'll do something simple; we will change the background of every page to red.
   
   

   document.body.style.backgroundColor="red";

   view raw script.js hosted with ❤ by GitHub
5. Finally, lets install and test this extension. Follow the following steps.
1. In Chrome, go to Settings->Extensions
2. Check the "Developer mode" checkbox
3. Click "Load unpacked extension..."
4. Select your extension's folder and press OK
5. After you are done testing, to disable, either uncheck the "Enabled" checkbox or click the trash can to permanently remove it
6. Now that the extension is loaded, go to google.com and see the background change to red. Good job!