how to insert image in button background in javascript in firefox extension

Question

I have to insert .png image in button background but it is not inserted in firefox extension in overlay.js/javascript file.

   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%";

Where is "in.png" located? In your add-on? On the server? – nmaier Dec 05 '13 at 11:58 — nmaier, Dec 05 '13 at 11:58

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Syntax for background-image is like that:

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

As far as I know you can do something like that:

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

EDIT: Maybe this will help: <button> background image

edited May 23 '17 at 12:03

Community

1
1

answered Dec 05 '13 at 07:44

Sorprop

153
1
8

I added link to other stack question, look at it. – Sorprop Dec 05 '13 at 08:20

score 0 · Answer 2 · answered Dec 05 '13 at 15:44

First of all, you need to fix your CSS, like @Sorprop already mentioned:

background-image: url(<url>)

See the background-image documentation.

Next you need to use an absolute URL to point to your image. If you use a relative path, like in the question (in.png) this path will be resolved according to the base URI of the website, e.g. if injected into https://www.google.com/ the browser would look for https://www.google.com/in.png, which is of course not present.

So if you register your package in chrome.manifest like:

content my-addon chrome/content

And your image is at chrome/content/in.png, you'll need to use:

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

You'll also need to allow web content access by setting the contentaccessible flag.

content my-addon chrome/content contentaccessible=yes

how to insert image in button background in javascript in firefox extension

2 Answers2