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

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.

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');

Your image URL should look like chrome-extension://<EXTENSION_ID>/image.jpg

You would be better off replacing css through javascript. From docs:

//Code for displaying <extensionDir>/images/myimage.png:
var imgURL = chrome.extension.getURL("images/myimage.png");
document.getElementById("someImage").src = imgURL;

There are a lot of older answers and solutions to this question.

As of August 2015 (using Chrome 45 and Manifest version 2), the current "best practice" for linking to local images within Chrome Extensions is the following approach.

1) Link to the asset in your CSS using a relative path to your extension's images folder:

.selector {
    background: url('chrome-extension://__MSG_@@extension_id__/images/file.png');
}

2) Add the individual asset to to the web_accessible_resources section of your extension's manifest.json file:

"web_accessible_resources": [
  "images/file.png"
]

Note: This method is suitable for a few files, but doesn't scale well with many files.

Instead, a better method is to leverage Chrome's support for match patterns to whitelist all files within a given directory:

{
    "name": "Example Chrome Extension",
    "version": "0.1",
    "manifest_version": 2,
    ...    
    "web_accessible_resources": [
      "images/*"
    ]
}

Using this approach will allow you to quickly and effortlessly use images in your Chrome Extension's CSS file using natively supported methods.

One option would be to convert your image to base64:

and then put the data right into your css like:

body { background-image: url(data:image/png;base64,iVB...); }

While this might not be an approach you would want to use when regularly developing a webpage, it is a great option due to some of the constraints of building a Chrome Extension.

My solution.

With Menifest v2 you need to add web_accessible_resources to the file and then use chrome-extension://__MSG_@@extension_id__/images/pattern.png as the url in your css file.

CSS:

 #selector {
      background: #fff url('chrome-extension://__MSG_@@extension_id__/images/pattern.png'); 
 }

Manifest.json

{
  "manifest_version": 2,

  "name": "My Extension Name",
  "description": "My Description",
  "version": "1.0",

  "content_scripts": [
      {
        "matches": ["https://mydomain.com/*"],
        "css": ["style.css"]
      }
    ],

  "permissions": [
    "https://mydomain.com/"
  ],
  "browser_action": {
      "default_icon": {                    
            "19": "images/icon19.png",           
            "38": "images/icon38.png"          
       },
       "default_title": "My Extension Name"  
   },
   "web_accessible_resources": [
       "images/pattern.png"
     ]
}

p.s. Your manifest.json might look different to this one.

This CSS-version-only works in extension environment (app page, popup page, background page, option page) as well as content_scripts CSS file.

In .less file, I always set a variable at the beginning:

@extensionId : ~"__MSG_@@extension_id__";

Then later, if you want to refer to extension-local-resource like images, use:

.close{
    background-image: url("chrome-extension://@{extensionId}/images/close.png");
}

One thing to mention is that in the web_accessible_resources you can use wildcards. So instead of

"images/pattern.png"

You can use

"images/*"

Just to clarify, according to the documentation, every file in an extension is also accessible by an absolute URL like this:

chrome-extension://<extensionID>/<pathToFile>

Note the <extensionID> is a unique identifier that the extension system generates for each extension. You can see the IDs for all your loaded extensions by going to the URL chrome://extensions. The <pathToFile> is the location of the file under the extension's top folder; it's the same as the relative URL.

...

Changing background image in CSS:

#id { background-image: url("chrome-extension://<extensionID>/<pathToFile>"); }

Changing background image in CSS through JavaScript:

document.getElementById('id').style.backgroundImage = "url('chrome-extension://<extensionID>/<pathToFile>')");

Changing background image in CSS through jQuery:

$("#id").css("background-image", "url('chrome-extension://<extensionID>/<pathToFile>')");

For manifest v3, there are some modifications:

1. chrome.extension.getUrl() -> chrome.runtime.getUrl()
2. "web_accessible_resources" -> "web_accessible_resources.resources"
3. fill in "web_accessible_resources.matches"

2, 3 like this:

"web_accessible_resources": [{
  "resources": ["images/logo.png"],
  "matches": ["<all_urls>"],
}],

reference:

• https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#web-accessible-resources

Those answers above are great but your extension gets a new id every time it gets installed, so putting the id manually doesn't work if you gonna make it public at some point.

Here's my solution using manifest v.3:

//Get the url from some file within your extension's folder and store it on a global variable
var url = chrome.runtime.getURL('my_extension/img/Icon.svg');

//Take off the last part from the url string
url = url.replace('img/Icon.svg', '');

Now replace the src attribute for a custom one on every img tag and keep the file path as it's value like this:

<img ref-file="img/IconStop.svg" alt="">

Then run this function after loading the html:

loadImgs = function () {
    $("img[ref-file]").each(function() {
        var ref_file = $(this).attr('ref-file');
        url = url + ref_file;
        $(this).attr('src', url);
    });
}