This chapter is from the book
This chapter is from the book
This chapter is from the book
Build on Your Success
Now we take the program that you just built and turn it into a Chrome extension. A Chrome extension is a small program that can be installed in Google Chrome to enhance the user’s Chrome experience. A Chrome extension can be powerful; some companies’ main product is a Chrome extension. The extension that we start in this chapter serves as the basis of the project for the rest of the book.
The first step is to create a new file called manifest.json. This file gives Chrome information about the extension and how it works. JSON is a type of document that stores data in an efficient way and that both computers and humans can easily read. Fill in your manifest.json file to look like Listing 1.10 (remember that every character is important, including the funny-looking characters called curly braces on the first and last lines).
Listing 1.10 Example manifest.json for a Chrome Extension
{
"manifest_version": 2,
"name": "kittenbook",
"description": "Replace photos on Facebook with kittens",
"version": "0.0.1"
}
Now that you have a manifest.json file, you have everything you need to create a Chrome extension. At this point, your extension won’t do anything, but you can still add it to Chrome to make sure your manifest.json file doesn’t have any problems. To add your extension to Chrome, you need to open the Chrome web browser (download it if you haven’t already) and then enter chrome://extensions in the address bar. You should see something similar to Figure 1.7.
)
Figure 1.7 The Chrome Extensions page
Click the checkbox next to Developer Mode (because you’re a developer now!) to be able to add your extension. Now you should see a button that reads Load Unpacked Extension (see Figure 1.8).
)
Figure 1.8 The Chrome Extensions page in Developer mode
When you click that button, you want to select your entire project directory (instead of a single file within the project directory). If you have selected the correct directory and the manifest.json file has no problems, you should see your extension added to the list of extensions (see Figure 1.9).
)
Figure 1.9 Kittenbook making its debut in Chrome
If your manifest.json file has a problem, you get a message like the one in Figure 1.10. If you do see such a message, you should copy the contents of manifest.json and paste them into a JSON validator such as http://jsonlint.com/, which shows you just where your error is and how to fix it.
)
Figure 1.10 When manifest.json is busted
Reference Your JavaScript in manifest.json
After the kittenbook extension is successfully installed, you are ready to make it actually do something. You already have a JavaScript file written, so all you need to do is make that JavaScript available on Facebook.com. We ran into this problem earlier when we tried to add the JavaScript file to kittenbook.html. To solve that problem, we had to tell kittenbook.html about the JavaScript file. In this case, we need to tell manifest.json about the JavaScript file. We also need to tell manifest.json the website to which our JavaScript file should be added. We can do this by using a property called content_scripts (see Listing 1.11). Content scripts are JavaScript files that should be added to the content of a given web page or set of web pages.
Listing 1.11 manifest.json with Content Scripts
{
"manifest_version": 2,
"name": "kittenbook",
"description": "Replace photos on Facebook with kittens",
"version": "0.0.1",
"content_scripts": [
{
"matches": ["*://www.facebook.com/*"],
"js": ["kittenbook.js"]
}
]
}
With the addition in Listing 1.11, our extension now adds kittenbook.js ("js": ["kittenbook.js"]) to every page that contains www.facebook.com in the URL ("matches": ["*://www.facebook.com/*"]). For your extension to pick up the changes you made to manifest.json, you need to reload your extension, which you can do by clicking the Reload link in Figure 1.9.
Let It Run!
If your extension has successfully reloaded, you can make one last change to kittenbook.js to make the greeting look a little nicer (see Listing 1.12).
Listing 1.12 Updated kittenbook.js for Use in the Chrome Extension
var userName = prompt('Hello, what\'s your name?');
document.body.innerHTML = '<h1>Hello, ' + userName + '!</h1>';
Adding the <h1> tag styles the greeting as a heading (big and bold text). Now reload the extension and open Facebook to see what happens. You should see your prompt window open and then see something similar to Figure 1.11.
)
Figure 1.11 Hello, Facebook!
That was amazing—you just changed Facebook. The Facebook is showing your greeting. That is really cool but not useful at all. In fact, the extension we just built will prevent you from seeing any real Facebook page. That’s really annoying. While I was building the extension, my wife tried to check Facebook on my computer; she was not particularly impressed with the greeting that took over her Facebook page. When you’re not working on your extension, you can disable it by unchecking the Enabled check box (refer to Figure 1.9).