How Can I Load Local Images in Chrome Extensions with CSS?

Loading Local Images in Chrome Extensions with CSS

In Chrome extensions, modifying website elements often involves using CSS through the content script feature. However, loading local images with CSS can be challenging. This article addresses this issue with a specific example and a solution.

Problem: Loading Local Images Fails

The issue arises when attempting to set a background image using CSS, but local images are not displayed. This is despite the images being packed within the extension.

Solution: Chrome Extension i18n Support

Chrome's i18n support provides a way to reference the extension's local files in CSS. To accomplish this:

1. Keep Images in a Folder: Store your images in a dedicated folder within the extension.
2. Use chrome-extension Protocol: Reference images in CSS using the following format:

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

1. Include in Manifest: Ensure that the images you want to use are listed in the web_accessible_resources section of the manifest.json file.

Using this method, Chrome can correctly load local images from within the extension for background-image or other CSS properties.

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