url() not working in css background-image property when loaded as content script

[Dado]

background-image url() property does not seem to work when css is
loaded as content script. Other background properties (e.g. color)
work just fine.

I know we should use chrome.extension.getURL("images/myimage.png"); in
content scripts javascript files, is there an equivalent for content
script css files???

Cheers,

Dado

[Ronald Schouten]

It has worked fine for me in the past. Having said that, you could switch to embedding your image within the CSS file as a data URI.

http://software.hixie.ch/utilities/cgi/data/data

Ron

--
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.

[Ronald Schouten]

Small correction. I don't think I was referencing an image within my CSS file before. I was using JavaScript to attach the background image to a specific element. However, I did use the utility below to encode the image as a data URI and it works quite well.

[Dado]

Thank you Ronald! :)

It's not very convenient but at least it works.

Cheers,

Dado

On Feb 4, 12:59 am, Ronald Schouten <ron.schou...@gmail.com> wrote:
> Small correction. I don't think I was referencing an image within my CSS
> file before. I was using JavaScript to attach the background image to a
> specific element. However, I did use the utility below to encode the image
> as a data URI and it works quite well.
>

> On Thu, Feb 4, 2010 at 8:54 AM, Ronald Schouten <ron.schou...@gmail.com>wrote:
>
>
>
> > It has worked fine for me in the past. Having said that, you could switch
> > to embedding your image within the CSS file as a data URI.
>
> >http://software.hixie.ch/utilities/cgi/data/data
>
> > <http://software.hixie.ch/utilities/cgi/data/data>Ron
>

> > On Thu, Feb 4, 2010 at 3:43 AM, Dado <edoardo.marc...@gmail.com> wrote:
>
> >> background-image url() property does not seem to work when css is
> >> loaded as content script. Other background properties (e.g. color)
> >> work just fine.
>
> >> I know we should use chrome.extension.getURL("images/myimage.png"); in
> >> content scripts javascript files, is there an equivalent for content
> >> script css files???
>
> >> Cheers,
>
> >> Dado
>
> >> --
> >> 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>

[Arne Roomann-Kurrik]

You can also use the url chrome-extension://<your extension id>/images/
myimage.png as the URL for an image and it should work. Obviously
this requires you to know the ID of your extension, but once your
extension is uploaded to the gallery that number will stay the same,
and it is a little easier than having to use data URIs.

~Arne

[Ronald Schouten]

Thanks Arne,

Does using the extension ID in the CSS file mean that the image will not appear during development when the extension is unpacked? Is there any plan to improve this?

Ron

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.

--
Ronald Schouten - Web Developer / JavaScript Ninja

Like Google Chrome and Gmail? Try my Gmail Notes extension.
https://chrome.google.com/extensions/detail/hiheeapdnogdfdcbpjpibpllaifndgke

[Arne Roomann-Kurrik]

Sadly it appears that way. I've filed http://code.google.com/p/chromium/issues/detail?id=35208
as a request for a better solution for this problem. You may want to
star it to receive updates.

~Arne

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

> > ...@chromium.org>
> > > > >> .
> > > > >> For more options, visit this group at
>
> >http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
>
> > --
> > 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<chromium-extensions%2Bunsubscr i...@chromium.org>

> > .
> > For more options, visit this group at
> >http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
>
> --

> Ronald Schouten - Web Developer / JavaScript Ninja
>

> Like Google Chrome and Gmail? Try my Gmail Notes extension.https://chrome.google.com/extensions/detail/hiheeapdnogdfdcbpjpibplla...

[Bjorn Tipling]

This is pretty awful. Chromium devs should replace extension ID with
extension name or just assume that an extension can only ever use its
own assets in css and get rid of the ID altogether. I mean can one
extension use the CSS of another? What kind of feature is that? This
is a bug.

On Feb 9, 5:21 pm, Arne Roomann-Kurrik <kur...@chromium.org> wrote:
> Sadly it appears that way.  I've filedhttp://code.google.com/p/chromium/issues/detail?id=35208

> as a request for a better solution for this problem.  You may want to
> star it to receive updates.
>
> ~Arne
>

> On Feb 9, 4:53 pm, Ronald Schouten <ron.schou...@gmail.com> wrote:
>
>
>
> > Thanks Arne,
>

> > Does using the extension ID in theCSSfile mean that the image will not

> > appear during development when the extension is unpacked? Is there any plan
> > to improve this?
>
> > Ron
>
> > On Wed, Feb 10, 2010 at 8:45 AM, Arne Roomann-Kurrik <kur...@chromium.org>wrote:
>
> > > You can also use the url chrome-extension://<your extension id>/images/
> > > myimage.png as the URL for an image and it should work.  Obviously
> > > this requires you to know the ID of your extension, but once your
> > > extension is uploaded to the gallery that number will stay the same,
> > > and it is a little easier than having to use data URIs.
>
> > > ~Arne
>

> > > On Feb 4, 6:08 am, Dado <edoardo.marc...@gmail.com> wrote:
> > > > Thank you Ronald! :)
>
> > > > It's not very convenient but at least it works.
>
> > > > Cheers,
>
> > > > Dado
>
> > > > On Feb 4, 12:59 am, Ronald Schouten <ron.schou...@gmail.com> wrote:
>
> > > > > Small correction. I don't think I was referencing an image within my
> > >CSS
> > > > > file before. I was using JavaScript to attach the background image to a
> > > > > specific element. However, I did use the utility below to encode the
> > > image
> > > > > as a data URI and it works quite well.
>
> > > > > On Thu, Feb 4, 2010 at 8:54 AM, Ronald Schouten <
> > > ron.schou...@gmail.com>wrote:
>
> > > > > > It has worked fine for me in the past. Having said that, you could
> > > switch

> > > > > > to embedding your image within theCSSfile as a data URI.

>
> > > > > >http://software.hixie.ch/utilities/cgi/data/data
>
> > > > > > <http://software.hixie.ch/utilities/cgi/data/data>Ron
>
> > > > > > On Thu, Feb 4, 2010 at 3:43 AM, Dado <edoardo.marc...@gmail.com>
> > > wrote:
>
> > > > > >> background-image url() property does not seem to work whencssis
> > > > > >> loaded as content script. Other background properties (e.g. color)
> > > > > >> work just fine.
>
> > > > > >> I know we should use chrome.extension.getURL("images/myimage.png");
> > > in
> > > > > >> content scripts javascript files, is there an equivalent for content
> > > > > >> scriptcssfiles???
>
> > > > > >> Cheers,
>
> > > > > >> Dado
>
> > > > > >> --
> > > > > >> 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><chromium-extensions%2Bunsubscr
> > > ....@chromium.org>

> > > > > >> .
> > > > > >> For more options, visit this group at
>
> > >http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.
>
> > > --
> > > 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 i...@chromium.org>

[Arne Roomann-Kurrik]

For files hosted inside the exension like a popup, everything works like you'd expect.  The issue comes when you inject CSS into a webpage using content script injection - relative paths will reference the URL of the page you inject the CSS into, not the extension location itself.  The solution is not to use relative paths in CSS.  The feature request I filed makes that a bit easier on the developer.

~Arne