Lecture 9
Chrome Extensions
1 / 22
Agenda
1. Chrome Extensions 1. Manifest files
2. Content Scripts 3. Background Pages 4. Page Actions
5. Browser Actions
2 / 22
Chrome Extensions
3 / 22
What are browser extensions?
Most of the code we've looked at so far runs on a page in the browser
But a browser extension augments the functionality of the browser itself
Switching tabs, managing downloads, creating quick-access buttons, etc.
Browser extensions could be written in any language...
...but it's much easier to write them in JavaScript, since they'll need to inject JS onto pages anyway
4 / 22
The Manifest File
5 / 22
Why do we need a manifest file, anyway?
The manifest file tells the browser what
permissions your extension will need, and where to look for its scripts
Basically a road map for your application In Chrome, the manifest file is called
.
manifest.json
6 / 22
Quick Refresher: JSON
JSON is JavaScript Object Notation. A JSON file basically consists of a single JS object, with three exceptions:
1. Functions are not allowed.
2. All strings must use double quotes.
3. Property names must be strings.
7 / 22
Quick Example
JSON:
Not JSON:
{ "foo": 1,
"bar": ["a", "b", "c"] }
{ foo: 1,
bar: ['a', 'b', 'c'] }
8 / 22
Manifest.json
An example manifest.json file.
9 / 22
Content Scripts
10 / 22
Content Scripts
Content scripts are JavaScript files that are injected into HTML pages in the browser. They can manipulate the DOM and do everything that you'd expect to be able to do in the browser environment.
In fact, content scripts can actually do MORE than a regular browser script. They can hook into all of the Chrome APIs (although indirectly) by passing messages to the extension itself. Normally, that's impossible for a webpage to do!
11 / 22
Loading Content Scripts
Loading content scripts is easy. All that's required is a few lines in :
is an array of strings that tells Chrome which pages to inject your script on. and are the actual scripts to inject.
They are injected in order, which lets you depend on libraries like jQuery.
manifest.json
"content_scripts": [ {
"matches": ["http://www.google.com/*"], "css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"] }
]
matches
css js
12 / 22
Content Scripts
We now have enough knowledge to start working on a simple extension. You may have heard of the popular extension "Cloud2Butt", which replaces the word
"cloud" with "butt" for hilarious results. We'll be building a similar extension that replaces the word
"Internet" with "series of tubes."
13 / 22
Target Page
This is a test. You're viewing this page on the Internet.
The Internet, as you know, is a series of tubes.
I'm very excited about the "Internet of Things."
14 / 22
Good stuff.
But let's say we want to add a button that displays a popup that lets you add your OWN replacements. That way you can make your browser behave like this XKCD comic!
To get there, let's move on to the next topic:
background pages.
15 / 22
Background Pages
Background pages are also known as event pages.
They wait in the background for events, then run event handlers when the events are triggered.
Background pages will also run when the extension is first installed (this is how they register for events in the first place).
16 / 22
Adding a Background Page, pt. 1
First, we add the appropriate lines to manifest.json:
"background": {
"scripts": ["background.js"], "persistent": false
},
17 / 22
Adding a Background Page, pt. 2
Then, we add whatever we want to . In this case we want to add a page action, which is Chrome's fancy name for the little button that we'll want users to press.
Here's how we'd do that (unfortunately, Chrome's API is too verbose to fit on these slides!).
background.js
18 / 22
We should be able to try this out. I've set up a
background script in the branch of
the example repository. Let's see what happens when I load the extension. It should print a console message, which will only be viewable if we "inspect views" from the chrome://extensions page.
page-action-start
19 / 22
The Page Action
Finally, let's set up the page action. As you've probably guessed, this will first require us to add something to
:
manifest.json
"page_action": {
"default_icon": "popup/icon.png", "default_title": "Series of Tubes", "default_popup": "popup/popup.html"
},
20 / 22
Actually writing the page action is pretty
straightforward. Let's do it now! We'll use the API as well, so that the user's
preferences are saved on every device where they log in to Chrome. As you'll see, it takes surprisingly little code to achieve that functionality.
chrome.storage
21 / 22
Final Note: Browser Actions
The very-observant might notice that I had one more thing to cover today: browser actions. Luckily, a
browser action is nothing but a page action that
always shows up! It's also known as a browser button, and you can see one if you install Google Hangouts, for example.
So since you know what a page action looks like, you'll easily be able to translate it to a browser action if you ever need to.
22 / 22
