Mozilla Extension Development Henrik Gemal Side 1 Extension udvikling i Mozilla Firefox Henrik Gemal

Mozilla Extension Development Henrik Gemal Side 2 Hvem er jeg? ● Web udvikler hos TDC ● Laver TDC.dk og TDCOnline.dk ● Laver HTML, CSS, PHP ● Med i Mozilla projektet i mange år ● Udviklet et par extensions bl.a. Linky, Launchy, Slashy og en internt til TDC og deres CMS system

Mozilla Extension Development Henrik Gemal Side 3 Hvad kommer jeg til at kunne? ● Lære hvad en extension er ● Lære lidt om hvor let det egentligt er at lave en extension ● Lave din egen extension ● Finde ud af hvordan du kommer videre ● Eller måske bare blive endnu mere forvirret

Mozilla Extension Development Henrik Gemal Side 4 Hvad er extensions? ● Udvidelser til Mozilla Firefox ● Tilføjer eller modificere funktioner ● Skrevet i JavaScript og XML ● Bliver installeret via en såkaldt XPI fil, som faktisk bare er en zip fil

Mozilla Extension Development Henrik Gemal Side 5 Hvad er extensions skrevet i? ● JavaScript – Mozilla API – Egne komponenter i enten C++ eller JavaScript ● XUL – XML / HTML / CSS / PNG ● ANT til bygning af XPI – Cross OS

Mozilla Extension Development Henrik Gemal Side 6 Fremgangsmåden 1.Ændre i XUL eller JavaScript filerne 2.Luk Mozilla Firefox 3.Kør ”ant install” 4.Genstart Mozilla Firefox 5.Test og kig i JavaScript consolen 6.Gentag 1 7.Når du er tilfreds kør ”ant dist” 8.Distribuer XPI filen

Mozilla Extension Development Henrik Gemal Side 7 XPI filen ● Er blot en zip fil ● XPI filen indeholder som regel følgende filer: install.rdf install.js chrome.manifest chrome/extensionnavn.jar defaults/preferences/extensionnavn.js

Mozilla Extension Development Henrik Gemal Side 8 extensionnavn.jar ● content – contents.rdf – main.xul – main.js ● locale – en-US/contents.rdf – en-US/main.dtd – en-US/main.properties ● skin – classic/contents.rdf – classic/main.css

Mozilla Extension Development Henrik Gemal Side 9 Mozilla Firefox 1.0 vs 1.1 ● contents.rdf filer behøves ikke længere. Afløses af chrome.manifest ● Meget nemmere at lave indstillinger ● Muligt at loade overlays dynamisk ● Overlayinfo er fjernet helt ● Afinstallere en extension ved at fjerne folderen

Mozilla Extension Development Henrik Gemal Side 10 Sådan kommer du i gang - 1 ● Opsæt ANT udviklingsmiljø – Ant ● – Ant-Contrib ● – FMPP ● – Fileinfo ● ● Test ANT ved at skrive “ANT -version”

Mozilla Extension Development Henrik Gemal Side 11 Sådan kommer du i gang - 2 ● Hent og unzip mit extension udviklingsmiljø – ● Udfør ”ant” – Hurra! Du har nu en simple extension parat til installation ● Tilret build.properties ● Udfør ”ant” – Hurra! Du har nu din egen extension parat til installation ● Tilret filer under content, defaults, locale, og skin ● Udfør ”ant” – Hurra! Du har nu din helt egen extension parat til installation

Mozilla Extension Development Henrik Gemal Side 12 Opskriften ● Find en lignende extension og tilret – Den bedste og nemmeste måde at lære på ● Steal the best – code the rest – Hvorfor lave noget som andre allerede har lavet? ● Det sværeste – få en god ide – You dont need eyes to see, you need vision ● Hvis det kan spare tid bruger folk det

Mozilla Extension Development Henrik Gemal Side 13 Overlays ● Overlays er en metode til at kombinere flere vinduer til ét ● Extensions er overlays til et allerede eksisterende XUL vindue, f.eks. browser vinduet ● Overlays er XUL filer ● Overlays kan indeholder referencer til eksterne filer med JavaScript, CSS og tekster ● Overlays til kan tilføje menu'er eller knapper

Mozilla Extension Development Henrik Gemal Side 14 main.xul

