Chrome Extnsions for Hackers

8/8/2019 Chrome Extnsions for Hackers

1/61

Chrome Extensions

for Web HackersScandinavian Web Developer Conference 2010, Stockholm, Sweden

Mark Wubben

A talk about Chrome Extensions, why theyre so great for web hackers and how to buildthem.

Given at the Scandinavian Web Developer Conference on June 2nd, 2010 in Stockholm,Sweden.

Licensed under Creative Commons Attribution-Share Alike 2.5http://creativecommons.org/licenses/by-sa/2.5/dk/

Photo by Steve Peck, http://www.flickr.com/photos/stevepeck/4615314670/. CC-BY-2.0.


2/61

Im a Web HackerIm a Web Hacker. That might scare some people, but I dont hack highway signs or breakinto computers. I (try to) build cool shit.

I think youre web hackers as well, otherwise, why would you be here? But if youre a webhacker, why limit yourself to building websites? Why not hack other systems? Build, say,browser extensions?

Photo by James Kim, http://www.flickr.com/photos/underbiteman/2638246638/. CC-BY-2.0.


3/61

Add-ons, Plugins, ExtensionsMy question to you is, have you ever build a browser extension? Did you try? Did you lookinto it and got scared? Thats been my storyFirefox extension have always looked toobewildering. Youd have to know about RDF, XUL, XPCOM. You had to restart your browserevery time you wanted to try something. Bah!

Now, this talk is about Google Chrome. And this time, its diferent.

Photo by Jon Fife, http://www.flickr.com/photos/good-karma/652486713/. CC-BY-SA-2.0.


4/61

Open Web TechnologySee, Chromes Extension platform is based on Open Web Technology. Its based on

JavaScript, mostly. But also HTML and CSS. And the cool new HTML5ish APIs like localStorageor geo-location.

Lets dive in.

Photo by Kevin Dooley, http://www.flickr.com/photos/pagedooley/4126491780/. CC-BY-2.0.


5/61


6/61

Developer mode lets you load a new extension from your local file system. You can alsopackage extensions for release or force the installed extensions to be updated. Normally thisis done automatically when the browser is restarted.


7/61

So, what is an extension?!

Now the obvious question is, what *is* an extension?!


8/61

An extension is a folderwith a manifest.json file

In essence, an extension isnt much more than a folder that contains a manifest.json file.

Lets try loading a few folders as an extension.


9/61

{

"name":"SWDC For The Win!",

"version":"1.0"}

manifest.jsonAnd theres the manifest for our very simple extension. These are the only two requiredproperties, a name for your extension and a version number.

Admittedly, this extension doesnt do much.

For more about the manifest file, see http://code.google.com/chrome/extensions/manifest.html.


10/61

Extensions can havecontent scripts.

One of the things a Chrome Extension can do is to run scripts on the pages you visit. Theseare content scripts and should be familiar, because its a concept from the Firefox-basedGreasemonkey add-on.


11/61

Aaron Boodman / GreasemonkeyIn fact, the guy who invented Greasemonkey, Aaron Boodman, has been at Google for a fewyears now and is one of the guys behind the new Extensions platform. To put it diferently,Chrome Extensions is Greasemonkey on steroids.

Photo by Mark Wubben, http://www.flickr.com/photos/novemberborn/230693761/. CC-BY-

SA-2.0.


12/61

Fixing Twitter openinglinks in new windows

You might have noticed how external links on Twitter always open in a new window. I findthis annoying, so I figured Id write an extension to fix it.


13/61

{

"name":"Twitter Fixer", "version":"1.0",

"description":"Fix the external links",

"content_scripts":[{

"matches":["http://*.twitter.com/*","https://*.twitter.com/*"],

"js":["dojo.js","fixer.js"]

}]

}

manifest.jsonThe manifest for our new extension, dubbed Twitter Fixer.


14/61

{

"name": "Twitter Fixer","version": "1.0",

"description":"Fix the external links",

"content_scripts": [{

"matches": ["http://*.twitter.com/*","https://*.twitter.com/*"],

"js": ["dojo.js", "fixer.js"]

}]

}

manifest.jsonNote how Ive added a description.


