Firefox Extension在文档中显示图像

Question

是否可以在不违反安全约束的情况下在当前文档中显示本地图像。

示例：图片位于chrome://myExtension/content/2.png

$myImg=jQuery("#myImg", doc);

$myImg.attr("src","chrome://beSure/content/2.png");

  

错误控制台：安全错误：https://www.google.com/accounts/ServiceLogin?....&from=login处的内容可能无法加载或链接到chrome：//myExtension/content/2.png。

使用非本地链接的工作示例：

$myImg=jQuery("#myImg", doc);

myImg.attr("src","http://cdn1.iconfinder.com/data/icons/classic-cars-by-cemagraphics/128/minicar_128.png");

图片来自有效的网址，所以没关系。但是我怎样才能显示本地图像？

Answer 1

您的Chrome包需要使用contentAccessible中的chrome.manifest标记进行声明，请参阅documentation。默认情况下，不再允许网页从chrome://加载图像，此前允许的网页通过加载图像来检测已安装的扩展程序。

另一种可能性应该是使用image.src属性而不是设置属性：

var myImg = doc.getElementById("myImg");
myImg.src = "chrome://beSure/content/2.png";

这应该有效，因为这里（特权）脚本直接设置图像位置。另一方面，属性更改是异步处理的，因此这是通过网页的权限完成的。

Answer 2

如果要使用jQuery创建新元素，请确保使用正确的上下文。

var $tr = $('tr', content.document);
$tr.append($('<td>New cell</td>')); // BAD

会起作用，但新细胞会表现得很奇怪。例如，右键单击它时将不会显示上下文菜单。

要解决此问题，请在创建新DOM节点时使用文档的上下文

$tr.append($('<td>New cell</td>', content.document)); // GOOD

通过这样做，您可以按预期使用chrome:// - 网址。 当然，您还必须按照Wladimir Palant的回答中所述启用contentAccessible。