Firefox扩展替换图片失败求助：Manifest V2/V3均遇加载异常

Manifest V2 解决方案 #

你的V2配置中web_accessible_resources是正确的，问题出在JS代码的路径处理上：直接写images/Herald-Scum.png会让浏览器从当前网站域名下加载资源，导致404错误。需要用扩展API生成资源的完整可访问URL：

修改JS代码：

document.body.style.border = "2px solid red";
var head = document.getElementsByClassName("header_link_image")[0];
// 获取扩展内图片的合法访问URL
head.src = chrome.extension.getURL("images/Herald-Scum.png");

Manifest V3 解决方案 #

V3的web_accessible_resources配置存在错误，同时JS路径也需要调整：

1. 修正Manifest配置：matches字段需要指定允许访问该资源的目标站点，而非资源路径；resources要包含完整的资源相对路径：

"web_accessible_resources": [
    {
      "resources": ["images/Herald-Scum.png"],
      "matches": ["*://*.heraldsun.com.au/*"]
    }
]

2. 修改JS代码：V3使用chrome.runtime.getURL()获取资源URL：

document.body.style.border = "2px solid red";
var head = document.getElementsByClassName("header_link_image")[0];
head.src = chrome.runtime.getURL("images/Herald-Scum.png");

核心原理 #

内容脚本运行在页面上下文，直接使用相对路径会被解析为当前网站的路径。通过扩展提供的getURL()方法，可以生成指向扩展内部资源的特殊URL，浏览器会正确识别并加载扩展内的图片文件。

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