SlideShare une entreprise Scribd logo
1  sur  103
Télécharger pour lire hors ligne
How to Write Your
 First Extension
How To Write Your First Firefox Extension
Bruce Willis Extension
         (Francois Mori/AP Photo)
How to Write Your First Extension

1. Create development profile
2. Configuration settings
3. Pointing extension to your dev directory
4. Creating folder structure & files
5. Packaging & installing
6. Distributing your add-on
Create Development
       Profile
Keep a separate Firefox profile for
     extension development
Windows:
Start menu > Run (Windows key + R).
Write firefox -P and press click OK.

Mac OS X (in Terminal):
Type in /Applications/Firefox.app/
Contents/MacOS/firefox -
profilemanager


Linux (in a terminal):
Use cd to navigate to your Firefox directory and
then enter ./firefox -profilemanager
How To Write Your First Firefox Extension
How To Write Your First Firefox Extension
How To Write Your First Firefox Extension
Pointing Extension to
 Your Development
      Directory
Find your Profile directory
Windows:

Win XP: C:Documents and Settings[user name]
Application DataMozillaFirefoxProfiles

Vista: C:Users[user   name]AppDataRoaming


Mac OS X (~ = /Users/[user      name]):

~/Library/Application Support/Firefox/Profiles/


Linux:

~/.mozilla/
Go to [Dev Profile]/extensions/ folder
Create empty file (no file extension!):

brucewillis@robertnyman.com
How To Write Your First Firefox Extension
Point to your extension code, i.e. file path:


Windows:

E.g: C:devbrucewillis

Mac/Linux:

E.g: ~/dev/brucewillis/
Configuration Settings
1. Open Firefox:

  - Have your development profile as default
  - or Through Profile Manager

2. Type in about:config
How To Write Your First Firefox Extension
Recommended settings:

javascript.options.showInConsole = true

nglayout.debug.disable_xul_cache = true

browser.dom.window.dump.enabled = true
• Optional settings:
  javascript.options.strict = true

  extensions.logging.enabled = true
How To Write Your First Firefox Extension
How To Write Your First Firefox Extension
Creating Folder
Structure & Files
How To Write Your First Firefox Extension
• Automatic creation of extension
• Extension Developer extension
install.rdf
Information, IDs and metadata
<?xml version="1.0"?>
<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>brucewillis@robertnyman.com</em:id>

   
    <em:name>Bruce Willis demo extension</em:name>

   
    <em:version>1.0</em:version>

   
    <em:type>2</em:type>

   
    <em:creator>Robert Nyman</em:creator>

    
    <em:description>Finds document headings and replaces them with Die
Hard movie titles</em:description>

   
    <em:homepageURL>http://www.robertnyman.com/</em:homepageURL>

    
    <em:optionsURL>chrome://brucewillis/content/preferences.xul</
em:optionsURL>



   
    <em:targetApplication>

   
    
    <Description>

   
    
    
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

   
    
    
      <em:minVersion>2.0</em:minVersion>

   
    
    
      <em:maxVersion>3.1b2</em:maxVersion>

   
    
    </Description>

   
    </em:targetApplication>

   </Description>
</RDF>
How To Write Your First Firefox Extension
In the Description node
em:id
Your unique developer id, of your own choosing. Has to be the same as the pointer
file you previously created, i.e. brucewillis@robertnyman.com

em:name
The name of your extension.

em:version
Current version of your extension.

em:type
The type declares that it is an extension, as opposed to, for instance, a theme.

em:creator
You!

em:description
Describes your extension functionality. Will be shown in the Tools > Add-ons window.

em:homepageURL
The URL of your extension’s web site.

em:optionsURL
The URL to where you will have your file for editing options/preferences.
In the Description/
em:TargetApplication node
em:id
The actual id of Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}. Exchange
this to develop for another app, like Thunderbird.

em:minVersion
The minimum version number of Firefox to run the extension.

em:maxVersion
The maximum version number of Firefox to run the extension.



Valid alternatives for Firefox, Thunderbird etc and their corresponding versions
<?xml version="1.0"?>
<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>brucewillis@robertnyman.com</em:id>

   
    <em:name>Bruce Willis demo extension</em:name>

   
    <em:version>1.0</em:version>

   
    <em:type>2</em:type>

   
    <em:creator>Robert Nyman</em:creator>

    
    <em:description>Finds document headings and replaces them with Die
Hard movie titles</em:description>

   
    <em:homepageURL>http://www.robertnyman.com/</em:homepageURL>

    
    <em:optionsURL>chrome://brucewillis/content/preferences.xul</
em:optionsURL>



   
    <em:targetApplication>

   
    
    <Description>

   
    
    
      <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>

   
    
    
      <em:minVersion>2.0</em:minVersion>

   
    
    
      <em:maxVersion>3.1b2</em:maxVersion>

   
    
    </Description>

   
    </em:targetApplication>

   </Description>
</RDF>
More information in Install Manifests
chrome.manifest
File references and usage
content     brucewillis    chrome/content/

content     brucewillis    chrome/content/ contentaccessible=yes

overlay chrome://browser/content/browser.xul chrome://
brucewillis/content/browser.xul



locale
      brucewillis
 en-US
 chrome/locale/en-US/



skin
 brucewillis
 classic/1.0 chrome/skin/

style
 chrome://global/content/customizeToolbar.xul
chrome://
brucewillis/skin/skin.css
# Content pointer
content     brucewillis    chrome/content/


# Make content accessible from web pages in Firefox 3
content     brucewillis    chrome/content/ contentaccessible=yes