Mozilla Extension Development Henrik Gemal Side 15 main.js - Simpel var test = { onLoad: function() { this.initialized = true; }, doToolbar: function() { if (this.initialized) alert("Hi from toolbar!"); }, doContext: function() { if (this.initialized) alert("Hi from context!"); } }; window.addEventListener("load", function(e) { test.onLoad(e); }, false);

Mozilla Extension Development Henrik Gemal Side 16 Mozilla API ● API til næsten alt ● Se IDL filer på lxr.mozilla.org ● IO, XML, HTTP, Cache, DOM ● Hvad er URL'en da brugeren højre klikkede? ● Hvor på siden højre klikkede brugeren? ● Hvad højre klikkede brugeren på?

Mozilla Extension Development Henrik Gemal Side 17 main.js – Brug af URL var test = { onLoad: function() { this.initialized = true; }, doToolbar: function() { if (this.initialized) alert("Hi from toolbar!"); }, doContext: function(e) { var re=/^wiki.sslug.dk$/i; if (gBrowser.currentURI.host.match(re)) gBrowser.addTab(gBrowser.currentURI.spec + "?action=history"); } }; window.addEventListener("load", function(e) { test.onLoad(e); }, false);

Mozilla Extension Development Henrik Gemal Side 18 Debug ● Debug er svært ● Kig altid i JavaScript konsol'en ● Slå debug information til i about:config ● ”javascript.options.showInConsole” sættes til true ● ”javascript.options.strict” sættes til true test.prototype.trace = function(t) { var CONSOLE_SERVICE = try { CONSOLE_SERVICE.logStringMessage("Launchy: " + t); } catch(ex) { }

Mozilla Extension Development Henrik Gemal Side 19 Indstillinger ● Bliver MEGET nemmere i Firefox 1.1 ● I dag kombination af XUL og JavaScript ● I Firefox 1.1 rent XUL (for det meste)

Mozilla Extension Development Henrik Gemal Side 20 main.js – Brug af gContextMenu var test = { onLoad: function() { this.initialized = true; }, doToolbar: function() { if (this.initialized) alert("Hi from toolbar!"); }, doContext: function(e) { if (gContextMenu.onImage) alert("du klikke pa et image") if (gContextMenu.onLink) alert("du klikke pa et link") } }; window.addEventListener("load", function(e) { test.onLoad(e); }, false);

Mozilla Extension Development Henrik Gemal Side 21 Problemer ● Høj indlærningskurve – Til dels afhjulpet af mit extensions kit ● Manglende dokumentation ● Namespace ● Forskel mellem Gecko klienter ● Brug af gamle API'er ● Kræver genstart hver gang

Mozilla Extension Development Henrik Gemal Side 22 main.js - Brug af gContextMenu var test = { doContext: function(e) { var n = gContextMenu.target; if (n) for (var i = 0; i < 5; i++) if (n.nodeName.toLowerCase() == "div" && n.id == "bodyContent") { alert("bodyContent") break; } else { n = n.parentNode; if (!n) break; } }; window.addEventListener("load", function(e) { test.onLoad(e); }, false);

Mozilla Extension Development Henrik Gemal Side 23 XULRunner ● Simpel pakke som gør det muligt at afvikle XUL applikationer ● XULRunner + jar fil = applikation ● Kunne distribueres via setup program ● XULRunner kan bruge netværk, DOM, XML, Extensions, XUL, kryptografi, XSLT, Gecko ● Kunne bruges til administration, kiosk applikationer

Mozilla Extension Development Henrik Gemal Side 24 main.js – Brug af source var test = { doContext: function(e) { var re=/ /; var b = document.commandDispatcher.focusedWindow.document.documentElement.innerHTML; var ex = re.exec(b); if (ex) alert("det var jo " + ex[1] + " der lavede siden pa " + ex[2] + " sekunder"); } }; window.addEventListener("load", function(e) { test.onLoad(e); }, false);

Mozilla Extension Development Henrik Gemal Side 25 Hvad ellers? ● JsLib – API til dagligdags ting – Debug, IO, netværk, ZIP ● MozDev.org – cvs samt XPI distribution ● til XPI distribution

Mozilla Extension Development Henrik Gemal Side 26 Hvordan kommer jeg videre? ● Extensions Forum at MozillaZine – ● Mozilla Source Code Search – ● Extensions Mirror – ● BlogUpdates - What's happening in the Mozilla community – ● ● news://news.mozilla.org news://news.mozilla.org ● news://news.mozdev.org news://news.mozdev.org ● ment ment ●