请问如何在 manifest version3 中正确的通过 css 调用图片?-灵析社区

PX_13

我在开发一个 chrome 的插件,现在遇到的问题是无法在 css 文件中调用图片文件,目录结构如下 /project-root │ ├── 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": [ "" ] } ], "content_scripts": [ { "matches": [ "" ], "js": [ "scripts/content.js" ], "css": [ "css/style.css" ] } ], 在 style.css 中 .text-icon { background-image: url('../images/icon-48.png'); background-size: cover; width: 20px; height: 20px; } 始终无法将图片载入。 我尝试过多个方法 * 绝对路径,相对路径,都无法载入图片 * 我尝试用 const imageUrl = chrome.runtime.getURL('images/icon-48.png'); console.log('Image URL:', imageUrl); icon.style.backgroundImage = `url(${imageUrl})`; 但得到的图片路径转字符了得到的结果是 `background-image: url("chrome-extension://adfdaksfdafdk/images/icon-48.png");` 上引号变成了 `"` 这样的字符。 请问在 manifest version3 中正确的调用图片是该怎么操作呢?

阅读量:18

点赞量:0

问AI
1. CSS "url()" 里不需要引号 2. 建议用 css 变量来做,大体如下: .text-icon { backgound-image: url(var(--my-extension-icon48); } 然后用 content script 向目标页面写入: document.documentElement.style.setProperty('--my-extension-icon48', '图标的 URL');