Extension udvikling i Mozilla Firefox. Henrik Gemal

Transkript

1 Extension udvikling i Mozilla Firefox Henrik Gemal Side 1

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 Side 2

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 Side 3

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 Side 4

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 Side 5

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 Side 6

7 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

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 Side 8

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 Side 9

10 Sådan kommer du i gang - 1 Opsæt ANT udviklingsmiljø Ant Ant-Contrib FMPP Fileinfo Test ANT ved at skrive ANT -version Side 10

11 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

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 Side 12

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 Side 13

14 <?xml version="1.0"?> main.xul <!DOCTYPE overlay SYSTEM "chrome://${project}/locale/main.dtd"> <overlay xmlns=" 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

15 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

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å? Side 16

17 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

18 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

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) Side 19

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

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 Side 21

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

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 Side 23

24 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

25 Hvad ellers? JsLib API til dagligdags ting Debug, IO, netværk, ZIP MozDev.org cvs samt XPI distribution til XPI distribution Side 25

26 Hvordan kommer jeg videre? Extensions Forum at MozillaZine Mozilla Source Code Search Extensions Mirror BlogUpdates - What's happening in the Mozilla community mozilla/blogupdates.html news://news.mozilla.org news://news.mozdev.org Side 26