Google Chrome Extensions - Can't load local images with CSS

css google-chrome-extension background-image
Bjarki Jonasson picture Bjarki Jonasson · Aug 24, 2010 · Viewed 50.5k times · Source

I have a simple Chrome extension that uses the content script feature to modify a website. More specifically, the background-image of said website.

For some reason I can't seem to be able to use local images, even though they are packed in the extension.

body {
    background: #000 url('image.jpg') !important;
    background-repeat: repeat !important;
}

That's it, the simplest CSS... but it won't work. The browser doesn't load the image.

Answer

David Lemphers picture David Lemphers · Jan 14, 2012

Chrome has i18n support that provides the ability to reference your extension in your CSS. I keep my images in an image folder in the extension, so reference assets in the CSS like so:

background-image:url('chrome-extension://__MSG_@@extension_id__/images/main.png');

Related questions

How to save CSS changes of Styles panel of Chrome Developer Tools?

How to save CSS changes of Styles panel of Google Chrome Developer Tools? At tool's website it's mentioned that we can see all change in resource panel But I'm working locally on a CSS file but changes are not showing …

Read More
Export CSS changes from inspector (webkit, firebug, etc)

When I'm working with CSS, I'll often test in a browser - say, Chrome - right click an element, click Inspect Element, and edit the CSS right there. The use of arrow keys to change things like margin and padding …

Read More
My CSS is not getting injected through my content script

Can anyone explain this to me. I'm trying to inject a CSS file onto a webpage using the content_script with Google extensions, but my css file never gets added to the webpage. Can someone tell me what I'm doing …

Read More