Download - Chrome Extensions for Hackers
Sept 9, 2009 Many many extensions
DOCS developer.chrome.com/
extensions
STORE chrome.google.com/webstore/
category/extensions
Manipulate any (set of) pages
Provide notifications
Deep web app integration
Painless Payments for Droids Tim Messerschmidt
Auto updating
OS independent
Step up to chrome apps
The manifest
Manifest.json { "name": "Demo Extension", "version": "0.0.1", "manifest_version": 2 }
Chrome://extensions
THE BARE BASICS
UI BUILDING BLOCKS
BROWSER ACTIONS { "name": "My extension", ... "browser_action": { "default_icon": { // optional "19": "images/icon19.png", // optional "38": "images/icon38.png" // optional }, "default_title": "Google Mail", // optional "default_popup": "popup.html" // optional }, ... }
UI BUILDING BLOCKS
BROWSER ACTIONS
Icon Badge Tooltip popup
UI BUILDING BLOCKS
PAGE ACTIONS { "name": "My extension", ... "page_action": { "default_icon": { // optional "19": "images/icon19.png", // optional "38": "images/icon38.png" // optional }, "default_title": "Google Mail", // optional "default_popup": "popup.html" // optional }, ... }
UI BUILDING BLOCKS
PAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed
There can only be one
UI BUILDING BLOCKS
Desktop notifications { "name": "My extension", "manifest_version": 2, ... "permissions": [ "notifications" ], ... }
UI BUILDING BLOCKS
Desktop notifications
UI BUILDING BLOCKS
Options page { "name": "My extension", ... "options_page": "options.html", ... }
UI BUILDING BLOCKS
Override pages
omnibox
Context menus
html
ADVANCED INTERACTION
xhr
ADVANCED INTERACTION
permissions { "name": "My extension", ... "permissions": [ "http://www.google.com/", "https://www.google.com/", "notifications" ], ... }
Chrome.* apis developer.chrome.com/extensions/api_index.html
ADVANCED INTERACTION
xhr var xhr = new XMLHttpRequest(); xhr.open("GET", "http://api.example.com/data.json", true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { // JSON.parse does not evaluate the attacker's scripts. var resp = JSON.parse(xhr.responseText); } } xhr.send();
ADVANCED INTERACTION
Content scripts
ADVANCED INTERACTION
Content scripts
{ "name": "My extension", ... "content_scripts": [ { "matches": ["http://www.google.com/*"], "css": ["mystyles.css"], "js": ["jquery.js", "myscript.js"] } ], ... }
ADVANCED INTERACTION
Content scripts
No interaction with JS on page
No access to most chrome.* apis
ADVANCED INTERACTION
DOM
CONTENT SCRIPT INLINE JS
Shared dom with different scopes
ADVANCED INTERACTION
Content scripts
var element = document.createElement("script"); element.type = "text/javascript"; element.text = "makeCall();"; document.body.appendChild(element);
ADVANCED INTERACTION
Background pages
ADVANCED INTERACTION
Background/event pages
{ "name": "My extension", ... "background": { "scripts": [”eventpage.js"], "persistent": false }, ... }
ADVANCED INTERACTION
Eventpage.js
chrome.browserAction.onClicked.addListener(function(tab) { // do something cool });
Chrome.* apis developer.chrome.com/extensions/api_index.html
ADVANCED INTERACTION
STORAGE
ADVANCED INTERACTION
chrome.storage vs chrome.localStorage
synced vs not synced
type safe vs not type safe
async vs sync
Advanced interaction
messaging
ADVANCED INTERACTION
messaging contentscript.js ================ chrome.runtime.sendMessage({greeting: "hello"}, function(response) { console.log(response.farewell); });
background.html =============== chrome.tabs.getSelected(null, function(tab) { chrome.tabs.sendMessage(tab.id, {greeting: "hello"}, function(response) { console.log(response.farewell); }); });
ADVANCED INTERACTION
messaging chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { console.log(sender.tab ? "from a content script:" + sender.tab.url : "from the extension"); if (request.greeting == "hello") sendResponse({farewell: "goodbye"}); });
popups Options pages
Content scripts Background pages
Advanced interaction
deployment
Advanced interaction
Chrome://extensions
Don’t use “pack extension”
Advanced interaction
chrome.google.com/webstore/developer/dashboard
Zip + upload
One off $5 signup fee
DOCS developer.chrome.com/
extensions
Gem rubygems.org/gems/crxmake