No content

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 

No content

The manifest Manifest.json {      "name":  "Demo  Extension",      "version":  "0.0.1",      "manifest_version":  2   }   Chrome://extensions 

THE BARE BASICS 

No content

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 

No content

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   

No content

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 

No content

DOCS developer.chrome.com/ extensions Gem rubygems.org/gems/crxmake 

No content