Manifest V3 中正确加载和引用图片资源
Chrome 扩展程序开发中，Manifest V3 版本的图片资源加载常常引发问题。本文将详细讲解如何在 manifest.json 文件中正确配置 web_accessible_resources，并在 CSS 文件中正确引用图片。
问题描述
假设扩展程序目录结构如下：
|- manifest.json
|- css
| |- style.css
|- images
| |- icon-48.png
| |- icon-32.jpg
| |- icon-16.png
|- scripts
|- content.js
manifest.json 中 web_accessible_resources 配置如下：
"web_accessible_resources": [
{
"resources": [
"/images/*"
],
"matches": [
""
]
}
],
style.css 中图片引用失败：
.text-icon {
background-image: url('../images/icon-48.png');
background-size: cover;
width: 20px;
height: 20px;
}
解决方案
方法一：修正 CSS URL 语法
CSS url() 函数中，路径引号并非必需。尝试移除引号：
.text-icon {
background-image: url(../images/icon-48.png);
background-size: cover;
width: 20px;
height: 20px;
}
方法二：使用 CSS 变量
更稳妥的方法是使用 CSS 变量，并通过 content script 注入图片 URL。
- 在
style.css中定义 CSS 变量：
:root {
--my-extension-icon48: "";
}
.text-icon {
background-image: url(var(--my-extension-icon48));
background-size: cover;
width: 20px;
height: 20px;
}
- 在
content.js中注入 URL：
const iconUrl = chrome.runtime.getURL('/images/icon-48.png');
document.documentElement.style.setProperty('--my-extension-icon48', iconUrl);
此方法确保正确获取图片路径，并避免相对路径问题。 chrome.runtime.getURL() 方法获取正确的图片 URL，避免了相对路径可能造成的错误。
选择方法二能更有效地解决潜在的路径问题，推荐使用。 记住，确保你的 manifest.json 文件中的 web_accessible_resources 配置正确，并且你的图片文件存在于指定的目录下。
