Firefox extension to create a new icon or replace existing icon in the location/address bar

Question

I want to create a Firefox extension that creates a new icon in the address bar or replaces the existing one with the one specified in the extension.

And then, add some javascript to display this custom logo only when the user is viewing a particular domain.

If this is not doable for the location/address bar, displaying the logo on the status bar is ok (again driven by a javascript that displays the logo only when the user is on a particular domain).

Can this be done?

I don't think favicon alone will solve my problem. I want to be able to display the icon/logo only when the user is on a specific domain (e.g. xyz.com/testPage.html or abc.com/anotherTest.html)

Answer 1

You can do that just using Greasemonkey. Here you have a quick script that works.

//create the icon
a=document.createElement("link");
a.setAttribute("rel", "icon");
a.setAttribute("href","http://www.google.com/favicon.ico");

//append the icon to the head
document.documentElement.firstChild.appendChild(a);

Greasemonkey's manual: (Adding scripts)

If the site whose favicon you are trying to change already has one, you will have to do something like

// get the head elements
head = document.documentElement.firstElementChild.childNodes;

//delete the existing favicon
for(i in head){
    if((head[i].rel == "shortcut icon")||(head[i].rel == "icon")){
         head.removeChild(head[i]);
    }
}

before setting the new favicon, but I couldn't get it to work.

There is a project to create a standard object for favicon manipulation that is supposed to work, but didn't work for me.

Answer 2

You can alter the DOM creating a link element like this :

<link rel="icon" type="image/png" href="/somepath/image.png" />