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 🙂

Windows Neuinstallation

So, es wurde endlich mal wieder Zeit Windows neu zu installieren. Damit ich beim nächsten Mal nicht soviel suchen muss, hier ein paar Links:

http://www.floriangilles.de/software/netspeedmonitorNet

Geschwindigkeit von Webseiten

In Zeiten von AJAX sind Webseiten schon fühlbar schneller geworden. Allerdings wird dieser Nutzen meist wieder vergeben, indem Unsummen an Skripten geladen werden oder zuviele unnötige HTTPRequests oder überflüssiger JavaScript-Code. Dies alles kann man mit

YSlow

von Yahoo testen. Dies erweitert die Erweiterung Firebug um ein paar nützliche Funktionen. Natürlich braucht man dafür den Firefox.