Browser extensions.
       Kenneth Auchenberg




 Browser extensions at Community Day 2010   @auchenberg kenneth.io

Frid...
Browser extensions.
       Kenneth Auchenberg




                                            Twitter       Blog


 Browse...
Browsers



 Browser extensions at Community Day 2010     @auchenberg kenneth.io

Friday, May 28, 2010
Extensions



 Browser extensions at Community Day 2010      @auchenberg kenneth.io

Friday, May 28, 2010
Extensions



 Browser extensions at Community Day 2010      @auchenberg kenneth.io

Friday, May 28, 2010
What can I use this for?




 Browser extensions at Community Day 2010              @auchenberg kenneth.io

Friday, May 28...
Productivity
                                            Stylish, Greasemonkey



 Browser extensions at Community Day 201...
Printing
                                                               JS Print Setup
                                   ...
Mail
                                                                Mail redirection
                                    ...
Developer Tools
                               CSS Reloader, Firebug, Proxies



 Browser extensions at Community Day 2010...
Contacts
                                                       W3C Contacts spec
                                        ...
Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
AdBlock Plus         Delicious




 Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
.xul
                                             .js


                       Install.rdf                  .css
         ...
Huh?


                                            .xul
                                             .js


               ...
cssreloader.js

                              cssreloader.xul

                Install.rdf
                               ...
Text

                                                                                             XUL


                 ...
<overlay xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/
    there.is.only.x...
Extension
                                 Firefox    Extension
                                            Extension




...
Standard JavaScript                        fuelIBookmark.*
        DOM API’s                                  fuelIBrowser...
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  	

     ...
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
       xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  	

     ...
content	

 	

        cssreloader	

    chrome/content/

 overlay	

 	

        chrome://browser/content/browser.xul	

   ...
Frameworks



 Browser extensions at Community Day 2010       @auchenberg kenneth.io

Friday, May 28, 2010
Frameworks



 Browser extensions at Community Day 2010       @auchenberg kenneth.io

