SlideShare a Scribd company logo
Browser extensions.
       Kenneth Auchenberg




 Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
Browser extensions.
       Kenneth Auchenberg




                                            Twitter       Blog


 Browser extensions at Community Day 2010             @auchenberg kenneth.io

Friday, May 28, 2010
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, 2010
Productivity
                                            Stylish, Greasemonkey



 Browser extensions at Community Day 2010                @auchenberg kenneth.io

Friday, May 28, 2010
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
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
Developer Tools
                               CSS Reloader, Firebug, Proxies



 Browser extensions at Community Day 2010           @auchenberg kenneth.io

Friday, May 28, 2010
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
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
                       Chrome.manifest             .png




                                            XPI



 Browser extensions at Community Day 2010                  @auchenberg kenneth.io

Friday, May 28, 2010
Huh?


                                            .xul
                                             .js


                       Install.rdf                         .css
                       Chrome.manifest                    .png




                                            XPI



 Browser extensions at Community Day 2010                         @auchenberg kenneth.io

Friday, May 28, 2010
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
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
<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
Extension
                                 Firefox    Extension
                                            Extension




                                                    Architecture



 Browser extensions at Community Day 2010                @auchenberg kenneth.io

Friday, May 28, 2010
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
<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
<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
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
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.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
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
Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
.htm
                                              .js


                                                     .css
                       manifest.json
                                                    .png




                                            CRX



 Browser extensions at Community Day 2010                   @auchenberg kenneth.io

Friday, May 28, 2010
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
Architecture


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


 Browser extensions at Community Day 2010                           @auchenberg kenneth.io

