Chrome 扩展程序中图片资源加载指南

{
  "name": "Random Stars",
  "version": "1.0",
  "description": "Randomly assigns stars",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": [
        "<all-urls>"
      ],
      "css": [
        "style.css"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "star.png"
      ],
      "matches": [ "<all-urls>" ]
    }
  ]
}

// content.js (原始问题代码片段)
if (window.location.hostname === "<url>") { // 假设此处是目标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');
    // 常见错误点：直接赋值 chrome.runtime.getURL() 的结果
    // starDiv.style.backgroundImage = chrome.runtime.getURL("star.png"); // 这种写法是错误的
    starDiv.style.width = `${stars * 20}px`;
    companyName.insertAdjacentElement('afterend', starDiv);
  });
}

/* style.css */
.company-stars {
    display: inline-block;
    width: 100px;
    height: 20px;
    background-image: url("star.png"); /* 在CSS中，相对路径通常会被浏览器正确解析 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-left: 5px;
  }

// content.js (修正后的代码片段)
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');
    // 正确的做法：使用模板字符串将 chrome.runtime.getURL() 的结果包裹在 url() 中
    starDiv.style.backgroundImage = `url(${chrome.runtime.getURL("star.png")})`;
    starDiv.style.width = `${stars * 20}px`;
    companyName.insertAdjacentElement('afterend', starDiv);
  });
}

{
  "name": "Random Stars",
  "version": "1.0",
  "description": "Randomly assigns stars",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": [
        "<all-urls>"
      ],
      "css": [
        "style.css"
      ],
      "js": [
        "content.js"
      ]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "star.png"
      ],
      "matches": [ "<all-urls>" ]
    }
  ]
}

// content.js
// 假设这里是需要注入星星的目标网站URL和选择器
const TARGET_HOSTNAME = "example.com"; // 替换为你的目标网站域名
const TARGET_SELECTOR = ".company-name"; // 替换为你需要添加星星的元素选择器

if (window.location.hostname === TARGET_HOSTNAME) {
  const companyNames = document.querySelectorAll(TARGET_SELECTOR);

  companyNames.forEach(companyName => {
    const stars = Math.floor(Math.random() * 5) + 1; // 随机生成1到5颗星
    const starDiv = document.createElement('div');
    starDiv.classList.add('company-stars');

    // 核心修正：使用 url() 包裹 chrome.runtime.getURL() 的结果
    starDiv.style.backgroundImage = `url(${chrome.runtime.getURL("star.png")})`;
    starDiv.style.width = `${stars * 20}px`; // 根据星数调整宽度

    companyName.insertAdjacentElement('afterend', starDiv);
  });
}

/* style.css */
.company-stars {
    display: inline-block;
    height: 20px; /* 图片高度 */
    background-image: url("star.png"); /* 在CSS中，相对路径通常会被浏览器正确解析 */
    background-size: contain; /* 确保图片完整显示在元素内 */
    background-repeat: repeat-x; /* 根据需要重复图片，形成多颗星 */
    background-position: left center; /* 图片位置 */
    margin-left: 5px;
    vertical-align: middle; /* 垂直对齐 */
  }