Firefox-Addons …

… die ich benutze. Interessiert vermutlich niemanden ausser mich, aber da ich gestern gemerkt habe wie mir ein paar fehlen auf meinem Ersatzlaptop, muss ich die hier mal niederschreiben. Eigentlich bin ich meisten Minimalist was sowas (Plugins/Addons) angeht, aber ein paar sind einfach gut 🙂

  • Adblock Plus, blockt lĂ€stige Werbung. Nutze ich erst seit ein paar Wochen, aber erfĂŒllt auch völlig ohne Konfiguration meinerseits seinen Zweck.
  • Add to Search Bar ,Rechts oben hat man ja eh die Suchleiste, meist mit Google vorbelegt. Solange die Webseiten nicht von sich aus alle einen „OpenSearch“-Link anbieten, muss man auf dieses exzellente Addon zurĂŒckgreifen. Rechtsklick in eine beliebige Suchbox und „Zur Suchleiste hinzufĂŒgen“. Fertig.
  • Download Statusbar, macht das der Downloadmanager besser aussieht 🙂 Eigentlich brutal unwichtig, aber nett.
  • Fireshot, macht hĂŒbsche Bilder von Webseiten. Ausserdem kann man gleich Pfeile malen und auf Sachen hinweisen. Exzellent. Hat aber mit manchen Flash-Seiten Probleme.
  • Web Developer, eigentlich nur „sinnvoll“ fĂŒr Leute die Webdesign machen und Webseiten „entwickeln“. Aber da unverzichtbar.
  • Quick Locale Switcher, Wie der Name schon sagt: Schnell die Sprache wechseln. *click* English *click* Deutsch *click* Suaheli .. Ă€hh, wo muss ich jetz hinklicken?  *such*

Javascript aus FF-Erweiterung in der Webseite benutzen

Langer Titel, kurzer Blogeintrag. Ich bastel gerade daran rum, diverse Javascript-Funktionen innerhalb der HTML-Seite zu benutzen. Das kann ziemlich hÀsslich werden:

