Chrome 扩展程序Manifest V3：如何正确加载和引用图片资源？-js教程-PHP中文网

Chrome 扩展程序Manifest V3：如何正确加载和引用图片资源？

花韻仙語

发布： 2025-02-23 23:04:10

原创

409人浏览过

chrome 扩展程序manifest v3：如何正确加载和引用图片资源？

Manifest V3 中正确加载和引用图片资源

Chrome 扩展程序开发中，Manifest V3 版本的图片资源加载常常引发问题。本文将详细讲解如何在 manifest.json 文件中正确配置 web_accessible_resources，并在 CSS 文件中正确引用图片。

问题描述

假设扩展程序目录结构如下：

<code>|- manifest.json
|- css
|   |- style.css
|- images
|   |- icon-48.png
|   |- icon-32.jpg
|   |- icon-16.png
|- scripts
    |- content.js</code>

登录后复制

manifest.json 中 web_accessible_resources 配置如下：

<code class="json">"web_accessible_resources": [
    {
      "resources": [
            "/images/*"
        ],
      "matches": [
            "<all_urls>"
        ]
    }
],</code>

登录后复制

style.css 中图片引用失败：

<code class="css">.text-icon {
    background-image: url('../images/icon-48.png');
    background-size: cover;
    width: 20px;
    height: 20px;
}</code>

登录后复制

解决方案

图像转图像AI

利用AI轻松变形、风格化和重绘任何图像

查看详情

方法一：修正 CSS URL 语法

CSS url() 函数中，路径引号并非必需。尝试移除引号：

<code class="css">.text-icon {
    background-image: url(../images/icon-48.png);
    background-size: cover;
    width: 20px;
    height: 20px;
}</code>

登录后复制

方法二：使用 CSS 变量

更稳妥的方法是使用 CSS 变量，并通过 content script 注入图片 URL。

在 style.css 中定义 CSS 变量：

<code class="css">:root {
  --my-extension-icon48: "";
}

.text-icon {
  background-image: url(var(--my-extension-icon48));
  background-size: cover;
  width: 20px;
  height: 20px;
}</code>

登录后复制

在 content.js 中注入 URL：

<code class="javascript">const iconUrl = chrome.runtime.getURL('/images/icon-48.png');
document.documentElement.style.setProperty('--my-extension-icon48', iconUrl);</code>

登录后复制

此方法确保正确获取图片路径，并避免相对路径问题。 chrome.runtime.getURL() 方法获取正确的图片 URL，避免了相对路径可能造成的错误。

选择方法二能更有效地解决潜在的路径问题，推荐使用。记住，确保你的 manifest.json 文件中的 web_accessible_resources 配置正确，并且你的图片文件存在于指定的目录下。

以上就是Chrome 扩展程序Manifest V3：如何正确加载和引用图片资源？的详细内容，更多请关注php中文网其它相关文章！