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="">[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.


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");
var img = document.createElement("img");
img.setAttribute('src', "");
document.body.​insertBefore(node, document.body.​​​​​​​​​​​​​firstChild);​

Here's a fiddle demonstrating the js :

    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