Chrome扩展开发：如何用本地图片替换维基百科页面图片？

核心错误原因 #

document.getElementsByClassName() 返回的是HTMLCollection（DOM元素集合），而非单个DOM元素。直接对集合调用 innerHTML 或 injectAdjacentHTML 会无效，因为这些方法仅属于单个DOM元素，集合本身没有这些属性/方法，这就是你代码无效果、调用 injectAdjacentHTML 报错的根本原因。

修正后的实现方案 #

方案1：替换现有logo图片（推荐，保留原有结构）

如果目标容器内已有图片元素，直接替换其 src 属性即可：

// 获取单个logo容器（querySelector返回匹配的第一个元素）
const logoContainer = document.querySelector(".wikipedia-logo");
if (logoContainer) {
  // 定位容器内的图片元素
  const targetImg = logoContainer.querySelector("img");
  if (targetImg) {
    // 用chrome.runtime.getURL自动生成扩展资源的正确路径
    targetImg.src = chrome.runtime.getURL("images/wikipedia_logo.png");
    // 可选：同步替换alt和title
    targetImg.alt = "Wikipedia";
    targetImg.title = "Wikipedia";
  }
}

方案2：完全替换logo容器内容

如果需要替换整个容器的HTML结构：

const logoContainer = document.querySelector(".wikipedia-logo");
if (logoContainer) {
  // 清空原有内容并插入新结构
  logoContainer.innerHTML = `
    <a href="https://www.wikipedia.org/">
      <img src="${chrome.runtime.getURL('images/wikipedia_logo.png')}" 
           title="Wikipedia" 
           alt="Wikipedia"/>
    </a>
  `;
}

关键注意事项 #

1. 资源路径可靠性：使用 chrome.runtime.getURL() 替代手动拼接 chrome-extension://__MSG_@@extension_id__，该方法会自动适配扩展ID，避免路径拼接错误。
2. 元素存在性判断：添加 if 判断确保目标元素存在后再执行操作，避免因页面结构变化导致的潜在报错。
3. 动态页面适配：如果维基百科页面是动态加载logo，需用 MutationObserver 监听元素加载：

const observer = new MutationObserver((mutations) => {
  const logoContainer = document.querySelector(".wikipedia-logo");
  if (logoContainer) {
    // 执行上述替换逻辑
    observer.disconnect(); // 找到元素后停止监听
  }
});
// 监听页面整体元素变化
observer.observe(document.body, { childList: true, subtree: true });

4. 文件路径校验：确认扩展目录下存在 images/wikipedia_logo.png，路径大小写、文件名需完全匹配。

内容的提问来源于stack exchange，提问作者SplatÄnti