Friday, May 28, 2010
CSSreloader = function() {

  	

     function reload() {
  	

     	

 var elements = window.content.document.querySelect...
CSSreloader = function() {

  	

     function reload() {
  	

     	

 var elements = window.content.document.querySelect...
Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
.htm
                                              .js


                                                     .css
       ...
messages.json


                                                      en      fr        de


                             ...
Architecture


                                            http://code.google.com/chrome/extensions/overview.html


 Brows...
Standard JavaScript                          chrome.extension.*
      DOM API’s                                    chrome....
{
  	

       "name": "CSS Reloader",
  	

       "version": "1.0",
  	

       "description": "CSS Reloader is an extensi...
CSSreloader = function() {

  	

      function initialize() {
  	

        document.addEventListener("keyup", onWindowKey...
Chrome vs. Firefox




 Browser extensions at Community Day 2010              @auchenberg kenneth.io

Friday, May 28, 2010
XUL vs. HTML

                Chrome vs. Content




 Browser extensions at Community Day 2010   @auchenberg kenneth.io

F...
navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail");




                      ...
// Content Scripts
  function rewriteMailtosOnPage() {
    // Find all the A mailto links.
    var result = document.evalu...
Community




 Browser extensions at Community Day 2010      @auchenberg kenneth.io

Friday, May 28, 2010
addons.mozilla.org




 Browser extensions at Community Day 2010          @auchenberg kenneth.io

Friday, May 28, 2010
Statistics

 Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
Statistics

 Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
chrome.google.com/extensions




 Browser extensions at Community Day 2010                     @auchenberg kenneth.io

Fri...
chrome.google.com/extensions




 Browser extensions at Community Day 2010                     @auchenberg kenneth.io

Fri...
526 users                      298 weekly installs




                                   7. january 2010!




 Browser ex...
Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
Browser as a platform.




 Browser extensions at Community Day 2010                 @auchenberg kenneth.io

Friday, May 2...
CSS3                                    HTML5




         WebGL                              WebSockets

 Browser extensi...
CSS3
                                                     CSS3
                                     Site Specific Browsers
...
CSS3
                                                     CSS3
                                     Site Specific Browsers
...
CSS3
                                                      CSS3
                                        Google Chrome Apps...
{
      "name": "Community Day 2010",
      "version": "3",
      "icons": { "24": "24.png", "128": "128.png" },
      "la...
Music
                                            “Jotify” Spotify client
                                                ...
Getting started




 Browser extensions at Community Day 2010          @auchenberg kenneth.io

Friday, May 28, 2010
addons.mozilla.org/en-US/developers

      code.google.com/chrome/extensions

      github.com/auchenberg/css-reloader



...
Be the cool kid




 Browser extensions at Community Day 2010          @auchenberg kenneth.io

Friday, May 28, 2010
Thanks



 Browser extensions at Community Day 2010    @auchenberg kenneth.io

Friday, May 28, 2010
Upcoming SlideShare
Loading in …5
×

Browser Extensions in Mozilla Firefox & Google Chrome

6,980 views
6,840 views

Published on

Published in: Technology
2 Comments
5 Likes
Statistics
Notes
  • Hi Tyler,

    The presentation is several years old (it's from 2010), and my talk wasn't recorded at the Community Day conference. I would suggest you to find newer talks/slides to get a more accurate picture of the browser extension landscape.

    /k
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Do have comments that go along with this slide show? I understand most of what is being presented, but still it would be nice to have a narrative to go along with it.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
6,980
On SlideShare
0
From Embeds
0
Number of Embeds
1,373
Actions
Shares
0
Downloads
102
Comments
2
Likes
5
Embeds 0
No embeds

No notes for slide

Browser Extensions in Mozilla Firefox & Google Chrome

  1. 1. Browser extensions. Kenneth Auchenberg Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  2. 2. Browser extensions. Kenneth Auchenberg Twitter Blog Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  3. 3. Browsers Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  4. 4. Extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  5. 5. Extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  6. 6. What can I use this for? Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  7. 7. Productivity Stylish, Greasemonkey Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  8. 8. Printing JS Print Setup https://addons.mozilla.org/en-US/firefox/addon/8966/ Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  9. 9. Mail Mail redirection https://developer.mozilla.org/en/Web-based_protocol_handlers Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  10. 10. Developer Tools CSS Reloader, Firebug, Proxies Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  11. 11. Contacts W3C Contacts spec http://mozillalabs.com/blog/2010/03/contacts-in-the-browser/ Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  12. 12. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  13. 13. AdBlock Plus Delicious Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  14. 14. .xul .js Install.rdf .css Chrome.manifest .png XPI Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  15. 15. Huh? .xul .js Install.rdf .css Chrome.manifest .png XPI Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  16. 16. cssreloader.js cssreloader.xul Install.rdf content locale skin crome.manifest /chrome Folder Structure Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  17. 17. Text XUL http://www.csie.ntu.edu.tw/~piaip/docs/CreateMozApp/mozilla-chp-1.html Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  18. 18. <overlay xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul"> <script type="application/x-javascript" src="chrome://cssreloader/content/cssreloader.js" /> <menupopup id="menu_viewPopup"> <menuitem id="menu_viewpopup_cssreloader" insertbefore="viewFullZoomMenu" label="Reload CSS" /> </menupopup> <menupopup id="contentAreaContextMenu"> <menuitem id="menu_contextmenu_cssreloader" insertafter="context-reload" label="Reload CSS" /> </menupopup> <keyset id="mainKeyset"> <key id="cssReloaderActivate" keycode="VK_F9" oncommand="CSSreloader.reload();" /> </keyset> </overlay> XML-based User-Interface Language Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  19. 19. Extension Firefox Extension Extension Architecture Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  20. 20. Standard JavaScript fuelIBookmark.* DOM API’s fuelIBrowserTab.* XMLHttpRequest extIApplication.* HTML5 API’s extIConsole.* extIPreference.* Text (XPCOM) APIʼs Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  21. 21. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>cssreloader@kenneth.io</em:id> <em:name>CSS Reloader</em:name> <em:version>1.0.2</em:version> <em:description>Reload your CSS without reloading the page. Use F9, o... </em:description> <em:creator>Kenneth Auchenberg</em:creator> <em:homepageURL>http://kenneth.io/</em:homepageURL> <!-- Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.5</em:minVersion> <em:maxVersion>3.6.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> Install.rdf (metadata) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  22. 22. <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>cssreloader@kenneth.io</em:id> <em:name>CSS Reloader</em:name> <em:version>1.0.2</em:version> <em:description>Reload your CSS without reloading the page. Use F9, o... </em:description> <em:creator>Kenneth Auchenberg</em:creator> <em:homepageURL>http://kenneth.io/</em:homepageURL> <!-- Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.5</em:minVersion> <em:maxVersion>3.6.*</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> Install.rdf (metadata) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  23. 23. content cssreloader chrome/content/ overlay chrome://browser/content/browser.xul chrome://cssreloader/content/cssreloader.xul locale cssreloader en-US chrome://cssreloader/locale/en-US style chrome://browser/content/browser.xul chrome://cssreloader/skin/style.css chrome.manifest (file references) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  24. 24. Frameworks Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  25. 25. Frameworks Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  26. 26. CSSreloader = function() { function reload() { var elements = window.content.document.querySelectorAll('link[rel=stylesheet][href]'); elements.forEach(function(element, index, array) { var h = element.href.replace(/[?&]cssReloader=([^&$]*)/,''); element.href = h + (h.indexOf('?')>=0?'&':'?') + 'cssReloader=' + (new Date().valueOf()); }); } return { reload : reload } }(); JavaScript (crazy stuff) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  27. 27. CSSreloader = function() { function reload() { var elements = window.content.document.querySelectorAll('link[rel=stylesheet][href]'); elements.forEach(function(element, index, array) { var h = element.href.replace(/[?&]cssReloader=([^&$]*)/,''); element.href = h + (h.indexOf('?')>=0?'&':'?') + 'cssReloader=' + (new Date().valueOf()); }); } return { reload : reload } Yup, that’s all }(); JavaScript (crazy stuff) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  28. 28. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  29. 29. .htm .js .css manifest.json .png CRX Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  30. 30. messages.json en fr de _locales manifest.json cssreloader.js / Folder Structure Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  31. 31. Architecture http://code.google.com/chrome/extensions/overview.html Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  32. 32. Standard JavaScript chrome.extension.* DOM API’s chrome.browserAction.* XMLHttpRequest chrome.pageAction.* WebSockets chrome.bookmarks.* HTML5 API’s chrome.tabs.* Webkit API’s Text chrome.windows.* APIʼs Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  33. 33. { "name": "CSS Reloader", "version": "1.0", "description": "CSS Reloader is an extension that allows you to reload all the .... ", "permissions": [ "http://*/*", "https://*/*" ], "icons": { "48": "cssreloader_icon_48.png", "128": "cssreloader_icon_128.png" }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["cssreloader.js"] } ] } manifest.json (metadata) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  34. 34. CSSreloader = function() { function initialize() { document.addEventListener("keyup", onWindowKeyUp, false); } function reload() { var elements = document.querySelectorAll('link[rel=stylesheet][href]'); for (var i = 0, element; element = elements[i]; i++) { var href = element.href.replace(/[?&]cssReloader=([^&$]*)/,''); element.href = href + (href.indexOf('?')>=0?'&':'?') + 'cssReloader=' + (new Date().valueOf()); } } function onWindowKeyUp(event) { if(event.keyCode == 120) { reload(); } } return { reload : reload, Content Script initialize: initialize } (here it goes) }(); CSSreloader.initialize(); Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  35. 35. Chrome vs. Firefox Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  36. 36. XUL vs. HTML Chrome vs. Content Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  37. 37. navigator.registerProtocolHandler("mailto", "https://www.example.com/?uri=%s", "Example Mail"); Protocol handler (mailto links) (Firefox) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  38. 38. // Content Scripts function rewriteMailtosOnPage() {   // Find all the A mailto links.   var result = document.evaluate(       '//a[contains(@href, "mailto:")]',       document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);   rewriteMailtos(result);      // Find all the AREA mailto links.   var result = document.evaluate(       '//area[contains(@href, "mailto:")]',       document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null);   rewriteMailtos(result); } function rewriteMailtos(allofthem) {   var item;   var nodes = [];   // cannot change the NODE_ITERATOR nodes' attributes in this loop itself   // since iterateNext will invalidate the state; Need to store temporarily.   while (item = allofthem.iterateNext()) {     nodes.push(item);   }      for (var i = 0; i < nodes.length; i++) {     var mailtoStr = nodes[i].getAttribute('href'); Protocol handler (mailto links)     mailtoStr = rewriteMailtoToGMailUrl(mailtoStr);     nodes[i].setAttribute('href', mailtoStr); (Chrome)     nodes[i].setAttribute('target', "_blank"); http://github.com/Jacopo/chrome-gmail-no-button/     nodes[i].setAttribute('rel', 'noreferrer');   } } Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  39. 39. Community Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  40. 40. addons.mozilla.org Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  41. 41. Statistics Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  42. 42. Statistics Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  43. 43. chrome.google.com/extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  44. 44. chrome.google.com/extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  45. 45. 526 users 298 weekly installs 7. january 2010! Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  46. 46. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  47. 47. Browser as a platform. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  48. 48. CSS3 HTML5 WebGL WebSockets Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  49. 49. CSS3 CSS3 Site Specific Browsers SSBʼs Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  50. 50. CSS3 CSS3 Site Specific Browsers SSBʼs Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  51. 51. CSS3 CSS3 Google Chrome Apps Demo Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  52. 52. { "name": "Community Day 2010", "version": "3", "icons": { "24": "24.png", "128": "128.png" }, "launch": { "web_url": "http://communityday.in/copenhagen" }, "permissions": ["geolocation"], "web_content": { "enabled": true, "origin": "http://communityday.in", "paths": [ "/copenhagen/" ] } } manifest.json (web app metadata) Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  53. 53. Music “Jotify” Spotify client http://jotify.felixbruns.de// Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  54. 54. Getting started Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  55. 55. addons.mozilla.org/en-US/developers code.google.com/chrome/extensions github.com/auchenberg/css-reloader Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  56. 56. Be the cool kid Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  57. 57. Thanks Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010

×