javascript - 请问如何在 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');

Answer 2

在 Manifest version 3 中，对于如何通过 CSS 调用图片，有一些重要的变化。Manifest version 3 引入了 web_accessible_resources 字段，用于指定可以从网页上安全访问的资源。然而，这个字段在处理 CSS 资源时有一些限制。

在你的情况下，你需要确保你的图片资源在 web_accessible_resources 字段中被正确指定，并且你的 CSS 文件中的 URL 是正确的。

首先，你应该确保你的 web_accessible_resources 字段中的 resources 部分正确地指定了你的图片资源。你的 manifest.json 文件应该看起来像这样：

{  "name": "My Extension",  "version": "1.0",  "manifest_version": 3,  "web_accessible_resources": [    {      "resources": [        "/images/icon-48.png",        "/images/icon-32.jpg",        "/images/icon-16.png"      ],      "matches": [        "<all_urls>"      ]    }  ],  "content_scripts": [    {      "matches": [        "<all_urls>"      ],      "js": [        "scripts/content.js"      ],      "css": [        "css/style.css"      ]    }  ]}

请注意，你的图片资源现在作为 web_accessible_resources 字段的一部分被明确列出。这样，它们就可以被你的内容脚本和任何网页安全地访问。

然后，在你的 CSS 文件中，你应该使用正确的 URL 来引用你的图片资源。在你的情况下，你应该使用相对于 manifest.json 文件的路径来引用你的图片资源。因此，你的 CSS 文件应该看起来像这样：

.text-icon {  background-image: url('images/icon-48.png');  background-size: cover;  width: 20px;  height: 20px;}

请注意，我在这里使用了单引号 ' 来包围 URL。这是因为在 CSS 中，单引号和双引号是可以互换的，而且使用单引号可以避免在你的 URL 中出现转义字符的问题。