Overlay PNG image to current web page

[Ric]

Good evening,

I'm hoping that you're able to offer a little guidance.

How would I go about adding an overlay image to the web page currently
open?

For example, I wish to have three options that are displayed in the
extension pop-up. The relevant image will be displayed upon the
selection by the user.

Regards,
Ric.

[PhistucK]

I have already answered you there, but in case you did not see the reply -

Use chrome.tabs.executeScript to execute JavaScript code on the current tab.

Then -

- Using DOM, add an absolutely\fixed positioned 100% width\height "<div>" (with an opacity value, I guess) and add an image into it.

Or

- Add jQuery and the ColorBox plugin and use it to show the image.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

[Ric]

You'll have to forgive the delay in my response - I am very grateful.

Whilst I understand the concept, as I'm an HTML/CSS chap, I'm
struggling to pull together the required code (after 2-3 hours trying
different alternatives).

Would it be possible to expand on your answer, or point me in the
right direction in terms of a tutorial?

Regards,
Ric.

On Sep 6, 1:06 pm, PhistucK <phist...@gmail.com> wrote:
> I have already answered you there, but in case you did not see the reply -

> Use chrome.tabs.executeScript<http://code.google.com/chrome/extensions/tabs.html#method-executeScript>

> to
> execute JavaScript code on the current tab.
> Then -
> - Using DOM, add an absolutely\fixed positioned 100% width\height "<div>"
> (with an opacity value, I guess) and add an image into it.
> Or
> - Add jQuery and the ColorBox plugin and use it to show the image.
>

> ☆*PhistucK*

>
>
>
> On Sun, Sep 5, 2010 at 00:38, Ric <rfurn...@gmail.com> wrote:
> > Good evening,
>
> > I'm hoping that you're able to offer a little guidance.
>
> > How would I go about adding an overlay image to the web page currently
> > open?
>
> > For example, I wish to have three options that are displayed in the
> > extension pop-up. The relevant image will be displayed upon the
> > selection by the user.
>
> > Regards,
> > Ric.
>
> > --
> > You received this message because you are subscribed to the Google Groups
> > "Chromium-extensions" group.

> > To post to this group, send email to chromium-extensi...@chromium.org.

> > To unsubscribe from this group, send email to

> > chromium-extensions+unsubscr...@chromium.org<chromium-extensions%2Bunsubscr...@chromium.org>
> > .

[PhistucK]

What did you manage to build so far?

Where are you stuck?

Where is the difficulty?

What is missing?

☆PhistucK

To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.

[Ric]

As I couldn't entirely fathom out how to add the div as you suggested
(I did attempt to do so with: document.createElement('div'), etc.) I
tried, purely as a test, to replicate the 'make page red' example from
Google's docs, but replacing document.body.bgColor with
document.body.style.backgroundimage, to no avail.

For example:

chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null,
{code:"document.body.bgColor='red'"});
});

If you could put me on the right path, I'm sure I'll work it out.

Many thanks,
Ric.

On Sep 7, 10:38 am, PhistucK <phist...@gmail.com> wrote:
> What did you manage to build so far?
> Where are you stuck?
> Where is the difficulty?
> What is missing?
>

> ☆*PhistucK*

> > <chromium-extensions%2Bunsubscr...@chromium.org<chromium-extensions%252Bunsubscr...@chromium.org>

[PhistucK]

You can either execute a certain code, or inject a whole file. For longer stuff (library injection, lots of functions, more than a few statements), you might want to use the file injection option (chrome.tabs.executeScript(null, {file: "something.js"}).

This code will create a semi transparent blue overlay, for example -

a = document.createElement("DIV");

a.style.width = "100%";

a.style.height = "100%";

a.style.position = "absolute"

a.style.top = "0px"

a.style.left = "0px"

a.style.backgroundColor = "blue"

a.style.zIndex = 9999999;

a.style.opacity = 0.5;

document.body.appendChild(a);

Through the same code (with a slight change, like a.appendChild(b) in case you call your inner element variable "b"), you can add content to this overlay.

Note - I am not sure this code is being regarded as best practice, this is just something with which I came up right now.

☆PhistucK

To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.