# Overlay browser skin
overlay chrome://browser/content/browser.xul chrome://
brucewillis/content/browser.xul
# Language versions
locale
      brucewillis
 en-US
 chrome/locale/en-US/
# Setting reference to extension skin
skin
 brucewillis
 classic/1.0 chrome/skin/


# Adding CSS to available toolbar buttons
style
 chrome://global/content/customizeToolbar.xul

 chrome://brucewillis/skin/skin.css
More information in Chrome Manifest
Are you with
 me so far?
chrome content folder
XUL, JavaScript and content CSS
XUL (“Zuul”) -
XML User Interface Language
  http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
• browser.xul
• bruce-willis.css
• bruceWillis.js
• preferences.xul
• browser.xul
• bruce-willis.css
• bruceWillis.js
• preferences.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/
css"?>
<!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd">
<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">

   
    <script src="bruceWillis.js" />

   

   
    <menupopup id="menu_ToolsPopup">

   
    
   <menuitem label="&runbrucewillis;" key="brucewillis-run-
key" oncommand="linkTargetFinder.run()"/>

   
    </menupopup>


   

   
    <keyset>

   
    
   <key id="brucewillis-run-key" modifiers="accel alt shift"
key="B" oncommand="bruceWillis.run()"/>

   
    </keyset>

   

   
    <statusbar id="status-bar">

   
    
   <statusbarpanel id="brucewillis-status-bar-icon"
class="statusbarpanel-iconic" src="chrome://brucewillis/skin/status-
bar.png" tooltiptext="&runbrucewillis;" onclick="bruceWillis.run()" />

   
    </statusbar>

   

   
    <toolbarpalette id="BrowserToolbarPalette">

   
    
   <toolbarbutton id="brucewillis-toolbar-button"
label="Bruce Willis" tooltiptext="&runbrucewillis;"
oncommand="bruceWillis.run()"/>

   
    </toolbarpalette>
</overlay>
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/
css"?>
<!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd">
<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/
gatekeeper/there.is.only.xul">
      <script src="bruceWillis.js" />
      <!-- Content -->
</overlay>
<!-- Tools menu option and keyboard shortcut -->
         <menupopup id="menu_ToolsPopup">

   
    
   <menuitem label="&runbrucewillis;" key="brucewillis-run-
key" oncommand="linkTargetFinder.run()"/>

   
    </menupopup>


   
      <keyset>

   
      
   <key id="brucewillis-run-key" modifiers="accel alt shift"
key="B"   oncommand="bruceWillis.run()"/>

   
      </keyset>
How To Write Your First Firefox Extension
<!-- Statusbar icon -->
         <statusbar id="status-bar">

   
    
   <statusbarpanel id="brucewillis-status-bar-icon"
class="statusbarpanel-iconic" src="chrome://brucewillis/skin/status-
bar.png" tooltiptext="&runbrucewillis;" onclick="bruceWillis.run()" />

   
    </statusbar>
How To Write Your First Firefox Extension
<!-- Firefox toolbar button -->

   
    <toolbarpalette id="BrowserToolbarPalette">

   
    
   <toolbarbutton id="brucewillis-toolbar-button"
label="Bruce Willis" tooltiptext="&runbrucewillis;"
oncommand="bruceWillis.run()"/>

   
    </toolbarpalette>
