Question

我必须在按钮背景中插入.png图像，但它没有插入overlay.js / javascript文件中的firefox扩展名。

   var htmlns = "http://www.w3.org/1999/xhtml";
   var button = document.createElementNS(htmlns,"button");
   button.setAttribute("style", "background-image:in.png");    
   button.id = "btn1";
   documentElement.body.insertBefore(button, documentElement.body.firstChild);
   gBrowser.contentDocument.getElementById("btn1").style.width = "45%";
   gBrowser.contentDocument.getElementById("btn1").style.height = "78%";

Answer 1

background-image的语法是这样的：

background-image: url(path/to/image)

据我所知，你可以这样做：

button.style.backgroundImage = "url(path/to/image)";

编辑：也许这会有所帮助： <button> background image

Answer 2

首先，你需要修复你的CSS，比如@Sorprop已经提到过：

background-image: url(<url>)

请参阅background-image文档。

接下来，您需要使用绝对URL指向您的图像。如果您使用相对路径，例如问题（in.png），则将根据网站的基本URI解析此路径，例如如果注入https://www.google.com/，浏览器会查找https://www.google.com/in.png，这当然不存在。

因此，如果您在chrome.manifest注册您的包裹，如：

content my-addon chrome/content

您的图片位于chrome/content/in.png，您需要使用：

background-image: url(chrome://my-addon/content/in.png);

您还需要通过设置contentaccessible flag。

来允许访问网络内容

content my-addon chrome/content contentaccessible=yes

如何在firefox扩展中的javascript中的按钮背景中插入图像

2 个答案: