Simples Firefox Plugin:
Plugin Beschreibung
In diesem Kapitel soll ein Plugin entwickelt werden, mit dem HTML-Elemente live editiert werden können. Durch einen Rechtsklick auf ein beliebiges HTML-Element soll ein Dialog angezeigt werden mit dem aktuellen Inhalt des Elementes. Dieser Inhalt soll dann geändert werden können und auf der Website dargestellt werden.
Vom XUL-Programm zum Plugin
Um von einem XUL-Programm zu einem Plugin zu kommen, muss zuerst ein Ordner myPluginName erstellt werden. In diesen Ordner werden dann der Chrome- und Defaults-Ordner aus der XUL-Anwendung kopiert. Im Unterordner chrome muss dann eine Datei browserOverlay.xul angelegt werden, die Overlay-Informationen des Plugins enthalten. Dieses Overlay muss dann in die chrome.manifest eingetragen werden und dort auf den Browser gebunden werden. Zum Abschluss muss dann die install.rdf erzeugt werden, welche die application.ini aus der XUL-Anwendung ersetzt.
Bekannte XUL-Datei - edit.xul
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<!DOCTYPE window SYSTEM "chrome://myplugin/locale/edit.dtd">
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" onload="initEventListener()">
<script type="application/x-javascript" src="js/edit.js"/>
<label control="myInput" value="&htmlSource;"/>
<textbox id="myInput" multiline="true" cols="40" rows="2" value=""/>
<button id="submitButton" label="&save;"/>
</window>Erweiterte Javascript Datei - edit.js
function initEventListener(){
//Auf den Speichern-Button bei Klick die Funktion submitData binden.
document.getElementById('submitButton').addEventListener('command',submitData, true)
//HTML des angeklickten Elementes aus dem Browser auslesen
document.getElementById('myInput').value = opener.elem.innerHTML;
}
function submitData(){
//Dem Browser die Änderungen mitteilen
opener.applyChanges(document.getElementById('myInput').value);
//Fenster schließen
window.close();
}
Browser-Overlay erzeugen
In diesem Abschnitt wird ein Browser-Overlay erzeugt für das Kontextmenü von Firefox, welches bei Rechtsklick auf ein HTML-Element erscheint.
<?xml version="1.0"?>
<!DOCTYPE window SYSTEM "chrome://myplugin/locale/edit.dtd">
<overlay id="singleItemEx" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<script type="application/x-javascript" src="js/browserOverlay.js"/>
<popup id="contentAreaContextMenu">
<menuitem id="editElement" label="&editElement;" insertafter="context-stop" oncommand="showWindow()"/>
</popup>
</overlay>Die id contentAreaContextMenu die in Zeile 5 verwendet wird entspricht der id des Kontextmenüs vom Firefox und somit werden alle menuitems in dieses Kontextmenü eingefügt.
Browser-Overlay - browserOverlay.js
//Globale Variable, welche das ContextMenu Element enthält
var elem = null;
function showWindow(){
//In globaler Variable einen Verweis auf das angeklickte Element speichern
elem = gContextMenu.target;
//Erweiterte Rechte beziehen, damit eine chrome-URL geöffnet werden kann
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
//neues Fenster öffnen welches die edit.xul Datei anzeigt.
var chromeWindow = window.openDialog('chrome://myPlugin/content/edit.xul', 'syncMarks', 'centerscreen, chrome, dialog, titlebar, resizable');
}
//HTML Änderungen, die vom Edit-Fenster gesendet werden, anwenden
function applyChanges(val){
elem.innerHTML = val;
}
Lokalisierungsdateien erzeugen
Deutsche DTD-Datei
<!ENTITY htmlSource "HTML-Quelltext:">
<!ENTITY save "Speichern">
<!ENTITY editElement "Element editieren">
Englische DTD-Datei
<!ENTITY htmlSource "HTML-Source:">
<!ENTITY save "Save">
<!ENTITY editElement "edit element">
BrowserOverlay einbinden - chrome.manifest
content myplugin chrome/content/
locale myplugin en-US chrome/locale/en-US/
locale myplugin de-de chrome/locale/de-de/
overlay chrome://browser/content/browser.xul chrome://myplugin/content/browserOverlay.xul
Das Kontextmenü des Browsers wird mit der browser.xul Datei geladen. Da das Kontextmenü angepasst werden soll, muss auch das Overlay geladen werden wenn der Browser geladen wird. Dieser Ladevorgang wird in Zeile 4 beschrieben.
Installationsdatei
Die Installationsdatei install.rdf ersetzt die application.ini und muss außer der Programmbeschreibung noch Definitionen für welche Anwendung diese Erweiterung gedacht ist enthalten, was im Abschnitt TargetApplication wiederzufinden ist.
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>yourEmail@address.com</em:id>
<em:version>1.1</em:version>
<em:type>2</em:type>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.5</em:minVersion>
<em:maxVersion>3.5.*</em:maxVersion>
</Description>
</em:targetApplication>
<em:name>MyPlugin</em:name>
<em:description>Ein HTML-Live Editor Plugin</em:description>
<em:creator>Your Name</em:creator>
<em:homepageURL></em:homepageURL>
</Description>
</RDF>Einbinden in Firefox
Die vorhandene Ordnerstruktur muss nun zu einem XPI-Paket geschnürt werden, damit dieses Plugin von Firefox installiert werden kann. Zum Erstellen einer XPI-Datei wird einfach der Inhalt des Ordners 'myPluginName' gezippt und die Dateiendung von zip in xpi umbenannt. Diese Datei wird dann mit dem Firefox-Browser geöffnet und die Installation startet. Anschließend muss der Browser neu gestartet werden um die Installation abzuschließen.