Chrome Extensions for Hackers
3 likesā¢1,634 views
The document provides an overview of building Chrome extensions including the manifest file, UI components like browser actions and page actions, permissions, messaging, storage, and deployment. It covers the basic building blocks and moves into more advanced topics like content scripts, background pages, and options pages. Tips are provided throughout on building extension interfaces and interacting with web pages.
![UI BUILDING BLOCKS
Desktop notifications
{
Ā
Ā
Ā "name":
Ā "My
Ā extension",
Ā
Ā
Ā "manifest_version":
Ā 2,
Ā
Ā
Ā ...
Ā
Ā
Ā "permissions":
Ā [
Ā
Ā
Ā
Ā
Ā "notifications"
Ā
Ā
Ā ],
Ā
Ā
Ā ...
Ā
}
Ā](https://image.slidesharecdn.com/chromeforhackers-130416165451-phpapp02-130418135305-phpapp02/85/Chrome-Extensions-for-Hackers-16-320.jpg)
![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](https://image.slidesharecdn.com/chromeforhackers-130416165451-phpapp02-130418135305-phpapp02/85/Chrome-Extensions-for-Hackers-22-320.jpg)
![ADVANCED INTERACTION
Content scripts
{
Ā
Ā
Ā "name":
Ā "My
Ā extension",
Ā
Ā
Ā ...
Ā
Ā
Ā "content_scripts":
Ā [
Ā
Ā
Ā
Ā
Ā {
Ā
Ā
Ā
Ā
Ā
Ā
Ā "matches":
Ā ["http://www.google.com/*"],
Ā
Ā
Ā
Ā
Ā
Ā
Ā "css":
Ā ["mystyles.css"],
Ā
Ā
Ā
Ā
Ā
Ā
Ā "js":
Ā ["jquery.js",
Ā "myscript.js"]
Ā
Ā
Ā
Ā
Ā }
Ā
Ā
Ā ],
Ā
Ā
Ā ...
Ā
}
Ā](https://image.slidesharecdn.com/chromeforhackers-130416165451-phpapp02-130418135305-phpapp02/85/Chrome-Extensions-for-Hackers-25-320.jpg)
![ADVANCED INTERACTION
Background/event pages
{
Ā
Ā
Ā "name":
Ā "My
Ā extension",
Ā
Ā
Ā ...
Ā
Ā
Ā "background":
Ā {
Ā
Ā
Ā
Ā
Ā "scripts":
Ā [āeventpage.js"],
Ā
Ā
Ā
Ā
Ā "persistent":
Ā false
Ā
Ā
Ā },
Ā
Ā
Ā ...
Ā
}
Ā](https://image.slidesharecdn.com/chromeforhackers-130416165451-phpapp02-130418135305-phpapp02/85/Chrome-Extensions-for-Hackers-30-320.jpg)
Chrome Extensions for Hackers
- 2. Sept 9, 2009 Many many extensions
- 3. STORE chrome.google.com/webstore/ category/extensions DOCS developer.chrome.com/ extensions
- 4. Manipulate any (set of) pages Provide notifications Deep web app integration
- 5. Painless Payments for Droids Tim Messerschmidt
- 6. Auto updating OS independent Step up to chrome apps
- 8. The manifest Manifest.json { Ā Ā Ā "name": Ā "Demo Ā Extension", Ā Ā Ā "version": Ā "0.0.1", Ā Ā Ā "manifest_version": Ā 2 Ā } Ā Chrome://extensions
- 11. 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 Ā Ā Ā }, Ā Ā Ā ... Ā } Ā
- 12. UI BUILDING BLOCKS BROWSER ACTIONS Icon Badge Tooltip popup
- 13. 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 Ā Ā Ā }, Ā Ā Ā ... Ā } Ā Ā
- 14. UI BUILDING BLOCKS PAGE ACTIONS Icon Tooltip Popup No badge Not shown until needed
- 15. There can only be one
- 16. UI BUILDING BLOCKS Desktop notifications { Ā Ā Ā "name": Ā "My Ā extension", Ā Ā Ā "manifest_version": Ā 2, Ā Ā Ā ... Ā Ā Ā "permissions": Ā [ Ā Ā Ā Ā Ā "notifications" Ā Ā Ā ], Ā Ā Ā ... Ā } Ā
- 17. UI BUILDING BLOCKS Desktop notifications
- 18. UI BUILDING BLOCKS Options page { Ā Ā Ā "name": Ā "My Ā extension", Ā Ā Ā ... Ā Ā Ā "options_page": Ā "options.html", Ā Ā Ā ... Ā } Ā Ā
- 19. UI BUILDING BLOCKS Override pages omnibox Context menus html
- 21. ADVANCED INTERACTION xhr
- 22. 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
- 23. 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(); Ā
- 24. ADVANCED INTERACTION Content scripts
- 25. ADVANCED INTERACTION Content scripts { Ā Ā Ā "name": Ā "My Ā extension", Ā Ā Ā ... Ā Ā Ā "content_scripts": Ā [ Ā Ā Ā Ā Ā { Ā Ā Ā Ā Ā Ā Ā "matches": Ā ["http://www.google.com/*"], Ā Ā Ā Ā Ā Ā Ā "css": Ā ["mystyles.css"], Ā Ā Ā Ā Ā Ā Ā "js": Ā ["jquery.js", Ā "myscript.js"] Ā Ā Ā Ā Ā } Ā Ā Ā ], Ā Ā Ā ... Ā } Ā
- 26. ADVANCED INTERACTION Content scripts No interaction with JS on page No access to most chrome.* apis
- 27. ADVANCED INTERACTION CONTENT Ā INLINE Ā JS Ā SCRIPT Ā DOM Ā Shared dom with different scopes
- 28. ADVANCED INTERACTION Content scripts var Ā element Ā = Ā document.createElement("script"); Ā Ā element.type Ā = Ā "text/javascript"; Ā element.text Ā = Ā "makeCall();"; Ā Ā document.body.appendChild(element); Ā
- 29. ADVANCED INTERACTION Background pages
- 30. ADVANCED INTERACTION Background/event pages { Ā Ā Ā "name": Ā "My Ā extension", Ā Ā Ā ... Ā Ā Ā "background": Ā { Ā Ā Ā Ā Ā "scripts": Ā [āeventpage.js"], Ā Ā Ā Ā Ā "persistent": Ā false Ā Ā Ā }, Ā Ā Ā ... Ā } Ā
- 31. ADVANCED INTERACTION Eventpage.js chrome.browserAction.onClicked.addListener(function(tab) Ā { Ā Ā Ā // Ā do Ā something Ā cool Ā }); Ā Chrome.* apis developer.chrome.com/extensions/api_index.html
- 32. ADVANCED INTERACTION STORAGE
- 33. ADVANCED INTERACTION chrome.storage Ā vs Ā chrome.localStorage Ā synced Ā vs Ā not Ā synced Ā type Ā safe Ā vs Ā not Ā type Ā safe Ā async Ā vs Ā sync Ā
- 35. Advanced interaction messaging
- 36. 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); Ā Ā Ā }); Ā }); Ā
- 37. 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 Content scripts Options pages Background pages
- 38. Advanced interaction deployment
- 39. Advanced interaction Chrome://extensions Donāt use āpack extensionā
- 40. Advanced interaction chrome.google.com/webstore/developer/ dashboard Zip + upload One off $5 signup fee
- 42. DOCS developer.chrome.com/ extensions Gem rubygems.org/gems/crxmake