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 配置正确，并且你的图片文件存在于指定的目录下。
以上就是Chrome 扩展程序Manifest V3：如何正确加载和引用图片资源？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1502282.html
微信扫一扫 
支付宝扫一扫 
