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 can I use a non-breaking space before an inline-block-default element, such as a

    How to use objects returned by a function?

    How can I create this centered header with multiple colors?

    How to precompile scss to a single css file in webpack?

    How can i position a background image to the top left and bottom right of a html element?

    How to make the CSS “~” selector work in GWT Css Resource

    How to apply CSS to buttons?

    How to get position of div inside td

    How to split page and reveal stuff underneath?

    How to make a central background over the page in HTML/CSS?

    How to call CSS from JavaScript

    how to size the silverlight object to available space

    How to add 10 pixels to a dynamic top position in CSS using SASS

    How do I set the background-image property to a linear gradient using jQuery's css method?

    How to apply css styles to dynamic JavaScript array?

    How can I make my an image?

    How to define the css :focus state in a jQuery selector?

    How with JQuery cause Hover on diffrent element than mouse is currently on top of

    How do I differentiate between IE versions 6 to 10 using IE CSS Hacks?

    How to Make 4 cells in each line by only css & html

    How do I add quotes to a CSS Variable value, to use it in ::before/::after content? [duplicate]

    How to paste a style sheet into a new document window in a Rally app

    How to recalculate the css url paths when moving it to a different folder

    How to fit your website for all or at lest most screen resolutions?

    How to check for text created by CSS?

    How Do I set this PHP printed HTML form to stay within

    tags?

    How to reset a css animation class using jquery?

    how to force page break between absolutely positioned elements in css

    How to implement the button css like Spotify play button in the table row

    Is there a limit to how deep an HTML document or CSS tree can be?