103
How to Write Your First Extension

How To Write Your First Firefox Extension

Embed Size (px)

DESCRIPTION

Will give you an introduction how to write your first Firefox extension

Citation preview

Page 1: How To Write Your First Firefox Extension

How to Write Your First Extension

Page 2: How To Write Your First Firefox Extension
Page 3: How To Write Your First Firefox Extension

Bruce Willis Extension(Francois Mori/AP Photo)

Page 4: How To Write Your First Firefox 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

How to Write Your First Extension

Page 5: How To Write Your First Firefox Extension

Create Development Profile

Page 6: How To Write Your First Firefox Extension

Keep a separate Firefox profile for extension development

Page 7: How To Write Your First Firefox Extension

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

Page 8: How To Write Your First Firefox Extension
Page 9: How To Write Your First Firefox Extension
Page 10: How To Write Your First Firefox Extension
Page 11: How To Write Your First Firefox Extension

Pointing Extension to Your Development

Directory

Page 12: How To Write Your First Firefox Extension

Find your Profile directory

Page 13: How To Write Your First Firefox Extension

Windows:

Win XP: C:\Documents and Settings\[user name]\Application Data\Mozilla\Firefox\Profiles

Vista: C:\Users\[user name]\AppData\Roaming

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

~/Library/Application Support/Firefox/Profiles/

Linux:

~/.mozilla/

Page 14: How To Write Your First Firefox Extension

Go to [Dev Profile]/extensions/ folder

Page 15: How To Write Your First Firefox Extension

Create empty file (no file extension!):

[email protected]

Page 16: How To Write Your First Firefox Extension
Page 17: How To Write Your First Firefox Extension

Point to your extension code, i.e. file path:

Windows:

E.g: C:\dev\brucewillis\

Mac/Linux:

E.g: ~/dev/brucewillis/

Page 18: How To Write Your First Firefox Extension

Configuration Settings

Page 19: How To Write Your First Firefox Extension

1. Open Firefox:

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

2. Type in about:config

Page 20: How To Write Your First Firefox Extension
Page 21: 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

Page 22: How To Write Your First Firefox Extension

• Optional settings:

javascript.options.strict = true

extensions.logging.enabled = true

Page 23: How To Write Your First Firefox Extension
Page 24: How To Write Your First Firefox Extension
Page 25: How To Write Your First Firefox Extension

Creating Folder Structure & Files

Page 26: How To Write Your First Firefox Extension
Page 28: How To Write Your First Firefox Extension

install.rdf

Page 29: How To Write Your First Firefox Extension

Information, IDs and metadata

Page 30: How To Write Your First Firefox Extension

<?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>[email protected]</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>

Page 31: How To Write Your First Firefox Extension
Page 32: How To Write Your First Firefox Extension

In the Description node

Page 33: How To Write Your First Firefox Extension

em:idYour unique developer id, of your own choosing. Has to be the same as the pointer file you previously created, i.e. [email protected]

em:nameThe name of your extension.

em:versionCurrent version of your extension.

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

em:creator You!

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

em:homepageURLThe URL of your extension’s web site.

em:optionsURL The URL to where you will have your file for editing options/preferences.

Page 34: How To Write Your First Firefox Extension

In the Description/em:TargetApplication node

Page 35: How To Write Your First Firefox Extension

em:idThe actual id of Firefox: {ec8030f7-c20a-464f-9b0e-13a3a9e97384}. Exchange this to develop for another app, like Thunderbird.

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

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

Valid alternatives for Firefox, Thunderbird etc and their corresponding versions

Page 36: How To Write Your First Firefox Extension

<?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>[email protected]</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>

Page 38: How To Write Your First Firefox Extension

chrome.manifest

Page 39: How To Write Your First Firefox Extension

File references and usage

Page 40: How To Write Your First Firefox Extension

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

Page 41: How To Write Your First Firefox Extension

# Content pointercontent brucewillis chrome/content/

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

# Overlay browser skinoverlay chrome://browser/content/browser.xul chrome://brucewillis/content/browser.xul

Page 42: How To Write Your First Firefox Extension

# Language versionslocale brucewillis en-US chrome/locale/en-US/

Page 43: How To Write Your First Firefox Extension

# Setting reference to extension skinskin brucewillis classic/1.0 chrome/skin/

# Adding CSS to available toolbar buttonsstyle chrome://global/content/customizeToolbar.xul chrome://brucewillis/skin/skin.css

Page 45: How To Write Your First Firefox Extension

Are you with me so far?

Page 46: How To Write Your First Firefox Extension

chrome content folder

Page 47: How To Write Your First Firefox Extension

XUL, JavaScript and content CSS

Page 48: How To Write Your First Firefox Extension

XUL (“Zuul”) - XML User Interface Language

http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul

Page 49: How To Write Your First Firefox Extension