15/61

{


"description": "Fix the external links",




}]

}

manifest.jsonYou can specify multiple content scripts per extension.


16/61

{




"matches":["http://*.twitter.com/*","https://*.twitter.com/*"],


}]

}

manifest.jsonA content scripts needs to match a page. This is done through match patterns. Here wespecify our extension will run on any page or subdomain on twitter.com, over HTTP as well asHTTPS.

Keep in mind that the user is warned about the sites you might match. The more restrictive

your match pattern, the better.

To learn more, see http://code.google.com/chrome/extensions/match_patterns.html.


17/61

{






}]

}

manifest.jsonA content script itself can exist of any number of JavaScript files. Theyre loaded in the sameorder as you specify in the manifest. Here I load a version of the Dojo Toolkit and my owncode.

You can also specify CSS files that need to be added to the page your content script runs on.

To learn more, see http://code.google.com/chrome/extensions/content_scripts.html.


18/61

dojo.query("a[target=_blank]").attr("target", "");

fixer.jsA content script itself can exist of any number of JavaScript files. Theyre loaded in the sameorder as you specify in the manifest. Here I load a version of the Dojo Toolkit and my owncode.

You can also specify CSS files that need to be added to the page your content script runs on.

To learn more, see http://code.google.com/chrome/extensions/content_scripts.html.


19/61

Demo time


20/61

Isolated WorldsChrome has learned from the security problems that existed with Greasemonkey, and evenwith Firefox add-ons as a whole. Each extension lives in a so-called isolated world,meaning its isolated from other extensions save for a few tightly controlled communicationbridges.

Photo by F.H. Mira, http://www.flickr.com/photos/fhmira/3204656258/sizes/o/. CC-BY-SA-2.0.


21/61

Content scripts run inseparate contexts

For example, the JavaScript inside your content scripts is evaluated in a separate contextfrom the page JavaScript. This means your code wont afect the page code, and vice versa.You cant directly call page code, and it cant directly call your code.


22/61

Shared DOM

Luckily the page document is shared between the various content scripts that might berunning on it. That way, you can change it!


23/61

Communicating with pageJavaScript

But with these isolated worlds, how can your content scripts talk to the page JavaScript? Well,youve got access to the DOM, so you can insert your own JavaScript into the page! And, youcan use DOM events so the inserted JavaScript can talk back to you.


24/61

document.documentElement.addEventListener(

"SWDCNotify",

function(){ alert("Notified!"); }, false

);

var s=document.createElement("script");

s.textContent='function notifyContentScript(){\

var evt = document.createEvent("Event");\

evt.initEvent("SWDCNotify", false, false);\

document.documentElement.dispatchEvent(evt);\

}';document.body.appendChild(s);

communication.jsThis sets up a content script that insert the `notifyContentScript` method into the page.When this method is called, a custom DOM event is dispatched on the document element,which is used to notify the content script.

While you cant send data along with the event, you can store it in the DOM. The content

script can then look it up.


25/61


"SWDCNotify",

function(){ alert("Notified!"); }, false

);

var s = document.createElement("script");

s.textContent = 'function notifyContentScript(){\





communication.js


26/61


"SWDCNotify",

function(){ alert("Notified!"); },false

);

var s=document.createElement("script");

s.textContent='function notifyContentScript(){\





communication.js


27/61


"SWDCNotify",

function(){ alert("Notified!"); },false

);

var s = document.createElement("script");

s.textContent = 'function notifyContentScript(){\





communication.js


28/61

Demo time


29/61

Content scripts are limited.Background pages!

Content scripts are fairly limited though. They exist only as long as the page they run onexists. They dont have access to any permanent storage, so you cant configure them. Norcan they talk to other websites, so you cant look up anything through an API.

Luckily, Chrome Extensions let you build background pages. These are normal HTML pages,

except that theyre not rendered. Theyre loaded when the browser starts, and wont beunloaded until its closed.

Lets build a more complicated extension.


30/61

Expanding bit.ly URLs onTwitter

Due to character constraints URLs in Tweets are often shortened. But, Id like to see whereIm going! Lets write Chrome Extension that can expand bit.ly URLs.

