How to Load Local Images with CSS in Chrome Extensions?

Unable to Load Local Images with CSS in Google Chrome Extensions

For website modifications through content scripting within Chrome extensions, difficulties may arise when attempting to utilize local images. This issue persists despite incorporating the images within the extension.

The challenge stems from the specific CSS syntax used to reference local images:

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

Solution

To address this limitation, Chrome i18n support offers a crucial solution:

• Maintain your images in a designated "image" folder within the extension.
• Reference assets in the CSS using the following syntax:

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

Ensure that the images are included in the "web_accessible_resources" array in the manifest.json file, which grants permissions to access these resources from the extension.

The above is the detailed content of How to Load Local Images with CSS in Chrome Extensions?. For more information, please follow other related articles on the PHP Chinese website!