Chrome扩展添加星级图片不显示问题求助

核心问题是Manifest V3中content script的CSS无法通过相对路径直接访问扩展内资源——content script运行在目标网页的上下文，相对路径会被解析为目标网页的路径，而非扩展自身的资源路径。以下是两种可行的解决方法：

方法一：在content.js中动态设置背景图URL #

利用chrome.runtime.getURL()生成扩展资源的绝对URL，直接在创建元素时设置背景图：

修正后的content.js：

if (window.location.hostname === "<url>") {
  const companyNames = document.querySelectorAll('<selector>');
  // 提前获取扩展内图片的绝对URL
  const starImageUrl = chrome.runtime.getURL("star.png");

  companyNames.forEach(companyName => {
    const stars = Math.floor(Math.random() * 5) + 1;
    const starDiv = document.createElement('div');
    starDiv.classList.add('company-stars');
    // 用绝对URL设置背景图
    starDiv.style.backgroundImage = `url(${starImageUrl})`;
    starDiv.style.width = `${stars * 20}px`;
    companyName.insertAdjacentElement('afterend', starDiv);
  });
}

对应的style.css移除background-image行（避免冲突）：

.company-stars {
    display: inline-block;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
}

方法二：通过CSS变量传递扩展资源URL #

如果希望保留CSS中的样式定义，可以先在content.js中注入CSS变量，再在CSS中引用：

修改content.js，添加变量注入：

// 先注入扩展图片的URL到全局CSS变量
document.documentElement.style.setProperty('--star-image-url', `url(${chrome.runtime.getURL("star.png")})`);

if (window.location.hostname === "<url>") {
  const companyNames = document.querySelectorAll('<selector>');

  companyNames.forEach(companyName => {
    const stars = Math.floor(Math.random() * 5) + 1;
    const starDiv = document.createElement('div');
    starDiv.classList.add('company-stars');
    starDiv.style.width = `${stars * 20}px`;
    companyName.insertAdjacentElement('afterend', starDiv);
  });
}

对应的style.css修改background-image为变量引用：

.company-stars {
    display: inline-block;
    width: 100px;
    height: 20px;
    background-image: var(--star-image-url);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
}

验证步骤 #

1. 打开Chrome开发者工具的Network面板，刷新页面后查看star.png的请求状态，正常情况下应该返回200，且URL格式为chrome-extension://[你的扩展ID]/star.png
2. 可以在content.js中console.log(starImageUrl)，确认生成的URL是否正确
3. 你提到的cookie权限报错确实与图片显示无关，无需处理

内容的提问来源于stack exchange，提问作者Szabolcs Magyar