请问如何在 manifest version3 中正确的通过 css 调用图片？

Question

我在开发一个 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": [
                "<all_urls>"
            ]
        }
    ],
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "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");

上引号变成了 &quot 这样的字符。

请问在 manifest version3 中正确的调用图片是该怎么操作呢？

Answer 1

1. CSS url() 里不需要引号
2. 建议用 css 变量来做，大体如下：

.text-icon {
  backgound-image: url(var(--my-extension-icon48);
}

然后用 content script 向目标页面写入：

document.documentElement.style.setProperty('--my-extension-icon48', '图标的 URL');