SlideShare a Scribd company logo
1 of 57
Download to read offline
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

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 CommerceEamonnORagh
 
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 commerceSudeshna07
 
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 Notr4b
 
DSP architecture
DSP architectureDSP architecture
DSP architecturejstripinis
 
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) - Part1op205
 
E Commerce -Security Threats and Challenges
E Commerce -Security Threats and ChallengesE Commerce -Security Threats and Challenges
E Commerce -Security Threats and ChallengesInderjeet Singh
 
Security in E-commerce
Security in E-commerceSecurity in E-commerce
Security in E-commercem8817
 

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 IntegrationSencha
 
Jquery Introduction
Jquery IntroductionJquery Introduction
Jquery Introductioncabbiepete
 
Laying Pipe with Transmogrifier
Laying Pipe with TransmogrifierLaying Pipe with Transmogrifier
Laying Pipe with TransmogrifierClayton Parker
 
HTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduHTML5/CSS3 @ Baidu
HTML5/CSS3 @ BaiduZi 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 FutureClayton 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 FeedbackChris 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 Infusioncolinbdclark
 
Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Designing With Type :: FontConf 2010
Designing With Type :: FontConf 2010Kyle Meyer
 
Introduction to HTML5
Introduction to HTML5Introduction to HTML5
Introduction to HTML5Adrian Olaru
 
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 storeEric Bidelman
 
Web and browser evolution
Web and browser evolutionWeb and browser evolution
Web and browser evolutiondynamis
 
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 2010Nick 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

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 

Recently uploaded (20)

Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 

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