How can I add to an image an HTML link using Google Chrome extension?


Tags: html,css,google-chrome-extension,inject

Problem :

I have inserted an image in a div using CSS to all the pages on a certain domain, using my Google Chrome extension. Users keep asking me to link the image to the domain's home page. I don't know how to do this.

The image is at the top right of the page. Basically I just need to inject the html

<a href="domain.com">[IMAGE]</a>

where [IMAGE] is the image.

I don't think I can do this with CSS, so I don't know how to do it.


UPDATE:

I need to append it to a current element, not make a new element.



Solution :

You may add a js file injecting the proper html instead of just using a css file.

Here's how your js could be :

var node = document.createElement("a");
node.setAttribute('href',"http://canop.org");
var img = document.createElement("img");
img.setAttribute('src', "http://canop.org/chrall/screens/screen_01.png");
node.appendChild(img);
document.body.​insertBefore(node, document.body.​​​​​​​​​​​​​firstChild);​

Here's a fiddle demonstrating the js : http://jsfiddle.net/dystroy/sftAX/


    CSS Howto..

    How to push image (behind canvas) to front in order for its onclick function to work

    How to Make a Picture rotate Continuously? [closed]

    Adding css resource to a QuickTip in ExtJS not showing

    Ruby on rails dropdown