{


31/61

{

"name":"Twitter Fixer",

"version":"1.0",

"description":"Expands shortened URLs",

"permissions":["http://api.bit.ly/*"],

"background_page":"background.html",


"run_at":"document_end",

"matches":["http://*.twitter.com/*",

"https://*.twitter.com/*"],


}]}

manifest.json

{
http://api.bit.ly/*http://api.bit.ly/*


32/61

{

"name": "Twitter Fixer",

"version": "1.0",

"description": "Expands shortened URLs",

"permissions":["http://api.bit.ly/*"],



"run_at": "document_end",

"matches": ["http://*.twitter.com/*",



}]}

manifest.jsonIve made two major modifications to the manifest.json we used previously. First is loadingthe background page, this is done using the background_page property whose value is therelative path (from the manifest.json file) to the background page. By convention this isnamed background.html, but you can name it whatever you like.

The other change is that Im now requesting permission to talk to the Bit.ly API. Chromeforces the extension developer to request permission for almost anything. When the userinstalls your extension hes made aware of what youre extension will have permission to,therefore making it harder for nefarious Extension developers to sneak bad stuf into theirextensions without the users knowing about it.

{


33/61

{

"name": "Twitter Fixer",

"version": "1.0",

"description": "Expands shortened URLs",

"permissions": ["http://api.bit.ly/*"],

"background_page": "background.html",


"run_at":"document_end",




}]}

manifest.jsonAnother change I made is to specify the `run_at` property for the content script. This way Ican make sure it runs right after the page document has finished parsing, so we dont haveto wait too long before we can expand the bit.ly URLs.


34/61

var parsed= parseUrls();

chrome.extension.sendRequest(

parsed.hashes,

function(mapping){

for(hashin mapping){

parsed.links[hash].forEach(function(link){

link.textContent=mapping[hash];

});

}

}

);

fixer.jsThe code to find the URLs in the page isnt terribly important so Ive not put it in this slide.Suce to say, `parsed` contains a list of bit.ly hashes, and a mapping from a hash to one ormore link elements.


35/61

var parsed = parseUrls();


parsed.hashes,

function(mapping){

for(hash in mapping){


link.textContent = mapping[hash];

});

}

}

);

fixer.jsThe content script needs to talk to the background page to expand the hashes. This is donethrough the `chrome.extension.sendRequest` API.


36/61

var parsed = parseUrls();


parsed.hashes,

function(mapping){

for(hash in mapping){


link.textContent=mapping[hash];

});

}

}

);

fixer.jsAlso note how I can use forEach on an array. Chrome has a fully up-to-date JavaScript engineso native forEach is available.

Same for using textContent to set the link text value.


37/61

chrome.extension.onRequest.addListener(

function(hashes, sender, sendResponse){

// sendResponse(mapping);

}

);

background.htmlI wont go into the specifics of how to talk to bit.ly and get the expanded URLs.


38/61

chrome.extension.onRequest.addListener(

function(hashes, sender, sendResponse){

// sendResponse(mapping);

}

);

background.htmlThe important bit is how you register a handler for requests from the content script. You getthe request object, a reference to the tab from which the request was sent, and a callbackfunction to call once you have a response.

This communication mechanism is completely asynchronous.


39/61

Demo time


40/61

DebuggingWeb Inspector

You can easily debug your extension using the Web Inspector you would normally use todebug your web pages. You can set break points or use the debugger keyword. An inspectorfor the background page can be opened by clicking on the background.html link in theExtensions page (if you have Developer mode enabled).

You may also notice how the background page is actually at chrome-extension://some-unique-identifier/background.html. This is the domain it runs in, so the extension canpiggyback on the normal same-origin restrictions!


41/61

Extension configuration,persistent storage

When talking about the limitations of content scripts, I promised you permanent storage andextension configuration. Lets have a look how thats done.


42/61

Combining the extensions,with options

Lets combine the two extensions weve made into a single extension. Since not everybodywants the external links on Twitter to be opened in a new window, well add an options pageso this can be customized.