How To Write Your First Firefox Extension
• browser.xul
• bruce-willis.css
• bruceWillis.js
• preferences.xul
h1, h2, h3, h4 {

 font-family: Georgia, Times, serif;
}
• browser.xul
• bruce-willis.css
• bruceWillis.js
• preferences.xul
var bruceWillis = function () {

      var prefManager = Components.classes["@mozilla.org/preferences-service;
1"].getService(Components.interfaces.nsIPrefBranch);

      return {

      
      init : function () {

      
      
      gBrowser.addEventListener("load", function () {

      
      
      
      var autoRun = prefManager.getBoolPref("extensions.brucewillis.autorun");

      
      
      
      if (autoRun) {

      
      
      
      
      bruceWillis.run();

      
      
      
      }

      
      
      }, false);

      
      },

      
      

      
      run : function () {

      
      
      var head = content.document.getElementsByTagName("head")[0],

      
      
      
      style = content.document.getElementById("bruce-willis-style"),

      
      
      
      h1 = content.document.getElementsByTagName("h1"),

      
      
      
      h2 = content.document.getElementsByTagName("h2"),

      
      
      
      h3 = content.document.getElementsByTagName("h3"),

      
      
      
      h4 = content.document.getElementsByTagName("h4");

      
      

      
      
      if (!style) {

      
      
      
      style = content.document.createElement("link");

      
      
      
      style.id = "brucewillis-style";

      
      
      
      style.type = "text/css";

      
      
      
      style.rel = "stylesheet";

      
      
      
      style.href = "chrome://brucewillis/content/bruce-willis.css";

      
      
      
      head.appendChild(style);

      
      
      }


      
      
      for (var i=0, il=h1.length; i<il; i++) {

      
      
      
      h1[i].textContent = "Die Hard 1";

      
      
      }

      
      

      
      
      for (var i=0, il=h2.length; i<il; i++) {

      
      
      
      h2[i].textContent = "Die Hard 2";

      
      
      }

      
      

      
      
      for (var i=0, il=h3.length; i<il; i++) {

      
      
      
      h3[i].textContent = "Die Hard 3";

      
      
      }

      
      

      
      
      for (var i=0, il=h4.length; i<il; i++) {

      
      
      
      h4[i].textContent = "Die Hard 4";

      
      
      }

      
      }

      };
}();
window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
// Structure - Yahoo JavaScript Module Pattern
var bruceWillis = function () {

    var prefManager = Components.classes["@mozilla.org/preferences-
service;1"].getService(Components.interfaces.nsIPrefBranch);

    return {

    
   init : function () {
             // init method

    
   },

    
   

    
   run : function () {
             // run method

    
   }

    };
}();
window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
// init method

   
    init : function () {

   
    
   gBrowser.addEventListener("load", function () {

   
    
   
    var autoRun =
prefManager.getBoolPref("extensions.brucewillis.autorun");

   
    
   
    if (autoRun) {

   
    
   
    
   bruceWillis.run();

   
    
   
    }

   
    
   }, false);

   
    }
// run method

   
   run : function () {

   
   
    var head = content.document.getElementsByTagName("head")[0],

   
   
    
     style = content.document.getElementById("bruce-willis-style"),

   
   
    
     h1 = content.document.getElementsByTagName("h1"),

   
   
    
     h2 = content.document.getElementsByTagName("h2"),

   
   
    
     h3 = content.document.getElementsByTagName("h3"),

   
   
    
     h4 = content.document.getElementsByTagName("h4");

   
   

   
   
    if (!style) {

   
   
    
     style = content.document.createElement("link");

   
   
    
     style.id = "brucewillis-style";

   
   
    
     style.type = "text/css";

   
   
    
     style.rel = "stylesheet";

   
   
    
     style.href = "chrome://brucewillis/content/bruce-willis.css";

   
   
    
     head.appendChild(style);

   
   
    }


   
   
    for (var i=0, il=h1.length; i<il; i++) {

   
   
    
    h1[i].textContent = "Die Hard 1";

   
   
    }

   
   

   
   
    for (var i=0, il=h2.length; i<il; i++) {

   
   
    
    h2[i].textContent = "Die Hard 2";

   
   
    }

   
   

   
   
    for (var i=0, il=h3.length; i<il; i++) {

   
   
    
    h3[i].textContent = "Die Hard 3";

   
   
    }

   
   

   
   
    for (var i=0, il=h4.length; i<il; i++) {

   
   
    
    h4[i].textContent = "Die Hard 4";

   
   
    }

   
   }
// Run when DOM has loaded
window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
• browser.xul
• bruce-willis.css
• bruceWillis.js
• preferences.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<prefwindow
     title="Bruce Willis Preferences"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/
there.is.only.xul">


   <prefpane label="Bruce Willis Preferences">

   
    <preferences>

   
    
   <preference id="brucewillis-autorun"
name="extensions.brucewillis.autorun" type="bool"/>

   
    </preferences>

   

   
    <groupbox>

   
    
   <caption label="Settings"/>

   
    
   <grid>

   
    
   
    <columns>

   
    
   
    
   <column flex="4"/>

   
    
   
    
   <column flex="1"/>

   
    
   
    </columns>

   
    
   
    <rows>

   
    
   
    
   <row>

   
    
   
    
   
    <label control="autorun" value="Autorun"/>

   
    
   
    
   
    <checkbox id="autorun"
preference="brucewillis-autorun"/>

   
    
   
    
   </row>

   
    
   
    </rows>

   
    
   </grid>

   
    </groupbox>

   

   </prefpane>

</prefwindow>
<!-- Connect element to extension preference -->

   
    <preferences>

   
    
   <preference id="brucewillis-autorun"
name="extensions.brucewillis.autorun" type="bool"/>

   
    </preferences>

   


   
   <checkbox id="autorun" preference="brucewillis-autorun"/>
How To Write Your First Firefox Extension
chrome locale folder
Offering localization
translations.dtd:

<!ENTITY runbrucewillis "Run Bruce Willis">
chrome skins folder
Skin your extension with CSS and images
• skin.css
• status-bar.png
• toolbar-button.png
/* skin.css */


/* Style in View > Toolbars > Customize */
#brucewillis-toolbar-button {

   list-style-image: url(chrome://brucewillis/skin/toolbar-
button.png);
}


#brucewillis-status-bar-icon {

   width: 83px;

   margin: 0 5px;
}
/* status-bar.png */
/* toolbar-button.png */
preferences - defaults folder
Setting default extension values
// prefs.js

pref("extensions.brucewillis.autorun", false);
Packaging & Installing
An XPI (“zippy”) is just a zipped file
ZIP the contents of your extension folder
(only the contents, NOT the folder itself)
Windows:

Mark all files, right-click and choose:
Send To > Compressed
Rename ZIP file to .xpi

Mac OS X/Linux (in Terminal):

Navigate to your extension files. Type in:
zip -r BruceWillis.xpi *
Drag your XPI file into Firefox - Voilà!
What it looks like
Before
After
Distributing Your
    Add-On
addons.mozilla.org
or through secure location (SSL)


Successfully Getting your Addon Reviewed
Downloads
• Download Bruce Willis extension
• Browse source files
• Presentation slides at:
  http://robertnyman.com/speaking/
Learn more
Learn by looking at others
In your Profile folder
What you’ve learned
1. Create development profile
2. Configuration settings
3. Pointing extension to your dev directory
4. Creating folder structure & files
5. Packaging & installing
6. Distributing your add-on
That’s it!
How To Write Your First Firefox Extension
Robert Nyman
                     robert@robertnyman.com
                      http://robertnyman.com
Images:
    http://www.learningresources.com/product/teachers/shop+by+category/activity+kits/construction/m--8226-
    gears--174-+building+set.do
    http://www.soitenlystooges.com/item.asp?sku=FGSU578
    http://www.flickr.com/photos/28791486@N03/2700643931/
    http://www.fetasteutgavan.se/blogg/wp/?p=39
    http://www.pixabella.com/plugin/tag/red-hearts
    http://www.woodlands-junior.kent.sch.uk/customs/xmas/calendar/day13.html
    http://www.intercan.org/coordinator_list.asp

