Extension udvikling i Mozilla Firefox Henrik Gemal

Præsentationer af emnet: "Extension udvikling i Mozilla Firefox Henrik Gemal"— Præsentationens transcript:

1 Extension udvikling i Mozilla Firefox Henrik Gemal
05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

6 Fremgangsmåden Ændre i XUL eller JavaScript filerne
Luk Mozilla Firefox Kør ”ant install” Genstart Mozilla Firefox Test og kig i JavaScript consolen Gentag 1 Når du er tilfreds kør ”ant dist” Distribuer XPI filen 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

8 extensionnavn.jar content locale skin contents.rdf main.xul main.js
en-US/contents.rdf en-US/main.dtd en-US/main.properties skin classic/contents.rdf classic/main.css 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

10 Sådan kommer du i gang - 1 Opsæt ANT udviklingsmiljø
05/12/2019ttp://ant.apache.org/ Ant-Contrib 05/12/2019ttp://ant-contrib.sourceforge.net/ FMPP 05/12/2019ttp://fmpp.sourceforge.net/ Fileinfo 05/12/2019ttp:// berlin.de/people/s /fileinfo.html Test ANT ved at skrive “ANT -version” 05/12/2019 Henrik Gemal

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 Hurra! Du har nu din egen extension parat til installation Tilret filer under content, defaults, locale, og skin Hurra! Du har nu din helt egen extension parat til installation 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

14 main.xul <?xml version="1.0"?>
<!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> </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> 05/12/2019 Henrik Gemal

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

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å? 05/12/2019 Henrik Gemal

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); 05/12/2019 Henrik Gemal

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 = .interfaces.nsIConsoleService); try { CONSOLE_SERVICE.logStringMessage("Launchy: " + t); } catch(ex) { } 05/12/2019 Henrik Gemal

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) 05/12/2019 Henrik Gemal

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); 05/12/2019 Henrik Gemal

21 Problemer Høj indlærningskurve Manglende dokumentation Namespace
Til dels afhjulpet af mit extensions kit Manglende dokumentation Namespace Forskel mellem Gecko klienter Brug af gamle API'er Kræver genstart hver gang 05/12/2019 Henrik Gemal

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) } }; window.addEventListener("load", function(e) { test.onLoad(e); }, false); 05/12/2019 Henrik Gemal

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 05/12/2019 Henrik Gemal

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); 05/12/2019 Henrik Gemal

25 Hvad ellers? JsLib – API til dagligdags ting
Debug, IO, netværk, ZIP MozDev.org – cvs samt XPI distribution 05/12/2019ttp://update.mozilla.org/ til XPI distribution 05/12/2019 Henrik Gemal

26 Hvordan kommer jeg videre?
Extensions Forum at MozillaZine 05/12/2019ttp://forums.mozillazine.org/viewforum.php?f=19 Mozilla Source Code Search 05/12/2019ttp://lxr.mozilla.org/mozilla/ Extensions Mirror 05/12/2019ttp:// BlogUpdates - What's happening in the Mozilla community 05/12/2019ttp://gemal.dk/mozilla/blogupdates.html 05/12/2019ttp://irc.mozilla.org/ 05/12/2019ews://news.mozilla.org 05/12/2019ews://news.mozdev.org 05/12/2019ttp://kb.mozillazine.org/Getting_started_with_extensio n_development 05/12/2019ttp://wiki.mozilla.org/ 05/12/2019 Henrik Gemal