如何在Chrome扩展注入脚本中使用MP3/OGG音频与PNG/JPEG图片？

你的思路完全正确，web-accessible-resources是让注入脚本访问扩展内静态资源的核心配置项，下面分Manifest V3（当前主流）和V2两种版本给出具体配置方案及调用方法。

Manifest V3 配置方法 #

1. Manifest文件配置 #

假设你的扩展目录结构如下：

扩展根目录/
├─ manifest.json
├─ content.js（注入目标页面的脚本）
└─ assets/
   ├─ audio/
   │  ├─ bg.mp3
   │  └─ notify.ogg
   └─ images/
      ├─ icon.png
      └─ banner.jpg

在manifest.json中添加web-accessible-resources配置，指定允许访问的资源路径及匹配的目标网站：

{
  "manifest_version": 3,
  "name": "自定义扩展",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"], // 替换为你要注入脚本的网站
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "assets/audio/*.mp3",
        "assets/audio/*.ogg",
        "assets/images/*.png",
        "assets/images/*.jpg"
      ],
      "matches": ["https://目标网站域名/*"] // 必须与content_scripts的matches一致
    }
  ]
}

2. 注入脚本中调用资源 #

在content.js中通过chrome.runtime.getURL()获取资源的可访问URL，再创建对应元素使用：

// 加载并播放音频
const bgAudioUrl = chrome.runtime.getURL('assets/audio/bg.mp3');
const bgAudio = new Audio(bgAudioUrl);
bgAudio.play();

// 加载并插入图片
const iconImgUrl = chrome.runtime.getURL('assets/images/icon.png');
const iconImg = document.createElement('img');
iconImg.src = iconImgUrl;
iconImg.style.width = '50px';
document.body.appendChild(iconImg);

Manifest V2 配置方法 #

1. Manifest文件配置 #

V2的web-accessible-resources直接为数组形式，无需嵌套对象：

{
  "manifest_version": 2,
  "name": "自定义扩展",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://目标网站域名/*"],
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    "assets/audio/*.mp3",
    "assets/audio/*.ogg",
    "assets/images/*.png",
    "assets/images/*.jpg"
  ]
}

2. 注入脚本中调用资源 #

与V3完全一致，使用chrome.runtime.getURL()获取资源URL即可。

关键注意事项 #

• 资源路径必须与扩展内实际文件结构完全匹配，避免层级错误
• matches需精准匹配目标网站，尽量不要使用<all_urls>（会扩大权限范围）
• 修改Manifest文件后，必须在Chrome扩展管理页面重新加载扩展才能生效
• 若资源无法访问，检查web-accessible-resources的matches是否与content_scripts的matches完全对应

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