Extension udvikling i Mozilla Firefox Henrik Gemal Side 1
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 Side 2
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 Side 3
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 Side 4
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 Side 5
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 Side 6
Er blot en zip fil XPI filen XPI filen indeholder som regel følgende filer: install.rdf install.js chrome.manifest chrome/extensionnavn.jar defaults/preferences/extensionnavn.js Side 7
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 Side 8
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 Side 9
Sådan kommer du i gang - 1 Opsæt ANT udviklingsmiljø Ant http://ant.apache.org/ Ant-Contrib http://ant-contrib.sourceforge.net/ FMPP http://fmpp.sourceforge.net/ Fileinfo http://www.f4.fhtw-berlin.de/people/s0507007/fileinfo.html Test ANT ved at skrive ANT -version Side 10
Sådan kommer du i gang - 2 Hent og unzip mit extension udviklingsmiljø mozilla/extensiondevelopment.html 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 Side 11
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 Side 12
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 Side 13
<?xml version="1.0"?> main.xul <!DOCTYPE overlay SYSTEM "chrome://${project}/locale/main.dtd"> <overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" id="${project}- overlay"> <script type="application/x-javascript" src="main.js"/> <!-- Context area for Mozilla, Mozilla Firefox, Mozilla Thunderbird --> <popup id="contentareacontextmenu"> <menu label="&test.label;" tooltiptext="&test.tooltip;" insertbefore="context-sep-properties" id="${project}-context"> <menupopup> <menuitem id="${project}-context-browser" oncommand="test.docontext(this);" label="&test.label;" tooltiptext="&test.tooltip;" /> </menupopup> </menu> <menuitem id="${project}-context-browser" oncommand="test.docontext(this);" label="&test.label;" tooltiptext="&test.tooltip;" /> </popup> <!-- Toolbar for Mozilla Firefox --> <toolbarpalette id="browsertoolbarpalette"> <toolbarbutton id="${project}-toolbar-browser" class="toolbarbutton-1 chromeclass-toolbar-additional" label="&test.label;" tooltiptext="&test.tooltip;" oncommand="test.dotoolbar(this);" /> </toolbarpalette> </overlay> Side 14
var test = { onload: function() { this.initialized = true; }, main.js - Simpel 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); Side 15
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å? Side 16
var test = { onload: function() { this.initialized = true; }, main.js Brug af URL 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); Side 17
Debug er svært Debug 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 = Components.classes['@mozilla.org/consoleservice;1'].getService(Components.interfaces.nsIConsoleService); try { CONSOLE_SERVICE.logStringMessage("Launchy: " + t); } catch(ex) { } } Side 18
Indstillinger Bliver MEGET nemmere i Firefox 1.1 I dag kombination af XUL og JavaScript I Firefox 1.1 rent XUL (for det meste) Side 19
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); Side 20
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 Side 21
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); Side 22
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 Side 23
main.js Brug af source var test = { docontext: function(e) { var re=/<!-- Served by (.*?) in (.*?) secs\. -->/; 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); Side 24
Hvad ellers? JsLib API til dagligdags ting Debug, IO, netværk, ZIP MozDev.org cvs samt XPI distribution http://update.mozilla.org/ til XPI distribution Side 25
Hvordan kommer jeg videre? Extensions Forum at MozillaZine http://forums.mozillazine.org/viewforum.php?f=19 Mozilla Source Code Search http://lxr.mozilla.org/mozilla/ Extensions Mirror http://www.extensionsmirror.nl/ BlogUpdates - What's happening in the Mozilla community mozilla/blogupdates.html http://irc.mozilla.org/ news://news.mozilla.org news://news.mozdev.org http://kb.mozillazine.org/getting_started_with_extension_development http://wiki.mozilla.org/ Side 26