Mozilla Extension Development 21-09-2016Henrik Gemal Side 1 Extension udvikling i Mozilla Firefox Henrik Gemal.

Præsentationer af emnet: "Mozilla Extension Development 21-09-2016Henrik Gemal Side 1 Extension udvikling i Mozilla Firefox Henrik Gemal."— Præsentationens transcript:

1 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ Side 1 Extension udvikling i Mozilla Firefox Henrik Gemal

2 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

3 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

4 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

5 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

6 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

7 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

8 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

9 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

10 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ Side 10 Sådan kommer du i gang - 1 ● Opsæt ANT udviklingsmiljø – Ant ● http://ant.apache.org/ http://ant.apache.org/ – Ant-Contrib ● http://ant-contrib.sourceforge.net/ http://ant-contrib.sourceforge.net/ – FMPP ● http://fmpp.sourceforge.net/ http://fmpp.sourceforge.net/ – Fileinfo ● http://www.f4.fhtw-berlin.de/people/s0507007/fileinfo.html http://www.f4.fhtw-berlin.de/people/s0507007/fileinfo.html ● Test ANT ved at skrive “ANT -version”

11 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ Side 11 Sådan kommer du i gang - 2 ● Hent og unzip mit extension udviklingsmiljø – http://gemal.dk/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

12 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

13 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

14 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ Side 14 main.xul

15 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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);

16 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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å?

17 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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);

18 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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 = Components.classes['@mozilla.org/consoleservice;1'].getService(Components.interfaces.nsIConsoleService); try { CONSOLE_SERVICE.logStringMessage("Launchy: " + t); } catch(ex) { }

19 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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)

20 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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);

21 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

22 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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);

23 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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

24 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ 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);

25 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ Side 25 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 http://update.mozilla.org/

26 Mozilla Extension Development 21-09-2016Henrik Gemal http://gemal.dk/ Side 26 Hvordan kommer jeg videre? ● Extensions Forum at MozillaZine – http://forums.mozillazine.org/viewforum.php?f=19 http://forums.mozillazine.org/viewforum.php?f=19 ● Mozilla Source Code Search – http://lxr.mozilla.org/mozilla/ http://lxr.mozilla.org/mozilla/ ● Extensions Mirror – http://www.extensionsmirror.nl/ http://www.extensionsmirror.nl/ ● BlogUpdates - What's happening in the Mozilla community – http://gemal.dk/mozilla/blogupdates.html http://gemal.dk/mozilla/blogupdates.html ● http://irc.mozilla.org/ http://irc.mozilla.org/ ● news://news.mozilla.org news://news.mozilla.org ● news://news.mozdev.org news://news.mozdev.org ● http://kb.mozillazine.org/Getting_started_with_extension_develop ment http://kb.mozillazine.org/Getting_started_with_extension_develop ment ● http://wiki.mozilla.org/ http://wiki.mozilla.org/