Search code examples
opera-extension

CSS images not working with Opera Next Extension

I'm in the process of porting a Chrome extension to Opera Next. Everything seems to be working except for CSS images.

In Chrome, we're specifying an image in CSS like this:

#webapps-compose img {
  content: url("chrome-extension://__MSG_@@extension_id__/skin/webapps/compose-128.png");
}

Will this work on Opera Next when it is released?

Solution

  • There's no need to specify chrome-extension://__MSG_@@extension_id__ in your stylesheet, even if you're embedding the style sheet on a non-extension page.

    url()s within a stylesheet are always resolved relative to the path of the style sheet itself. So, it suffices to use the following style sheet, the image will correctly be displayed.

    /* .css file within your extension directory */
#webapps-compose img {
    content: url("/skin/webapps/compose-128.png");
}