{

"name": "Twitter Fixer"


43/61

name : Twitter Fixer ,

"version":"1.0",

"description": "Fix the external links ", "permissions":["http://api.bit.ly/*"],


"options_page":"options.html",

"content_scripts":[{ "run_at":"document_end",

"matches":["http://*.twitter.com/*",



}]

}

manifest.jsonOur new manifest.

{

"name": "Twitter Fixer"


44/61

name : Twitter Fixer ,

"version": "1.0",

"description": "Fix the external links ","permissions": ["http://api.bit.ly/*"],

"background_page": "background.html",

"options_page":"options.html",

"content_scripts": [{"run_at": "document_end",




}]

}

manifest.jsonChrome has special support for an Options page. Itll show up under the extension namewhen its listed in the Extension page, and simply is a HTML page you provide.

I wont show the changes made to combine the extensions, but in general, the content scriptnow talks to the background page to see which feature is enabled. The background page

looks it up in localStorage, which is where the options page has saved the configuration.


45/61

Demo time


46/61

Chrome APIs

Chrome provides a ton of proprietary APIs for interacting with the user. A quick overview.


47/61

Page actions

Browser actionsPopups

You can add an action button to the browser Chrome. If the action button is specific to apage, you can use a Page action. This can be controlled to only show up when its necessary.Browser actions are always visible. An extension cannot specify both a page and a browseraction.

You can use an image as the action icon, or use output from the Canvas API. Browser actionscan have badges that communicate some information, say an unread messages count.

When the user clicks on a page/browser action, you can show a tooltip.


48/61


49/61


50/61

This is the Extensions page in Chrome. It shows you which extensions you have installed. Youcan disable or uninstall them, see their web page, allow them to run in Incognito mode.

At the bottom is a link to the Google Chrome Extensions Gallery. At the top is an option toenable Developer mode.


51/61




52/61

Desktop Notifications

You can show Desktop Notifications, provided you requested permission to do this.


53/61




54/61

History

Bookmarks

You can also interact with the browser history and the users bookmarks. Plus, you canoverride the History page to provide a better interface.


55/61

Tabs

Windows

Chrome also lets you manipulate open tabs and windows. You can override the new tab page.

You cant override the Extensions page though, for obvious reasons.


56/61

Publishing

But, aside from all these capabilities, perhaps the most important thing is having otherpeople use your extension!

So far weve loaded extensions from your local machine. Lets see how we can package thoselocal files so that anybody can install your extension.


57/61

Demo time

You can pack your extension using the Pack extension option on the Extensions page (inDeveloper mode). This takes the path to your extension and a possible private key file.

The end result is a `.crx` file, which in essence is a signed ZIP file. Youll also get a `.pem`file which contains the private key for your extension. This is important, the private key isused to sign the ZIP file, and Chrome will refuse to update your extension if the newextension file was not signed with the same private key.


58/61

Gallery

Chrome also has a Gallery where you can distribute your extension. They manage packagingand updating your extension, and will also keep track of the private key for you. This ofcourse is the best place for your extension, though youre free to host it yourself.

In the latter case, youll have to set up some extra files on your server to support auto-updating of your extension.

Questions?


59/61

Q

Mark Wubben

supercollider.dk & novemberborn.net

twitter.com/novemberborn

Slides: 11born.net/swdc

Licensed under Creative Commons Attribution-Share Alike 2.5

And that concludes this talk. Thank you for your attention.
http://creativecommons.org/licenses/by-sa/2.5/dk/deed.en_UShttp://creativecommons.org/licenses/by-sa/2.5/dk/deed.en_US


60/61

Steve Peck

James Kim

Jon Fife

Kevin Dooley

F H Mira

Matt Jones

Jeff Kubina

Many, many thanks to the wonderful people on Flickr who licensed their photos underCreative Commons.

Photo by JefKubina, http://flickr.com/photos/kubina/903033693/. CC-BY-SA 2.0.


61/61

Now, as Matt Jones would put it, GET EXCITED and MAKE THINGS!

Illustration by Matt Jones, CC-BY-SA-NC, http://www.flickr.com/photos/blackbeltjones/3365682994/.

Chrome Extnsions for Hackers

Documents

Transcript of Chrome Extnsions for Hackers