var head = this.getContentDocument().getElementsByTagName("head")[0];
var script = this.getContentDocument().createElement("script");
var showImage = this.getContentDocument().createTextNode("function showImage(id) { "
		 + "var image = document.getElementById(id);"
		 + "image.style.display = \"inline\"; "
		 + "image.parentNode.previousSibling.addEventListener(\"mouseout\",
		 function() {"
		 + "window.setTimeout(fadeImage, 1500, id);"
		 + "}, false)"
		 + "}");
script.appendChild(showImage);
head.appendChild(script);

Alles doppelt escapen und so. Kein Spass. HÀsslich zum Lesen. Lösung:

var head = this.getContentDocument().getElementsByTagName("head")[0];
var script = this.getContentDocument().createElement("script");
script.setAttribute("src", "resource://jslibs/foobar.js");
script.setAttribute("type", "text/javascript");
head.appendChild(script);

Nix spektakulĂ€res, aber innerhalb der Datei „foobar.js“ kann man jetzt ‚ganz normales‘ Javascript schreiben. Ich freu mich ĂŒber sowas 😉

Wie man das Laden einer Seite abfĂ€ngt …

Ohne Witz. Seit 4 Wochen doktor ich daran rum und ENDLICH hab ich den richtigen (bzw. funktionellen) Weg gefunden wie man es macht:
overlay.xul:

<overlay id="extensionId" 
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/x-javascript" src="chrome://extensionId/content/myJs.js"/>
</overlay>
</pre>
<strong>myJs.js:</strong>
<pre lang="javascript">
Components.utils.import("resource://jslibs/test.js");
function startupWrapper() {
	var appcontent = document.getElementById("appcontent"); // browser
	if (appcontent) {
		appcontent.addEventListener("DOMContentLoaded", function() {
					justATest(getBrowser());
				}, true);
	}
}

test.js:

var EXPORTED_SYMBOLS = ["justATest"];
justATest = function(gBrowser) {
	var body = gBrowser.mCurrentBrowser.contentDocument.getElementsByTagName('body')[0];
}

Herzlichen GlĂŒckwunsch. Vorher hab ich „nur“ auf DOMContentLoaded gehört, das hat mir dann aber beschert, dass meine Funktion pro XUL-Dokument aufgerufen wurde, also z.B. fĂŒr die Web Developer Toolbar, die Locationbar, den Browser an sich und dann erst die Webseite. Vorher hab ich das klĂ€glich mit

if (gBrowser.mCurrentBrowser.contentDocument.documentURI != "about:blank") {
  // do something
}

abbeholfen, aber das ist ja doof 🙂 Jetzt gehts. Hooray

mozpod – Thunderbird-Addon fĂŒr Kontakte/Kalender

Aufgrund meiner Recherche fĂŒr meine Diplomarbeit, bin ich ĂŒber das Addon „mozpod“ gestolpert. Klingt genau nach dem was ich brauche, da ja Itunes selber nur die Möglichkeit bietet mit Outlook zu kommunizieren.
„mozpod – Thunderbird-Addon fĂŒr Kontakte/Kalender“ weiterlesen

Javascript dynamisch laden

Heute habe ich mich hauptsÀchlich damit beschÀftigt, wie man Javascript-Dateien innerhalb von Javascript-Dateien includiert. Mein erster Ansatz war (etwas XUL-spezifisch, aber prinzipiell klappt das auch im HTML-DOM):

var jsFiles = [
    "chrome://myEntension/content/lib/domain.js",
		"chrome://myExtension/content/lib/helper.js",
    "chrome://myExtension/content/lib/js_locale.js",
		"chrome://myExtension/content/lib/urlParser.js"
    ];
var root = document.getElementById("someId")
for (var i = 0; i < jsFiles.length; i++) {
	var scriptElement = document.createElement("script");
	scriptElement.setAttribute("type", "application/x-javascript");
	scriptElement.setAttribute("src", jsFiles[i]);
  root.appendChild(scriptElement);
}

Das hat auch eigentlich soweit ganz gut geklappt, im DOM waren alle drin. Nur war irgendwie keine der includierten Funktionen … verfĂŒgbar. So als ob die Knoten in den DOM reingehĂ€ngt wurden, aber das src-Attribute nicht ausgelesen und .. geparst.

Nunja, nachdem ich damit eine Weile rumgedoktert habe, wurde im im Mozilla-IRC-Channel auf Components.utils.import hingewiesen. Das ist doch genau das was ich brauche. Also sieht das jetzt so aus:

var jsFiles = [
    "chrome://myEntension/content/lib/domain.js",
		"chrome://myExtension/content/lib/helper.js",
    "chrome://myExtension/content/lib/js_locale.js",
		"chrome://myExtension/content/lib/urlParser.js"
    ];
for (var i = 0; i < jsFiles.length; i++) {
  Components.utils.import(jsFiles[i]);
}

WunderhĂŒbsch. Klappt nur nicht, weil chrome://-URLs nicht erlaubt sind. Man braucht file:// oder resource://. Also schreibt man ins chrome.manifest:

resource jslibs content/lib/

und schreibt obige chrome://-URL um in:

"resource://jslibs/helper.js"

WunderprĂ€chtig. Jetzt klappts. Fast. In jede Datei die man importiert muss man noch reinschreiben was denn exportiert werden soll. Klingt umstĂ€ndlich, der tiefere Sinn hat sich mir noch verschlossen, aber erstmal egal fĂŒr die FunktionalitĂ€t:

var EXPORTED_SYMBOLS = ["LOG"];
function LOG(msg) {
    Components.classes["@mozilla.org/consoleservice;1"]
            .getService(Components.interfaces.nsIConsoleService);
            .logStringMessage(new Date().toLocaleString() + ": " + msg);
}

Am obigen EXPORTED_SYMBOLS gibt man an welche Variablen nach außen hin sichtbar sein sollen. Voila, es ist geschafft.

Firefox Addons selbst erstellen

Dieser Artikel ist aus dem Jahr 2008. Inzwischen hat sich jede Menge geĂ€ndert, insbesondere im Zusammenhang mit Firefox Addons. Nachfolgende Informationen sind veraltet und werden höchstwahrscheinlich nicht mehr funktionieren. Ich empfehle jetzt eher die LektĂŒre von https://addons.mozilla.org/en-US/developers/builder

Meine Diplomarbeit wird ein Firefox-Addon sein (frĂŒher hiessen die noch Extensions), also schreib ich hier gleich mal meine Erfahrungen bezĂŒglich dessen nieder. Wird mir helfen Text fĂŒr meine Diplomarbeit zu generieren. Zuerst ein paar Links

Dann die ErklĂ€rung, wie man die Entwicklung „leichter“ gestaltet. Alles prima erklĂ€rt auf der Seite von Mozilla, aber ich schreibs auch nochmal hin. Zuerst brauchen wir einen Entwickler-Firefox, als besser gesagt, ein Entwickler-Profil. Dazu machen wir Folgendes

  1. Erstelle eine Batchdatei (z.B. auf deinem Desktop): firefox-dev.bat
  2. Innerhalb dieser Batchdatei schreibst du:
    • start "" "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev
  3. Speichern und schliessen.

Dieses Profil fĂŒttern wir dann mit ein paar hilfreichen Extensions

Ich benutze zur Zeit die Spket IDE, allerdings ist die schon etwas Àlter, d.h. die Extensions sind erstmal nur FF 2.0 kompatibel. Das lÀsst sich zwar mit einer ZeilenÀnderung Àndern, aber ist lÀstig.

Um dem neuen Profil („dev“) auch die Erweiterung bekannt zu machen, gibt es folgende Möglichkeit:

  1. Herausfinden an welcher Stelle die chrome.manifest Datei liegt. Bei mir z.B. unter ~/workspace/projektA/chrome.manifest
  2. In das Profilverzeichnis von „dev“ gehen. Dort in den Unterordner extensions
  3. Im selben Verzeichnis wie die chrome.manifest befindet sich auch die install.rdf. In dieser gibt es den XML-Knoten <em:id>foobar@example.com</em:id>. Diese Id merken wir uns (hier: foobar@example.com).
  4. Wir erstellen im Profilverzeichnis/extensions eine Datei mit dem Namen foobar@example.com. Innerhalb dieser Datei geben wir den Pfad zur chrome.manifest an (z.B. ~/workspace/projektA/)

Fertig. Ich werde diesen Artikel wohl noch erweitern und verbessern im Laufe des nĂ€chsten halben Jahres 🙂