Contenu connexe

Tendances

Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Dave Wallace
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentSitdhibong Laokok
 
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)TaiShunHuang
 
WebMatrix 100-level presentation
WebMatrix 100-level presentationWebMatrix 100-level presentation
WebMatrix 100-level presentationAlice Pang
 
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampArchitecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampDipen Chaudhary
 
Whmcs addon module docs
Whmcs addon module docsWhmcs addon module docs
Whmcs addon module docsquyvn
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogigorgentry
 
4.content mgmt
4.content mgmt4.content mgmt
4.content mgmtWingston
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPressNile Flores
 
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 DrupalI use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 DrupalChris Wu
 
Drupal 8 Theme System: The Backend of Frontend
Drupal 8 Theme System: The Backend of FrontendDrupal 8 Theme System: The Backend of Frontend
Drupal 8 Theme System: The Backend of FrontendAcquia
 
Drupal vs WordPress
Drupal vs WordPressDrupal vs WordPress
Drupal vs WordPressWalter Ebert
 
WordPress Theme Development
WordPress Theme DevelopmentWordPress Theme Development
WordPress Theme DevelopmentWisdmLabs
 
Moodle 3.3 - API Change Overview #mootieuk17
Moodle 3.3 - API Change Overview #mootieuk17Moodle 3.3 - API Change Overview #mootieuk17
Moodle 3.3 - API Change Overview #mootieuk17Dan Poltawski
 
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱NAVER D2
 

Tendances (20)

Hpage
HpageHpage
Hpage
 
Creating a basic joomla
Creating a basic joomlaCreating a basic joomla
Creating a basic joomla
 
Cms & wordpress theme development 2011
Cms & wordpress theme development 2011Cms & wordpress theme development 2011
Cms & wordpress theme development 2011
 
CustomThesis
CustomThesisCustomThesis
CustomThesis
 
Introduction to WordPress Theme Development
Introduction to WordPress Theme DevelopmentIntroduction to WordPress Theme Development
Introduction to WordPress Theme Development
 
PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)PHP記帳網頁教材(第一頁是空白的)
PHP記帳網頁教材(第一頁是空白的)
 
WebMatrix 100-level presentation
WebMatrix 100-level presentationWebMatrix 100-level presentation
WebMatrix 100-level presentation
 
Architecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal CampArchitecture of Drupal - Drupal Camp
Architecture of Drupal - Drupal Camp
 
Whmcs addon module docs
Whmcs addon module docsWhmcs addon module docs
Whmcs addon module docs
 
Installing And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blogInstalling And Configuration for your Wordpress blog
Installing And Configuration for your Wordpress blog
 
4.content mgmt
4.content mgmt4.content mgmt
4.content mgmt
 
PSD to WordPress
PSD to WordPressPSD to WordPress
PSD to WordPress
 
Fundamental JQuery
Fundamental JQueryFundamental JQuery
Fundamental JQuery
 
Death of a Themer
Death of a ThemerDeath of a Themer
Death of a Themer
 
I use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 DrupalI use drupal / 我是 OO 師,我用 Drupal
I use drupal / 我是 OO 師,我用 Drupal
 
Drupal 8 Theme System: The Backend of Frontend
Drupal 8 Theme System: The Backend of FrontendDrupal 8 Theme System: The Backend of Frontend
Drupal 8 Theme System: The Backend of Frontend
 
Drupal vs WordPress
Drupal vs WordPressDrupal vs WordPress
Drupal vs WordPress
 
WordPress Theme Development
WordPress Theme DevelopmentWordPress Theme Development
WordPress Theme Development
 
Moodle 3.3 - API Change Overview #mootieuk17
Moodle 3.3 - API Change Overview #mootieuk17Moodle 3.3 - API Change Overview #mootieuk17
Moodle 3.3 - API Change Overview #mootieuk17
 
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
 

En vedette

Place graphs are the new social graphs
Place graphs are the new social graphsPlace graphs are the new social graphs
Place graphs are the new social graphsMatt Biddulph
 
How to do presentations that don't induce suicide
How to do presentations that don't induce suicideHow to do presentations that don't induce suicide
How to do presentations that don't induce suicideAndy Whitlock
 
Spanish translation (my school day)
Spanish translation (my school day)Spanish translation (my school day)
Spanish translation (my school day)tc776618mhs
 
Testo Instruments 2012 overview
Testo Instruments 2012 overviewTesto Instruments 2012 overview
Testo Instruments 2012 overviewTesto Limited
 
Assgn. 1 essay question traditional houses
Assgn. 1 essay question   traditional housesAssgn. 1 essay question   traditional houses
Assgn. 1 essay question traditional housessuehwa533
 
Extending the Virtual World Framework for Mobile Training
Extending the Virtual World Framework for Mobile TrainingExtending the Virtual World Framework for Mobile Training
Extending the Virtual World Framework for Mobile TrainingRonald Punako, Jr.
 
The home and the world
The home and the worldThe home and the world
The home and the worldRoyB
 
Perubahan entalpi reaksi menggunakan kalorimeter sederhana
Perubahan entalpi reaksi menggunakan kalorimeter sederhanaPerubahan entalpi reaksi menggunakan kalorimeter sederhana
Perubahan entalpi reaksi menggunakan kalorimeter sederhanaSabrianah Badaruddin
 
Value analysis and Value Engineering in Cost Control
Value analysis and Value Engineering in Cost ControlValue analysis and Value Engineering in Cost Control
Value analysis and Value Engineering in Cost Controlsunilrajpawar
 
