Your SlideShare is downloading. ×
0
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Chrome Extensions for Hackers
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chrome Extensions for Hackers

1,082

Published on

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

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
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,082
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×