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