PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Firefox Extension - Content in HTML austauschen

darph
2007-01-19, 22:17:35
Okay. Ich möchte eine kleine Extension basteln, die ein Bild auswechselt.


Duz Ganze sieht ungefähr so aus:

imgNode = gContextMenu.target;

var newImageNode = document.createElement("img");
newImageNode.setAttribute("src", "chrome://myExtension/content/newImage.png");
newImageNode.setAttribute("style", "border: 1px solid red;")

imgNode.parentNode.replaceChild(newImageNode, imgNode);

Prinzipiell funktioniert das auch. Aber ich seh kein Bild. Will sagen: Das alte Bild wurde ersetzt. Ich sehe einen roten Rahmen. Ich hab tatsächlich noch ein bissl mehr Geraffel eingefügt (aber hier nicht von Belang) und das sehe ich auch alles. In diesem Fall aber halt nur einen einen Pixel großen Rahmen, der eben halt kein Bild enthält.


Wenn ich einfach nur hingehe und schreibe
imgNode.setAttribute("src", "chrome://myExtension/content/newImage.png"); - DAS geht. Am Laden des Bildes aus chrome liegt es nicht. Erstelle ich den Bildknoten irgendwie falsch?
Sephiroth
2007-01-20, 00:54:58
hm ...
funktioniert das hier?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript">
//<![CDATA[
var container, newdiv, txtnode, imgnode;

function init()
{
container = document.getElementById("ContainerBox");
newdiv = document.createElementNS("http://www.w3.org/1999/xhtml","html:div");
txtnode = document.createTextNode("This is text that was constructed dynamically with createElementNS and createTextNode then inserted into the document using appendChild.");
newdiv.appendChild(txtnode);
imgnode = document.createElement("img");
//imgnode.setAttribute("src", "resource:///chrome/classic/skin/classic/browser/Toolbar.png");
//imgnode.setAttribute("src", "chrome://browser/skin/Toolbar-small.png");
imgnode.src = "chrome://browser/skin/Toolbar-small.png"; // should work like setAttribute("src", "xx");
newdiv.appendChild(document.createElement("br"));
newdiv.appendChild(document.createElement("br"));
newdiv.appendChild(document.createTextNode("The next image has a chrome URI and it is was constructed with createElement and the src property was used instead of setAttribute."));
newdiv.appendChild(document.createElement("br"));
newdiv.appendChild(imgnode);
container.appendChild(newdiv);
}
function replace_img()
{
container = document.getElementById("ContainerBox");
var oldimg = container.getElementsByTagName("img")[0];
imgnode = document.createElement("img");
imgnode.setAttribute("src", "chrome://browser/skin/Toolbar.png");
var parent = oldimg.parentNode;
parent.replaceChild(imgnode, oldimg);
// the next 2 lines do the same as the one above, if oldimg exists
/*parent.removeChild(oldimg);
parent.appendChild(imgnode);*/
}
//]]>
</script>
</head>
<body onload="init();">
<div id='ContainerBox'>
The script on this page will add dynamic content below:
</div>
<a href="#" onclick="replace_img(); return false;">klick mich</a>
</body>
</html>



p.s.
wenn du nur das bild ersetzen willst, wieso dann gleich ein neues img-Node erstellen?
und bei
newImageNode.setAttribute("style", "border: 1px solid red;")
fehlt das ; am ende

edit2:
code oben um replace_img erweitert
darph
2007-01-20, 12:59:49
Das Semikolon ist nur beim Kopieren verloren gegangen. :)

Warum ich ein neues Node erstelle? Weil ich in der Extension das Bild mit einem Container ersetze, der das Bild enthält. Das bläst nur das Beispiel auf, drum hab ich das hier rausgelassen. Für das (nicht-)Funktionieren des Beispiels macht das aber keinen Unterschied. ;( Jedenfalls brauche ich die neue Node.

Deinen Test probiere ich gleich.
darph
2007-01-20, 13:31:06
Dein Beispiel funktioniert in einer Website. In der Extension nicht. ;(
Sephiroth
2007-01-22, 20:03:42
Würdest du mir mal die Extension schicken? Dann kann ich das bei mir probieren und direkt testen, ohne das ich jetzt erst etwas ähnliches konstruieren muß.
darph
2007-01-22, 20:35:12
Sie haben eine PN. :)