Friday, May 28, 2010
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
{
  	

       "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
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
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

Friday, May 28, 2010
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
// 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
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

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




 Browser extensions at Community Day 2010                     @auchenberg kenneth.io

Friday, May 28, 2010
526 users                      298 weekly installs




                                   7. january 2010!




 Browser extensions at Community Day 2010                          @auchenberg kenneth.io

Friday, May 28, 2010
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 28, 2010
CSS3                                    HTML5




         WebGL                              WebSockets

 Browser extensions at Community Day 2010       @auchenberg kenneth.io

Friday, May 28, 2010
CSS3
                                                     CSS3
                                     Site Specific Browsers
                                                       SSBʼs



 Browser extensions at Community Day 2010          @auchenberg kenneth.io

Friday, May 28, 2010
CSS3
                                                     CSS3
                                     Site Specific Browsers
                                                       SSBʼs



 Browser extensions at Community Day 2010          @auchenberg kenneth.io

Friday, May 28, 2010
CSS3
                                                      CSS3
                                        Google Chrome Apps
                                                         Demo



 Browser extensions at Community Day 2010           @auchenberg kenneth.io

Friday, May 28, 2010
{
      "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
Music
                                            “Jotify” Spotify client
                                                       http://jotify.felixbruns.de//




 Browser extensions at Community Day 2010                     @auchenberg kenneth.io

Friday, May 28, 2010
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




 Browser extensions at Community Day 2010   @auchenberg kenneth.io

Friday, May 28, 2010
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

More Related Content

Viewers also liked

Security@ecommerce
Security@ecommerceSecurity@ecommerce
Security@ecommerce
Om Vikram Thapa
 
Eamonn O Raghallaigh The Major Security Issues In E Commerce
Eamonn O Raghallaigh   The Major Security Issues In E CommerceEamonn O Raghallaigh   The Major Security Issues In E Commerce
Eamonn O Raghallaigh The Major Security Issues In E Commerce
EamonnORagh
 
Cyber fraud a threat to E commerce
Cyber fraud a threat to E commerceCyber fraud a threat to E commerce
Cyber fraud a threat to E commerce
Sudeshna07
 
Privacy and Security Issues in E-Commerce
Privacy and Security Issues in E-Commerce  Privacy and Security Issues in E-Commerce
Privacy and Security Issues in E-Commerce
Titas Ahmed
 
Mobile in Banking and Finance - What Make Sense and What Not
Mobile in Banking and Finance - What Make Sense and What NotMobile in Banking and Finance - What Make Sense and What Not
Mobile in Banking and Finance - What Make Sense and What Not
r4b
 
DSP architecture
DSP architectureDSP architecture
DSP architecture
jstripinis
 
E commerce industry
E commerce industryE commerce industry
E commerce industrySwayam Dey
 
3F3 – Digital Signal Processing (DSP) - Part1
3F3 – Digital Signal Processing (DSP) - Part13F3 – Digital Signal Processing (DSP) - Part1
3F3 – Digital Signal Processing (DSP) - Part1
op205
 
E Commerce -Security Threats and Challenges
E Commerce -Security Threats and ChallengesE Commerce -Security Threats and Challenges
E Commerce -Security Threats and Challenges
Inderjeet Singh
 
Security in E-commerce
Security in E-commerceSecurity in E-commerce
Security in E-commercem8817
 
Browser Security
Browser SecurityBrowser Security
Browser Security
Roberto Suggi Liverani
 

Viewers also liked (12)

Security@ecommerce
Security@ecommerceSecurity@ecommerce
Security@ecommerce
 
Eamonn O Raghallaigh The Major Security Issues In E Commerce
Eamonn O Raghallaigh   The Major Security Issues In E CommerceEamonn O Raghallaigh   The Major Security Issues In E Commerce
Eamonn O Raghallaigh The Major Security Issues In E Commerce
 
Cyber fraud a threat to E commerce
Cyber fraud a threat to E commerceCyber fraud a threat to E commerce
Cyber fraud a threat to E commerce
 
Privacy and Security Issues in E-Commerce
Privacy and Security Issues in E-Commerce  Privacy and Security Issues in E-Commerce
Privacy and Security Issues in E-Commerce
 
Mobile in Banking and Finance - What Make Sense and What Not
Mobile in Banking and Finance - What Make Sense and What NotMobile in Banking and Finance - What Make Sense and What Not
Mobile in Banking and Finance - What Make Sense and What Not
 
DSP architecture
DSP architectureDSP architecture
DSP architecture
 
E commerce industry
E commerce industryE commerce industry
E commerce industry
 
Dsp ppt
Dsp pptDsp ppt
Dsp ppt
 
3F3 – Digital Signal Processing (DSP) - Part1
3F3 – Digital Signal Processing (DSP) - Part13F3 – Digital Signal Processing (DSP) - Part1
3F3 – Digital Signal Processing (DSP) - Part1
 
E Commerce -Security Threats and Challenges
E Commerce -Security Threats and ChallengesE Commerce -Security Threats and Challenges
E Commerce -Security Threats and Challenges
 
Security in E-commerce
Security in E-commerceSecurity in E-commerce
Security in E-commerce
 
Browser Security
Browser SecurityBrowser Security
Browser Security
 

Similar to Browser Extensions in Mozilla Firefox & Google Chrome

Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP GroupDeveloping Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Groupminddog
 
Advanced Data Widgets and Server Integration
Advanced Data Widgets and Server IntegrationAdvanced Data Widgets and Server Integration
Advanced Data Widgets and Server Integration
Sencha
 
Jquery Introduction
Jquery IntroductionJquery Introduction
Jquery Introduction
cabbiepete
 
Html5 Development
Html5 DevelopmentHtml5 Development
Html5 Development
Nikolai Onken
 
Laying Pipe with Transmogrifier
Laying Pipe with TransmogrifierLaying Pipe with Transmogrifier
Laying Pipe with Transmogrifier
Clayton Parker
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
Zi Bin Cheah
 
Firefox extensions for_developers
Firefox extensions for_developersFirefox extensions for_developers
Firefox extensions for_developersbwebster719
 
Buildout for the Future
Buildout for the FutureBuildout for the Future
Buildout for the Future
Clayton Parker
 
Browsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkBrowsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkZi Bin Cheah
 
Joomla PLT Summit Feedback
Joomla PLT Summit FeedbackJoomla PLT Summit Feedback
Joomla PLT Summit Feedback
Chris Davenport
 
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer Relations Team
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusion
colinbdclark
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010
Kyle Meyer
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
Adrian Olaru
 
Základy GWT
Základy GWTZáklady GWT
Základy GWT
Tomáš Holas
 
So what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeSo what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web store
Eric Bidelman
 
Web and browser evolution
Web and browser evolutionWeb and browser evolution
Web and browser evolution
dynamis
 
Enabling accessible multimedia for Moodle: iMoot 2010
Enabling accessible multimedia for Moodle: iMoot 2010Enabling accessible multimedia for Moodle: iMoot 2010
Enabling accessible multimedia for Moodle: iMoot 2010
Nick Freear
 

Similar to Browser Extensions in Mozilla Firefox & Google Chrome (20)

Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP GroupDeveloping Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
Developing Plugins on OpenVBX at Greater San Francisco Bay Area LAMP Group
 
Advanced Data Widgets and Server Integration
Advanced Data Widgets and Server IntegrationAdvanced Data Widgets and Server Integration
Advanced Data Widgets and Server Integration
 
Jquery Introduction
Jquery IntroductionJquery Introduction
Jquery Introduction
 
Html5 Development
Html5 DevelopmentHtml5 Development
Html5 Development
 
Laying Pipe with Transmogrifier
Laying Pipe with TransmogrifierLaying Pipe with Transmogrifier
Laying Pipe with Transmogrifier
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ Baidu
 
Firefox extensions for_developers
Firefox extensions for_developersFirefox extensions for_developers
Firefox extensions for_developers
 
Buildout for the Future
Buildout for the FutureBuildout for the Future
Buildout for the Future
 
Buildout future
Buildout futureBuildout future
Buildout future
 
Browsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talkBrowsers & Web Technology - an Opera talk
Browsers & Web Technology - an Opera talk
 
Joomla PLT Summit Feedback
Joomla PLT Summit FeedbackJoomla PLT Summit Feedback
Joomla PLT Summit Feedback
 
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
Google Developer DAy 2010 Japan: HTML5 についての最新情報 (マイク スミス)
 
Mobile Development with uPortal and Infusion
Mobile Development with uPortal and InfusionMobile Development with uPortal and Infusion
Mobile Development with uPortal and Infusion
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5
 
OpenSocial Done Right
OpenSocial Done RightOpenSocial Done Right
OpenSocial Done Right
 
Základy GWT
Základy GWTZáklady GWT
Základy GWT
 
So what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web storeSo what's a web app? introduction to the chrome web store
So what's a web app? introduction to the chrome web store
 
Web and browser evolution
Web and browser evolutionWeb and browser evolution
Web and browser evolution
 
Enabling accessible multimedia for Moodle: iMoot 2010
Enabling accessible multimedia for Moodle: iMoot 2010Enabling accessible multimedia for Moodle: iMoot 2010
Enabling accessible multimedia for Moodle: iMoot 2010
 

Recently uploaded

Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Aggregage
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
Kari Kakkonen
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
UiPathCommunity
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
UiPathCommunity
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
Safe Software
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
Dorra BARTAGUIZ
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
Alex Pruden
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
RinaMondal9
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
nkrafacyberclub
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
ControlCase
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
mikeeftimakis1
 

Recently uploaded (20)

Assure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyesAssure Contact Center Experiences for Your Customers With ThousandEyes
Assure Contact Center Experiences for Your Customers With ThousandEyes
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Generative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionGenerative AI Deep Dive: Advancing from Proof of Concept to Production
Generative AI Deep Dive: Advancing from Proof of Concept to Production
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
Climate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing DaysClimate Impact of Software Testing at Nordic Testing Days
Climate Impact of Software Testing at Nordic Testing Days
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..UiPath Community Day Dubai: AI at Work..
UiPath Community Day Dubai: AI at Work..
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™
 
Essentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FMEEssentials of Automations: The Art of Triggers and Actions in FME
Essentials of Automations: The Art of Triggers and Actions in FME
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 
Elevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object CalisthenicsElevating Tactical DDD Patterns Through Object Calisthenics
Elevating Tactical DDD Patterns Through Object Calisthenics
 
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex ProofszkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
zkStudyClub - Reef: Fast Succinct Non-Interactive Zero-Knowledge Regex Proofs
 
Free Complete Python - A step towards Data Science
Free Complete Python - A step towards Data ScienceFree Complete Python - A step towards Data Science
Free Complete Python - A step towards Data Science
 
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptxSecstrike : Reverse Engineering & Pwnable tools for CTF.pptx
Secstrike : Reverse Engineering & Pwnable tools for CTF.pptx
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
PCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase TeamPCI PIN Basics Webinar from the Controlcase Team
PCI PIN Basics Webinar from the Controlcase Team
 
Introduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - CybersecurityIntroduction to CHERI technology - Cybersecurity
Introduction to CHERI technology - Cybersecurity
 

Browser Extensions in Mozilla Firefox & Google Chrome

  • 1. Browser extensions. Kenneth Auchenberg Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 2. Browser extensions. Kenneth Auchenberg Twitter Blog Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 3. Browsers Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 4. Extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 5. Extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 6. What can I use this for? Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 7. Productivity Stylish, Greasemonkey Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. 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. Developer Tools CSS Reloader, Firebug, Proxies Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 13. AdBlock Plus Delicious Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 14. .xul .js Install.rdf .css Chrome.manifest .png XPI Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. 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. 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. <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. Extension Firefox Extension Extension Architecture Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. <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. <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. 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. Frameworks Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 25. Frameworks Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. 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. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 29. .htm .js .css manifest.json .png CRX Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. Architecture http://code.google.com/chrome/extensions/overview.html Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. { "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. 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. Chrome vs. Firefox Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 36. XUL vs. HTML Chrome vs. Content Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. // 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. Community Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 40. addons.mozilla.org Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 41. Statistics Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 42. Statistics Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 43. chrome.google.com/extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 44. chrome.google.com/extensions Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 45. 526 users 298 weekly installs 7. january 2010! Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 46. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 47. Browser as a platform. Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 48. CSS3 HTML5 WebGL WebSockets Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 49. CSS3 CSS3 Site Specific Browsers SSBʼs Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 50. CSS3 CSS3 Site Specific Browsers SSBʼs Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 51. CSS3 CSS3 Google Chrome Apps Demo Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. Music “Jotify” Spotify client http://jotify.felixbruns.de// Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 54. Getting started Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 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. Be the cool kid Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010
  • 57. Thanks Browser extensions at Community Day 2010 @auchenberg kenneth.io Friday, May 28, 2010