Lecture 9 Chrome Extensions

Transcription

1 Lecture 9 Chrome Extensions 1 / 22

2 Agenda 1. Chrome Extensions 1. Manifest files 2. Content Scripts 3. Background Pages 4. Page Actions 5. Browser Actions 2 / 22

3 Chrome Extensions 3 / 22

4 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

5 The Manifest File 5 / 22

6 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

7 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

8 Quick Example JSON: { "foo": 1, "bar": ["a", "b", "c"] } Not JSON: { foo: 1, bar: ['a', 'b', 'c'] } 8 / 22

9 Manifest.json An example manifest.json file. 9 / 22

10 Content Scripts 10 / 22

11 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

12 Loading Content Scripts Loading content scripts is easy. All that's required is a few lines in manifest.json : "content_scripts": [ { "matches": [" "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] } ] matches is an array of strings that tells Chrome which pages to inject your script on. css and js are the actual scripts to inject. They are injected in order, which lets you depend on libraries like jquery. 12 / 22

13 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

14 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

15 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

16 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

17 Adding a Background Page, pt. 1 First, we add the appropriate lines to manifest.json : "background": { "scripts": ["background.js"], "persistent": false }, 17 / 22

18 Adding a Background Page, pt. 2 Then, we add whatever we want to background.js. 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!). 18 / 22

19 We should be able to try this out. I've set up a background script in the page-action-start 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. 19 / 22

20 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

21 Actually writing the page action is pretty straightforward. Let's do it now! We'll use the chrome.storage 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. 21 / 22

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