What is a Chrome extension?<br />Chrome policy: only add features that everyone will use<br />Extra functionality added to...
Why is it interesting?<br />Business cases<br />Add extra/new functionality to legacy systems<br />Translate  (localise) a...
Types of extensions<br />Browser action (for every webpage)<br />Page action (based/filtered on the URL)<br />Override pag...
Supporting pages/objects<br />Background page (always running)<br />Options page (opened when necessary)<br />Popup page (...
6<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
Messaging / storage<br />Isolated world – One page, multiple extensions, no collision<br />Almost all of the APIs are asyn...
Browser interaction<br />Need to ask for permissions before installing<br />Chrome.* namespace can access<br />Bookmarks<b...
Hosting / publishing<br />Manifest<br />JSON description or the extension<br />Chrome web store (easy autoupdate)<br />Fre...
How to develop<br />Need a good toolset<br />Netbeans, Closure compiler, SED, batch job<br />Crafting by small modules, it...
Demo<br />11<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
Final thoughts<br />Platform problems<br />Users might randomly report ‘Does not work for me’<br />Psychology of voting<br...
URLs<br />This presentationhttp://slidesha.re/chromeextension<br />efTwo (F2) Advanced Find on Pagehttp://bit.ly/eftwochro...
Questions<br />14<br />Adam Horvath<br />Adam Horvath <br />(adam@teamleadnet.com)<br />September 27, 2011 - Sydney<br />
Chrome Extension Development - Adam Horvath, Google Technology User Group, Sydney
Upcoming SlideShare
Loading in...5
×

Chrome Extension Development - Adam Horvath, Google Technology User Group, Sydney

1,722

Published on

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

No Downloads
Views
Total Views
1,722
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Chrome Extension Development - Adam Horvath, Google Technology User Group, Sydney"

  1. 1. Chrome/Chromium extension development<br />Presenter:<br /> Adam Horvath (adam@teamleadnet.com)<br />1<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  2. 2. What is a Chrome extension?<br />Chrome policy: only add features that everyone will use<br />Extra functionality added to pages or generally, to the browser<br />Usually written using standard ‘web technologies’<br />Javascript<br />HTML<br />CSS<br />JSON/XML data<br />Special ZIP package with header information<br />2<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  3. 3. Why is it interesting?<br />Business cases<br />Add extra/new functionality to legacy systems<br />Translate (localise) an existing web UI<br />Provide custom UI for third party services<br />Learn proper/sustainable (Java)script programming<br />Increasing your ‘brand awareness’<br />However: unlikely to sell from the store!<br />3<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  4. 4. Types of extensions<br />Browser action (for every webpage)<br />Page action (based/filtered on the URL)<br />Override pages (Bookmark manager, History, New tab)<br />Omnibox helpers (custom search function)<br />NPAPI native code (Netscape Plugin Application Programming Interface)<br />(Themes)<br />4<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  5. 5. Supporting pages/objects<br />Background page (always running)<br />Options page (opened when necessary)<br />Popup page (for browser actions)<br />Content (scripts, css, ...)<br />Desktop notification<br />5<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  6. 6. 6<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  7. 7. Messaging / storage<br />Isolated world – One page, multiple extensions, no collision<br />Almost all of the APIs are async<br />Async communication between processes<br />Send messages between extension/background pages<br />Cross domain XMLHttpRequest / External services<br />Storage (localStorage, 5Mb)<br />7<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  8. 8. Browser interaction<br />Need to ask for permissions before installing<br />Chrome.* namespace can access<br />Bookmarks<br />Cookies<br />Events<br />History<br />Management<br />Tabs<br />Windows<br />APIs are never removed after making their way into Stable branch<br />8<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  9. 9. Hosting / publishing<br />Manifest<br />JSON description or the extension<br />Chrome web store (easy autoupdate)<br />Free to host<br />Connects with Google Analytics<br />Can upload sample screenshots/YouTube video<br />Custom location (Autoupdate possible)<br />9<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  10. 10. How to develop<br />Need a good toolset<br />Netbeans, Closure compiler, SED, batch job<br />Crafting by small modules, iteratively<br />Create sample page with sample Javascript<br />Test, fix<br />Merge into extension<br />Testing (unpacked, compiled + packed)<br />Debugging<br />Do not rely on debugging, although Chrome is a good debugger<br />Embedding images in CSS (base64)<br />10<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  11. 11. Demo<br />11<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  12. 12. Final thoughts<br />Platform problems<br />Users might randomly report ‘Does not work for me’<br />Psychology of voting<br />Hard to change the vote average after just a few votes<br />Votes are dependent on the type of audience<br />Localisation<br />Not covered here, but extensions can support many languages<br />12<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  13. 13. URLs<br />This presentationhttp://slidesha.re/chromeextension<br />efTwo (F2) Advanced Find on Pagehttp://bit.ly/eftwochrome<br />Chrome Extensions Getting Started http://code.google.com/chrome/extensions<br />Closure compilerhttp://code.google.com/closure/compiler/<br />Image/CSS converterhttp://webcodertools.com/imagetobase64converter<br />encoded = urllib.parse.quote( base64.b64encode(open(filename, "rb").read()) )<br />Netbeanshttp://netbeans.org/downloads/<br />GNU Win32 (sed)http://sourceforge.net/projects/gnuwin32<br />13<br />Adam Horvath<br />September 27, 2011 - Sydney<br />
  14. 14. Questions<br />14<br />Adam Horvath<br />Adam Horvath <br />(adam@teamleadnet.com)<br />September 27, 2011 - Sydney<br />

×