a manual of wood-Carving.
a manual of wood-Carving.a manual of wood-Carving.
a manual of wood-Carving.zuhairbuzid
 
Confucius on Leadership
Confucius on LeadershipConfucius on Leadership
Confucius on LeadershipRichard Brown
 
iPhone Coding For Web Developers
iPhone Coding For Web DevelopersiPhone Coding For Web Developers
iPhone Coding For Web DevelopersMatt Biddulph
 
Gestion TTHH Contexto y Funciones
Gestion TTHH Contexto y FuncionesGestion TTHH Contexto y Funciones
Gestion TTHH Contexto y Funcionesuniversidadvirtual
 
Redis everywhere - PHP London
Redis everywhere - PHP LondonRedis everywhere - PHP London
Redis everywhere - PHP LondonRicard Clau
 

En vedette (20)

Place graphs are the new social graphs
Place graphs are the new social graphsPlace graphs are the new social graphs
Place graphs are the new social graphs
 
 
How to do presentations that don't induce suicide
How to do presentations that don't induce suicideHow to do presentations that don't induce suicide
How to do presentations that don't induce suicide
 
Spanish translation (my school day)
Spanish translation (my school day)Spanish translation (my school day)
Spanish translation (my school day)
 
Testo Instruments 2012 overview
Testo Instruments 2012 overviewTesto Instruments 2012 overview
Testo Instruments 2012 overview
 
Struts2 - 101
Struts2 - 101Struts2 - 101
Struts2 - 101
 
Assgn. 1 essay question traditional houses
Assgn. 1 essay question   traditional housesAssgn. 1 essay question   traditional houses
Assgn. 1 essay question traditional houses
 
Extending the Virtual World Framework for Mobile Training
Extending the Virtual World Framework for Mobile TrainingExtending the Virtual World Framework for Mobile Training
Extending the Virtual World Framework for Mobile Training
 
The home and the world
The home and the worldThe home and the world
The home and the world
 
Environmental graphics
Environmental graphicsEnvironmental graphics
Environmental graphics
 
Perubahan entalpi reaksi menggunakan kalorimeter sederhana
Perubahan entalpi reaksi menggunakan kalorimeter sederhanaPerubahan entalpi reaksi menggunakan kalorimeter sederhana
Perubahan entalpi reaksi menggunakan kalorimeter sederhana
 
Vulva hygiene
Vulva hygieneVulva hygiene
Vulva hygiene
 
Value analysis and Value Engineering in Cost Control
Value analysis and Value Engineering in Cost ControlValue analysis and Value Engineering in Cost Control
Value analysis and Value Engineering in Cost Control
 
a manual of wood-Carving.
a manual of wood-Carving.a manual of wood-Carving.
a manual of wood-Carving.
 
Confucius on Leadership
Confucius on LeadershipConfucius on Leadership
Confucius on Leadership
 
Brincar+ vygotsky
Brincar+ vygotskyBrincar+ vygotsky
Brincar+ vygotsky
 
Challenges in Implementing EMR: The Singapore Story
Challenges in Implementing EMR: The Singapore StoryChallenges in Implementing EMR: The Singapore Story
Challenges in Implementing EMR: The Singapore Story
 
iPhone Coding For Web Developers
iPhone Coding For Web DevelopersiPhone Coding For Web Developers
iPhone Coding For Web Developers
 
Gestion TTHH Contexto y Funciones
Gestion TTHH Contexto y FuncionesGestion TTHH Contexto y Funciones
Gestion TTHH Contexto y Funciones
 
Redis everywhere - PHP London
Redis everywhere - PHP LondonRedis everywhere - PHP London
Redis everywhere - PHP London
 

Similaire à How To Write Your First Firefox Extension

HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and ImprovedTimothy Fisher
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeLaurence Svekis ✔
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic templatevathur
 
Cliw - extension development
Cliw -  extension developmentCliw -  extension development
Cliw - extension developmentvicccuu
 
Joomla Beginner Template Presentation
Joomla Beginner Template PresentationJoomla Beginner Template Presentation
Joomla Beginner Template Presentationalledia
 
Web development - technologies and tools
Web development - technologies and toolsWeb development - technologies and tools
Web development - technologies and toolsYoann Gotthilf
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksBrad Williams
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress WebsitesKyle Cearley
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...Roni Banerjee
 
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & GoalsBob Lail
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress themeHardeep Asrani
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalChandra Prakash Thapa
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsAlessandro Molina
 

Similaire à How To Write Your First Firefox Extension (20)

Polymer 1.0
Polymer 1.0Polymer 1.0
Polymer 1.0
 
HTML5 New and Improved
HTML5   New and ImprovedHTML5   New and Improved
HTML5 New and Improved
 
JavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive CodeJavaScript DOM - Dynamic interactive Code
JavaScript DOM - Dynamic interactive Code
 
How to create a basic template
How to create a basic templateHow to create a basic template
How to create a basic template
 
Yuihacku iitd-sumana
Yuihacku iitd-sumanaYuihacku iitd-sumana
Yuihacku iitd-sumana
 
Cliw - extension development
Cliw -  extension developmentCliw -  extension development
Cliw - extension development
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
Joomla Beginner Template Presentation
Joomla Beginner Template PresentationJoomla Beginner Template Presentation
Joomla Beginner Template Presentation
 
Create a landing page
Create a landing pageCreate a landing page
Create a landing page
 
Web development - technologies and tools
Web development - technologies and toolsWeb development - technologies and tools
Web development - technologies and tools
 
Advanced Thesis Techniques and Tricks
Advanced Thesis Techniques and TricksAdvanced Thesis Techniques and Tricks
Advanced Thesis Techniques and Tricks
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
 
