Why Can't I Load Local Images with CSS in My Chrome Extension?

Unable to Load Local Images using CSS in Google Chrome Extensions

Question:

A developer is experiencing an issue in a Chrome extension where local images cannot be loaded using CSS, despite being packed within the extension.

Answer:

In Chrome extensions, images can be loaded using the chrome-extension:// protocol, followed by the extension's ID and the path to the image. The images must also be listed in the web_accessible_resources section of the extension's manifest file.

Here's an example CSS rule that correctly loads a local image:

body {
    background-image: url('chrome-extension://__MSG_@@extension_id__/images/main.png') !important;
    background-repeat: repeat !important;
}

This assumes that the image is located in an "images" folder within the extension and has been declared in the manifest as:

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

By following this approach, local images can be successfully loaded in Google Chrome extensions using CSS.

The above is the detailed content of Why Can't I Load Local Images with CSS in My Chrome Extension?. For more information, please follow other related articles on the PHP Chinese website!