JavaScript und DOM, Formular wird nicht angezeigt

[System.I/O]

Hi,

ich schreib zur Zeit ein FireFox Plugin welches via JavaScript und DOM das Aussehen gewisser Webseiten abändert.
Funktioniert soweit auch ganz gut,
bist auf die Darstellung der im nachhinein hinzugefügeten Formulare.
Alle anderen Elemente (zb. <h3>...) machen keine Probleme.

Komischerweise werden alle hinzugefügten Elemente im DOM Inspector vom FF angezeigt,
auch die Formulare die nicht dargestellt werden.
Die Fehler-Konsole meint auch das alles ok währe X(

Ich verstehe es einfach nicht, die Formulare werden einfach nicht angezeigt obwohl sie im DOM Baum vorhanden sind.


Hoffe einer hat änliche Erfahrungen gemacht und kann mir weiter helfen.

Hier noch der Code (ab Zeile 44):

Spoiler: Code

// Bei jedem Seitenaufruf wird die Function "OnPageLoaded" aufgerufen.
window.addEventListener("load", OnPageLoaded, true);

// Prüft ob die Seite angepasst werden muss
function OnPageLoaded(){
	// Browser "Handle"
	var browser = getBrowser();  
	// Liste aller offenen Seiten (tabs,frames) 
	var documentList = GetDocuments(GetContentWindow());
	// Das erste Element der Liste ist die aktuelle Seite
	var pageDocument = documentList[0];
	
	// Wird bei alles Aufrufen der Domain/URL benötigt
	if (browser.contentDocument.location.href.search(/.?irgendeine.url.?/) != -1) {			
		// DOM Node der navigations Leiste
		var navi = pageDocument.getElementById("navi");
		// Alle einträge der navigations Leiste durchlaufen
		for (var i=0; i < navi.childNodes.length; i++) {
			// Das ist unser Link den wir manipulieren wollen
			if(navi.childNodes[i].innerHTML == '<a href="/_abc.php/cluster/start"><b>Cluster</b></a>') {
				// Link ersetzen
				navi.childNodes[i].innerHTML = '<a href="/_abc.php/cluster/start"><b>HIVE</b></a>';
				break;
			}
		}		
	} 
	
	// Wird nur bei der angegebenen URL benötigt
	if (browser.contentDocument.location.href.search(/http:\/\/irgendeine.url\/_abc.php\/cluster\/start/) != -1) {		
		// DOM Node des DIV Containers
		var clusterDiv = pageDocument.getElementById("cluster");
		// Überschrift ändern. ChildNodes[1] ist ein "<H2>..." Element 
		clusterDiv.childNodes[1].innerHTML = "HIVE";
		
		// Neue Sub Überschrift
		var h = document.createElement("h3");
		h.className = "cluster";
		// Text für die Sub Überschrift
		var hText = document.createTextNode("HIVE Search");
		h.appendChild(hText);
		// Überschrift zum DIV Container hinzufügen 
		clusterDiv.insertBefore(h, clusterDiv.childNodes[3]);
		
		// -->!! Hier liegt das problem, die form wird einfach nicht angezeigt. Die obere <H3> Überschrift wird allerdings angezeigt. !!<--
		// Formular erzeugen
		var form = document.createElement("form");
		form.className = "cluster";
		// Formular Attribute hinzufügen
		var formActionAtt = document.createAttribute("action");
		formActionAtt.nodeValue = "_self";
		form.setAttributeNode(formActionAtt);
		var formMethodAtt = document.createAttribute("method");
		formMethodAtt.nodeValue = "post";
		form.setAttributeNode(formMethodAtt);
		
		// <Input..> Element und Attribute hinzufügen
		var input = document.createElement("input");
		var inputAtt = document.createAttribute("type");
		inputAtt.nodeValue = "text";
		input.setAttributeNode(inputAtt);
		var inputAtt2 = document.createAttribute("value");
		inputAtt2.nodeValue = "test";
		input.setAttributeNode(inputAtt2);		
		
		// Input Element zum Formular hinzufügen
		form.appendChild(input);
		// Formular zum DIV Container hinzufügen (am index der clusterDiv.childNodes kann es nicht liegen, hab ich überprüft)
		clusterDiv.insertBefore(form, clusterDiv.childNodes[4]);
	}

	
}


// 
function GetDocuments(frame) {
    var documents = new Array();
  
    if(frame) {
        var frames = frame.frames;
        var framesLength = frames.length;
        
        if(frame.document) {
            documents.push(frame.document);
        }
        
        for(var i = 0; i < framesLength; i++) {
            documents = documents.concat(GetDocuments(frames[i]));
        }
    }

    return documents;
}

// 
function GetContentWindow() {
    return GetSelectedBrowser().contentWindow;
}

// 
function GetSelectedBrowser() {
    return window.top.getBrowser().selectedBrowser;
}

MfG

 

[Gran Gizmo]

Hi,

ich habe vor einiger Zeit etwas Ähnliches versucht, eine kleine Extension für Firefox, mit der ich gewisse Elemente von bestimmten Webseiten verändern kann.
Leider habe ich damals keine Möglichkeit gefunden, meinen Code bei jedem Seitenaufruf automatisch ausführen zu lassen. Ich musste immer ein Overlay und ein grafisches Bedienelement verwenden. Das ist mir aber zu umständlich.

Deshalb würde mich interessieren, wie du deine Extension aufgebaut hast, damit die automatische Ausführung funktioniert.

Schönen Dank für deine Hilfe!

Gizmo

 

[System.I/O]

hi,
ich hab mich da damals an nen Tutorial gehalten, aber ich finde es nimmer.
Kannst aber gerne meine files haben.
Leider is die Struktur dieser FF Plugins etwas verwirrend, musste dir ma angucken.
Interessant is die install.rdf und captain.js

Was das abarbeiten der aufgerufenen Seiten angeht, so habe ich einen EventHandle benutzt:

window.addEventListener("load", OnPageLoaded, true);

Wie zu sehen ist, wird die Funktion "OnPageLoaded" hier auf das "load" Event regestriert.
Der boolische Parameter gibt an, ob dieses Event nun jedesmal oder nur einmal verarbeitet wird.

Hoffe es hilft dir weiter, ansonsten einfach nochma fragen

PS: hab das file nun einfach von .xpi auf .zip geändert. sollte klappen, hoffe ich jedenfalls