The Thinking behind BEM
The Thinking behind BEMThe Thinking behind BEM
The Thinking behind BEM
 
HTML & CSS 2017
HTML & CSS 2017HTML & CSS 2017
HTML & CSS 2017
 
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
“Good design is obvious. Great design is transparent.” — How we use Bootstrap...
 
Ember: Guts & Goals
Ember: Guts & GoalsEmber: Guts & Goals
Ember: Guts & Goals
 
Bootstrap 3
Bootstrap 3Bootstrap 3
Bootstrap 3
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
 
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 NepalWordPress theme development from scratch : ICT MeetUp 2013 Nepal
WordPress theme development from scratch : ICT MeetUp 2013 Nepal
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
 

Plus de Robert Nyman

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?Robert Nyman
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Robert Nyman
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google DaydreamRobert Nyman
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the WebRobert Nyman
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016Robert Nyman
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016Robert Nyman
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaRobert Nyman
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & productsRobert Nyman
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Robert Nyman
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanRobert Nyman
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...Robert Nyman
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulRobert Nyman
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goRobert Nyman
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilitiesRobert Nyman
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the NordicsRobert Nyman
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?Robert Nyman
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupRobert Nyman
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiRobert Nyman
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiRobert Nyman
 

Plus de Robert Nyman (20)

Have you tried listening?
Have you tried listening?Have you tried listening?
Have you tried listening?
 
Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017Building for Your Next Billion - Google I/O 2017
Building for Your Next Billion - Google I/O 2017
 
Introduction to Google Daydream
Introduction to Google DaydreamIntroduction to Google Daydream
Introduction to Google Daydream
 
Predictability for the Web
Predictability for the WebPredictability for the Web
Predictability for the Web
 
The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016The Future of Progressive Web Apps - View Source conference, Berlin 2016
The Future of Progressive Web Apps - View Source conference, Berlin 2016
 
The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016The Future of the Web - Cold Front conference 2016
The Future of the Web - Cold Front conference 2016
 
The Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for IndonesiaThe Future of Progressive Web Apps - Google for Indonesia
The Future of Progressive Web Apps - Google for Indonesia
 
Google tech & products
Google tech & productsGoogle tech & products
Google tech & products
 
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
Introduction to Progressive Web Apps, Google Developer Summit, Seoul - South ...
 
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, JapanProgressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
Progressive Web Apps keynote, Google Developer Summit, Tokyo, Japan
 
The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...The web - What it has, what it lacks and where it must go - keynote at Riga D...
The web - What it has, what it lacks and where it must go - keynote at Riga D...
 
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
The web - What it has, what it lacks and where it must go - Bulgaria Web Summ...
 
The web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - IstanbulThe web - What it has, what it lacks and where it must go - Istanbul
The web - What it has, what it lacks and where it must go - Istanbul
 
The web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must goThe web - What it has, what it lacks and where it must go
The web - What it has, what it lacks and where it must go
 
Google, the future and possibilities
Google, the future and possibilitiesGoogle, the future and possibilities
Google, the future and possibilities
 
Developer Relations in the Nordics
Developer Relations in the NordicsDeveloper Relations in the Nordics
Developer Relations in the Nordics
 
What is Developer Relations?
What is Developer Relations?What is Developer Relations?
What is Developer Relations?
 
Android TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetupAndroid TV Introduction - Stockholm Android TV meetup
Android TV Introduction - Stockholm Android TV meetup
 
New improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, HelsinkiNew improvements for web developers - frontend.fi, Helsinki
New improvements for web developers - frontend.fi, Helsinki
 
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, HelsinkiMobile phone trends, user data & developer climate - frontend.fi, Helsinki
Mobile phone trends, user data & developer climate - frontend.fi, Helsinki
 

Dernier

activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
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
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
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
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
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
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
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
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 

Dernier (20)

activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
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
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
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
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
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...
 
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
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
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
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 

