如何用我的 chrome 扩展程序中的本地图像替换网站上的图像？答案

【问题标题】：How can I replace an image on a website with a local image in my chrome extension?如何用我的 chrome 扩展程序中的本地图像替换网站上的图像？
【发布时间】：2022-11-01 17:47:52
【问题描述】：

我有一个 chrome 扩展，它改变了维基百科页面的外观。现在我想改变那里的形象。我想用我的 chrome 扩展中存储的一个本地存储来替换它。我想更改一些 HTML 代码来显示我的图像。我的清单.json看起来像这样

{
    "name" : "name",
    "version": "0.0.1",
    "manifest_version": 2,
    "description" : "some desc",
    "web_accessible_resources" : [
        "images/*.png"
    ],
    "content_scripts" : [
        {
            "css": ["style.css"],
            "js": ["imgreplace.js"],
            "matches" : ["*://www.wikipedia.de/"]
        }
    ]
}

imgreplace.js

document.getElementsByClassName("wikipedia-logo").innerHTML = this.innerHTML + '<a href="https://www.wikipedia.org/"><img src="chrome-extension://__MSG_@@extension_id__/images/wikipedia_logo.png" title="Wikipedia" alt="Wikipedia"/></a>'

如果我刷新页面没有任何反应。没有错误。

我也尝试过使用函数injectAdjacentHTML，但我收到错误injectAdjacentHTML is not a function。

我该如何更换它？

告诉我，如果你需要我的代码。

【问题讨论】：

style.css 中有什么内容？
@ThomasMueller 只是一些样式更改、倒置颜色等。没什么太重要的
您想替换所有 WP 页面上的 Wikipedia 徽标，而不仅仅是 wikipedia.de，对吗？因为wikipedia.de 和（例如）de.wikipedia.org/wiki/Stack_Overflow_%28Website%29 使用不同的方法来显示 WP 徽标。因此，需要不同的方法来替换徽标。
我实际上只想将它替换为 wikipedia.de。我将为实际的 wiki 制作一个通用版本，它适用于所有语言。我在 en.wikipedia 页面上不需要它，因为它甚至没有起始页。这就是为什么我现在只为德语版本做这件事。
您正在使用 Manifest V2，这是故意的吗？因为“web_accessible_resources”清单键在 Manifest V3 中具有不同的格式。

标签： javascript google-chrome-extension

【解决方案1】：

我修复了一些错误。

imgreplace.js

const path = chrome.runtime.getURL("images/wikipedia_logo.png");

document.getElementsByClassName("wikipedia-logo")[0].innerHTML +=
  '<a href="https://www.wikipedia.org/"><img src="'
  + path + '" title="Wikipedia" alt="Wikipedia"/></a>';

【讨论】：

顺便说一句，如果你想替换它，你只需要 = 而不是 +=

【解决方案2】：

这个版本与@NorioYamamoto 的版本基本相同；它只是更干净一点。

原始的 WP 徽标短暂可见，我不知道如何防止这种情况。如果您使用 SVG 而不是 PNG，则更改发生得如此之快，以至于您几乎看不到原始徽标 (YMMV)。

清单.json

{
    "manifest_version": 3,
    "name" : "Replace Wikipedia Logo",
    "version": "0.0.1",
    "content_scripts" : [
        {
            "js": ["imgreplace.js"],
            "matches" : ["*://*.wikipedia.de/*"]
        }
    ],
    "web_accessible_resources" : [
        {
            "resources": ["/images/*.png"],
            "matches": ["*://*.wikipedia.de/*"]
        }
    ]
}

imgreplace.js

try {
    let logo_selector = "#mainbox > div.wikipedia-logo > a > img";
    let logo_imgs = document.querySelectorAll(logo_selector);
    if (logo_imgs.length == 0) {
        console.error(`The CSS selector "${logo_selector}" didn't find any elements.`);
    }
    else if (logo_imgs.length == 1) {
        logo_imgs[0].src = chrome.runtime.getURL("/images/wikipedia_logo.svg");
    }
    else {
        console.error(`The CSS selector "${logo_selector}" found more than one element.`);
    }
}
catch(e) {
    console.error(e);
}

【讨论】：