Chrome Extensions for Hackers

1,518 views

Published on

Chrome Extensions are easy to write and all they take are some HTML, CSS and JS skills.

Talk given at LondonJS 19.

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,518
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Chrome Extensions for Hackers

  1. 1. Sept 9, 2009Many many extensions
  2. 2. STOREchrome.google.com/webstore/ category/extensions DOCS developer.chrome.com/ extensions
  3. 3. Manipulate any (set of) pages Provide notifications Deep web app integration
  4. 4. Painless Payments for DroidsTim Messerschmidt
  5. 5. Auto updating OS independentStep up to chrome apps
  6. 6. The manifestManifest.json{      "name":  "Demo  Extension",      "version":  "0.0.1",      "manifest_version":  2  }  Chrome://extensions
  7. 7. THE BARE BASICS
  8. 8. UI BUILDING BLOCKSBROWSER 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      },      ...  }  
  9. 9. UI BUILDING BLOCKSBROWSER ACTIONS Icon Badge Tooltip popup
  10. 10. UI BUILDING BLOCKSPAGE 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      },      ...  }    
  11. 11. UI BUILDING BLOCKSPAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed
  12. 12. There can only be one
  13. 13. UI BUILDING BLOCKSDesktop notifications{      "name":  "My  extension",      "manifest_version":  2,      ...      "permissions":  [          "notifications"      ],      ...  }  
  14. 14. UI BUILDING BLOCKSDesktop notifications
  15. 15. UI BUILDING BLOCKSOptions page{      "name":  "My  extension",      ...      "options_page":  "options.html",      ...  }    
  16. 16. UI BUILDING BLOCKSOverride pagesomniboxContext menushtml
  17. 17. ADVANCED INTERACTION xhr
  18. 18. ADVANCED INTERACTIONpermissions{      "name":  "My  extension",      ...      "permissions":  [          "http://www.google.com/",          "https://www.google.com/",          "notifications"      ],      ...  }    Chrome.* apisdeveloper.chrome.com/extensions/api_index.html
  19. 19. ADVANCED INTERACTIONxhrvar  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  attackers  scripts.          var  resp  =  JSON.parse(xhr.responseText);      }  }  xhr.send();  
  20. 20. ADVANCED INTERACTION Content scripts
  21. 21. ADVANCED INTERACTIONContent scripts{      "name":  "My  extension",      ...      "content_scripts":  [          {              "matches":  ["http://www.google.com/*"],              "css":  ["mystyles.css"],              "js":  ["jquery.js",  "myscript.js"]          }      ],      ...  }  
  22. 22. ADVANCED INTERACTIONContent scriptsNo interaction with JS on pageNo access to most chrome.* apis
  23. 23. ADVANCED INTERACTION CONTENT   INLINE  JS   SCRIPT   DOM   Shared dom with different scopes
  24. 24. ADVANCED INTERACTIONContent scriptsvar  element  =  document.createElement("script");    element.type  =  "text/javascript";  element.text  =  "makeCall();";    document.body.appendChild(element);  
  25. 25. ADVANCED INTERACTION Background pages
  26. 26. ADVANCED INTERACTIONBackground/event pages{      "name":  "My  extension",      ...      "background":  {          "scripts":  [”eventpage.js"],          "persistent":  false      },      ...  }  
  27. 27. ADVANCED INTERACTIONEventpage.jschrome.browserAction.onClicked.addListener(function(tab)  {      //  do  something  cool  });  Chrome.* apisdeveloper.chrome.com/extensions/api_index.html
  28. 28. ADVANCED INTERACTION STORAGE
  29. 29. ADVANCED INTERACTIONchrome.storage  vs  chrome.localStorage   synced  vs  not  synced   type  safe  vs  not  type  safe   async  vs  sync  
  30. 30. Advanced interaction messaging
  31. 31. ADVANCED INTERACTIONmessagingcontentscript.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);      });  });  
  32. 32. ADVANCED INTERACTIONmessagingchrome.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 Content scriptsOptions pages Background pages
  33. 33. Advanced interaction deployment
  34. 34. Advanced interactionChrome://extensionsDon’t use “pack extension”
  35. 35. Advanced interactionchrome.google.com/webstore/developer/dashboardZip + uploadOne off $5 signup fee
  36. 36. DOCS developer.chrome.com/ extensions Gemrubygems.org/gems/crxmake

×