How To Write Your First Firefox Extension

  • 1. How to Write Your First Extension
  • 3. Bruce Willis Extension (Francois Mori/AP Photo)
  • 4. How to Write Your First Extension 1. Create development profile 2. Configuration settings 3. Pointing extension to your dev directory 4. Creating folder structure & files 5. Packaging & installing 6. Distributing your add-on
  • 6. Keep a separate Firefox profile for extension development
  • 7. Windows: Start menu > Run (Windows key + R). Write firefox -P and press click OK. Mac OS X (in Terminal): Type in /Applications/Firefox.app/ Contents/MacOS/firefox - profilemanager Linux (in a terminal): Use cd to navigate to your Firefox directory and then enter ./firefox -profilemanager
  • 11. Pointing Extension to Your Development Directory
  • 12. Find your Profile directory
  • 13. Windows: Win XP: C:Documents and Settings[user name] Application DataMozillaFirefoxProfiles Vista: C:Users[user name]AppDataRoaming Mac OS X (~ = /Users/[user name]): ~/Library/Application Support/Firefox/Profiles/ Linux: ~/.mozilla/
  • 14. Go to [Dev Profile]/extensions/ folder
  • 15. Create empty file (no file extension!): brucewillis@robertnyman.com
  • 17. Point to your extension code, i.e. file path: Windows: E.g: C:devbrucewillis Mac/Linux: E.g: ~/dev/brucewillis/
  • 19. 1. Open Firefox: - Have your development profile as default - or Through Profile Manager 2. Type in about:config
  • 21. Recommended settings: javascript.options.showInConsole = true nglayout.debug.disable_xul_cache = true browser.dom.window.dump.enabled = true
  • 22. • Optional settings: javascript.options.strict = true extensions.logging.enabled = true
  • 27. • Automatic creation of extension • Extension Developer extension
  • 30. <?xml version="1.0"?> <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>brucewillis@robertnyman.com</em:id> <em:name>Bruce Willis demo extension</em:name> <em:version>1.0</em:version> <em:type>2</em:type> <em:creator>Robert Nyman</em:creator> <em:description>Finds document headings and replaces them with Die Hard movie titles</em:description> <em:homepageURL>http://www.robertnyman.com/</em:homepageURL> <em:optionsURL>chrome://brucewillis/content/preferences.xul</ em:optionsURL> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>2.0</em:minVersion> <em:maxVersion>3.1b2</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
  • 33. em:id Your unique developer id, of your own choosing. Has to be the same as the pointer file you previously created, i.e. brucewillis@robertnyman.com em:name The name of your extension. em:version Current version of your extension. em:type The type declares that it is an extension, as opposed to, for instance, a theme. em:creator You! em:description Describes your extension functionality. Will be shown in the Tools > Add-ons window. em:homepageURL The URL of your extension’s web site. em:optionsURL The URL to where you will have your file for editing options/preferences.
  • 35. em:id The actual id of Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}. Exchange this to develop for another app, like Thunderbird. em:minVersion The minimum version number of Firefox to run the extension. em:maxVersion The maximum version number of Firefox to run the extension. Valid alternatives for Firefox, Thunderbird etc and their corresponding versions
  • 36. <?xml version="1.0"?> <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>brucewillis@robertnyman.com</em:id> <em:name>Bruce Willis demo extension</em:name> <em:version>1.0</em:version> <em:type>2</em:type> <em:creator>Robert Nyman</em:creator> <em:description>Finds document headings and replaces them with Die Hard movie titles</em:description> <em:homepageURL>http://www.robertnyman.com/</em:homepageURL> <em:optionsURL>chrome://brucewillis/content/preferences.xul</ em:optionsURL> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>2.0</em:minVersion> <em:maxVersion>3.1b2</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF>
  • 37. More information in Install Manifests
  • 40. content brucewillis chrome/content/ content brucewillis chrome/content/ contentaccessible=yes overlay chrome://browser/content/browser.xul chrome:// brucewillis/content/browser.xul locale brucewillis en-US chrome/locale/en-US/ skin brucewillis classic/1.0 chrome/skin/ style chrome://global/content/customizeToolbar.xul chrome:// brucewillis/skin/skin.css
  • 41. # Content pointer content brucewillis chrome/content/ # Make content accessible from web pages in Firefox 3 content brucewillis chrome/content/ contentaccessible=yes # Overlay browser skin overlay chrome://browser/content/browser.xul chrome:// brucewillis/content/browser.xul
  • 42. # Language versions locale brucewillis en-US chrome/locale/en-US/
  • 43. # Setting reference to extension skin skin brucewillis classic/1.0 chrome/skin/ # Adding CSS to available toolbar buttons style chrome://global/content/customizeToolbar.xul chrome://brucewillis/skin/skin.css
  • 44. More information in Chrome Manifest
  • 45. Are you with me so far?
  • 47. XUL, JavaScript and content CSS
  • 48. XUL (“Zuul”) - XML User Interface Language http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul
  • 49. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  • 50. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  • 51. <?xml version="1.0"?> <?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/ css"?> <!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd"> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul"> <script src="bruceWillis.js" /> <menupopup id="menu_ToolsPopup"> <menuitem label="&runbrucewillis;" key="brucewillis-run- key" oncommand="linkTargetFinder.run()"/> </menupopup> <keyset> <key id="brucewillis-run-key" modifiers="accel alt shift" key="B" oncommand="bruceWillis.run()"/> </keyset> <statusbar id="status-bar"> <statusbarpanel id="brucewillis-status-bar-icon" class="statusbarpanel-iconic" src="chrome://brucewillis/skin/status- bar.png" tooltiptext="&runbrucewillis;" onclick="bruceWillis.run()" /> </statusbar> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="brucewillis-toolbar-button" label="Bruce Willis" tooltiptext="&runbrucewillis;" oncommand="bruceWillis.run()"/> </toolbarpalette> </overlay>
  • 52. <?xml version="1.0"?> <?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/ css"?> <!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd">
  • 53. <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/ gatekeeper/there.is.only.xul"> <script src="bruceWillis.js" /> <!-- Content --> </overlay>
  • 54. <!-- Tools menu option and keyboard shortcut --> <menupopup id="menu_ToolsPopup"> <menuitem label="&runbrucewillis;" key="brucewillis-run- key" oncommand="linkTargetFinder.run()"/> </menupopup> <keyset> <key id="brucewillis-run-key" modifiers="accel alt shift" key="B" oncommand="bruceWillis.run()"/> </keyset>
  • 56. <!-- Statusbar icon --> <statusbar id="status-bar"> <statusbarpanel id="brucewillis-status-bar-icon" class="statusbarpanel-iconic" src="chrome://brucewillis/skin/status- bar.png" tooltiptext="&runbrucewillis;" onclick="bruceWillis.run()" /> </statusbar>
  • 58. <!-- Firefox toolbar button --> <toolbarpalette id="BrowserToolbarPalette"> <toolbarbutton id="brucewillis-toolbar-button" label="Bruce Willis" tooltiptext="&runbrucewillis;" oncommand="bruceWillis.run()"/> </toolbarpalette>
  • 60. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  • 61. h1, h2, h3, h4 { font-family: Georgia, Times, serif; }
  • 62. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  • 63. var bruceWillis = function () { var prefManager = Components.classes["@mozilla.org/preferences-service; 1"].getService(Components.interfaces.nsIPrefBranch); return { init : function () { gBrowser.addEventListener("load", function () { var autoRun = prefManager.getBoolPref("extensions.brucewillis.autorun"); if (autoRun) { bruceWillis.run(); } }, false); }, run : function () { var head = content.document.getElementsByTagName("head")[0], style = content.document.getElementById("bruce-willis-style"), h1 = content.document.getElementsByTagName("h1"), h2 = content.document.getElementsByTagName("h2"), h3 = content.document.getElementsByTagName("h3"), h4 = content.document.getElementsByTagName("h4"); if (!style) { style = content.document.createElement("link"); style.id = "brucewillis-style"; style.type = "text/css"; style.rel = "stylesheet"; style.href = "chrome://brucewillis/content/bruce-willis.css"; head.appendChild(style); } for (var i=0, il=h1.length; i<il; i++) { h1[i].textContent = "Die Hard 1"; } for (var i=0, il=h2.length; i<il; i++) { h2[i].textContent = "Die Hard 2"; } for (var i=0, il=h3.length; i<il; i++) { h3[i].textContent = "Die Hard 3"; } for (var i=0, il=h4.length; i<il; i++) { h4[i].textContent = "Die Hard 4"; } } }; }(); window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
  • 64. // Structure - Yahoo JavaScript Module Pattern var bruceWillis = function () { var prefManager = Components.classes["@mozilla.org/preferences- service;1"].getService(Components.interfaces.nsIPrefBranch); return { init : function () { // init method }, run : function () { // run method } }; }(); window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
  • 65. // init method init : function () { gBrowser.addEventListener("load", function () { var autoRun = prefManager.getBoolPref("extensions.brucewillis.autorun"); if (autoRun) { bruceWillis.run(); } }, false); }
  • 66. // run method run : function () { var head = content.document.getElementsByTagName("head")[0], style = content.document.getElementById("bruce-willis-style"), h1 = content.document.getElementsByTagName("h1"), h2 = content.document.getElementsByTagName("h2"), h3 = content.document.getElementsByTagName("h3"), h4 = content.document.getElementsByTagName("h4"); if (!style) { style = content.document.createElement("link"); style.id = "brucewillis-style"; style.type = "text/css"; style.rel = "stylesheet"; style.href = "chrome://brucewillis/content/bruce-willis.css"; head.appendChild(style); } for (var i=0, il=h1.length; i<il; i++) { h1[i].textContent = "Die Hard 1"; } for (var i=0, il=h2.length; i<il; i++) { h2[i].textContent = "Die Hard 2"; } for (var i=0, il=h3.length; i<il; i++) { h3[i].textContent = "Die Hard 3"; } for (var i=0, il=h4.length; i<il; i++) { h4[i].textContent = "Die Hard 4"; } }
  • 67. // Run when DOM has loaded window.addEventListener("DOMContentLoaded", bruceWillis.init, false);
  • 68. • browser.xul • bruce-willis.css • bruceWillis.js • preferences.xul
  • 69. <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow title="Bruce Willis Preferences" xmlns="http://www.mozilla.org/keymaster/gatekeeper/ there.is.only.xul"> <prefpane label="Bruce Willis Preferences"> <preferences> <preference id="brucewillis-autorun" name="extensions.brucewillis.autorun" type="bool"/> </preferences> <groupbox> <caption label="Settings"/> <grid> <columns> <column flex="4"/> <column flex="1"/> </columns> <rows> <row> <label control="autorun" value="Autorun"/> <checkbox id="autorun" preference="brucewillis-autorun"/> </row> </rows> </grid> </groupbox> </prefpane> </prefwindow>
  • 70. <!-- Connect element to extension preference --> <preferences> <preference id="brucewillis-autorun" name="extensions.brucewillis.autorun" type="bool"/> </preferences> <checkbox id="autorun" preference="brucewillis-autorun"/>
  • 76. Skin your extension with CSS and images
  • 78. /* skin.css */ /* Style in View > Toolbars > Customize */ #brucewillis-toolbar-button { list-style-image: url(chrome://brucewillis/skin/toolbar- button.png); } #brucewillis-status-bar-icon { width: 83px; margin: 0 5px; }
  • 85. An XPI (“zippy”) is just a zipped file
  • 86. ZIP the contents of your extension folder (only the contents, NOT the folder itself)
  • 87. Windows: Mark all files, right-click and choose: Send To > Compressed Rename ZIP file to .xpi Mac OS X/Linux (in Terminal): Navigate to your extension files. Type in: zip -r BruceWillis.xpi *
  • 88. Drag your XPI file into Firefox - Voilà!
  • 91. After
  • 93. addons.mozilla.org or through secure location (SSL) Successfully Getting your Addon Reviewed
  • 95. • Download Bruce Willis extension • Browse source files • Presentation slides at: http://robertnyman.com/speaking/
  • 97. Learn by looking at others
  • 100. 1. Create development profile 2. Configuration settings 3. Pointing extension to your dev directory 4. Creating folder structure & files 5. Packaging & installing 6. Distributing your add-on
  • 103. Robert Nyman robert@robertnyman.com http://robertnyman.com Images: http://www.learningresources.com/product/teachers/shop+by+category/activity+kits/construction/m--8226- gears--174-+building+set.do http://www.soitenlystooges.com/item.asp?sku=FGSU578 http://www.flickr.com/photos/28791486@N03/2700643931/ http://www.fetasteutgavan.se/blogg/wp/?p=39 http://www.pixabella.com/plugin/tag/red-hearts http://www.woodlands-junior.kent.sch.uk/customs/xmas/calendar/day13.html http://www.intercan.org/coordinator_list.asp