Chrome extension planting an image in the current document

Question

I'm trying to write a Chrome extension that as a part of what it's doing needs to add an image to the currently displayed html. I guess I need to use document.createElement and then insert it somewhere, but I'm not sure about two things:

1. The image comes as part of the extension, i.e. there's no direct link to it anywhere, so simply adding an img tag won't work. Unless I'm missing something.

2. Not Chrome-related at all: what is the best way to add the img tag to a specific location if the html elements do NOT have any id's? I can find the place I want to add the img to using regexps, and can rewrite the whole html if needed, but maybe there's a more subtle way I'm missing.

Answer 1

You can get image url from your extension folder by running:

var imgUrl = chrome.extension.getURL("image.png");

(it would look like this: chrome-extension://<extension_id>/image.png)

If you're using manifest-version: 2 you'll need to whitelist any resource in your extension that you inject into other documents. See this question for more info.

As to your second question - you need to provide more details. Does it have class? Do you know inside what tag is it (li, div)? You probably would be better off using jQuery for this - it has lots of pretty advanced selectors. I don't know what search criteria are you trying to use exactly so I can't suggest a concrete solution.