•browser.xul

• bruce-willis.css

• bruceWillis.js

• preferences.xul

Page 50: How To Write Your First Firefox Extension

•browser.xul

• bruce-willis.css

• bruceWillis.js

• preferences.xul

Page 51: How To Write Your First Firefox Extension

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

Page 52: How To Write Your First Firefox Extension

<?xml version="1.0"?><?xml-stylesheet href="chrome://brucewillis/skin/skin.css" type="text/css"?> <!DOCTYPE window SYSTEM "chrome://brucewillis/locale/translations.dtd">

Page 53: How To Write Your First Firefox Extension

<overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<script src="bruceWillis.js" /><!-- Content -->

</overlay>

Page 54: How To Write Your First Firefox Extension

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

Page 55: How To Write Your First Firefox Extension
Page 56: 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>

Page 57: How To Write Your First Firefox Extension
Page 58: 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>

Page 59: How To Write Your First Firefox Extension
Page 60: How To Write Your First Firefox Extension

•browser.xul

• bruce-willis.css

• bruceWillis.js

• preferences.xul

Page 61: How To Write Your First Firefox Extension

h1, h2, h3, h4 { font-family: Georgia, Times, serif;}

Page 62: How To Write Your First Firefox Extension

•browser.xul

• bruce-willis.css

• bruceWillis.js

• preferences.xul

Page 63: How To Write Your First Firefox Extension

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);

Page 64: How To Write Your First Firefox Extension

// Structure - Yahoo JavaScript Module Patternvar 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);

Page 65: How To Write Your First Firefox Extension

// init method init : function () { gBrowser.addEventListener("load", function () { var autoRun = prefManager.getBoolPref("extensions.brucewillis.autorun"); if (autoRun) { bruceWillis.run(); } }, false); }

Page 66: How To Write Your First Firefox Extension

// 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"; } }

Page 67: How To Write Your First Firefox Extension

// Run when DOM has loadedwindow.addEventListener("DOMContentLoaded", bruceWillis.init, false);

Page 68: How To Write Your First Firefox Extension

•browser.xul

• bruce-willis.css

• bruceWillis.js

• preferences.xul

Page 69: How To Write Your First Firefox Extension

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

Page 70: How To Write Your First Firefox Extension

<!-- Connect element to extension preference --> <preferences> <preference id="brucewillis-autorun" name="extensions.brucewillis.autorun" type="bool"/> </preferences>

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

Page 71: How To Write Your First Firefox Extension
Page 72: How To Write Your First Firefox Extension

chrome locale folder

Page 73: How To Write Your First Firefox Extension

Offering localization

Page 74: How To Write Your First Firefox Extension

translations.dtd:

<!ENTITY runbrucewillis "Run Bruce Willis">

Page 75: How To Write Your First Firefox Extension

chrome skins folder

Page 76: How To Write Your First Firefox Extension

Skin your extension with CSS and images

Page 77: How To Write Your First Firefox Extension

•skin.css

• status-bar.png

• toolbar-button.png

Page 78: How To Write Your First Firefox Extension

/* 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;

}

Page 79: How To Write Your First Firefox Extension

/* status-bar.png */

Page 80: How To Write Your First Firefox Extension

/* toolbar-button.png */

Page 81: How To Write Your First Firefox Extension

preferences - defaults folder

Page 82: How To Write Your First Firefox Extension

Setting default extension values

Page 83: How To Write Your First Firefox Extension

// prefs.js

pref("extensions.brucewillis.autorun", false);

Page 84: How To Write Your First Firefox Extension

Packaging & Installing

Page 85: How To Write Your First Firefox Extension

An XPI (“zippy”) is just a zipped file

Page 86: How To Write Your First Firefox Extension

ZIP the contents of your extension folder (only the contents, NOT the folder itself)

Page 87: How To Write Your First Firefox Extension

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 *

Page 88: How To Write Your First Firefox Extension

Drag your XPI file into Firefox - Voilà!

Page 89: How To Write Your First Firefox Extension

What it looks like

Page 90: How To Write Your First Firefox Extension

Before

Page 91: How To Write Your First Firefox Extension

After

Page 92: How To Write Your First Firefox Extension

Distributing Your Add-On

Page 94: How To Write Your First Firefox Extension

Downloads

Page 96: How To Write Your First Firefox Extension

Learn more

Page 97: How To Write Your First Firefox Extension

Learn by looking at others

Page 98: How To Write Your First Firefox Extension

In your Profile folder

Page 99: How To Write Your First Firefox Extension

What you’ve learned

Page 100: How To Write Your First Firefox 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

Page 101: How To Write Your First Firefox Extension

That’s it!

Page 102: How To Write Your First Firefox Extension
Page 103: How To Write Your First Firefox Extension

Robert [email protected]

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