将 Google 徽标替换为 Chrome 扩展名

Question

所以我做了一个扩展，应该用另一张图片替换搜索结果页面的 Google 徽标。由于徽标的 img 标签没有自己的 class 或 id，我不得不通过将最近的父级 div 的 innerHTML 更改为 class 来做这有点奇怪。 =14=]

manifest.json:

{
    "name": "Logo Replacer",
    "version": "1.0",
    "manifest_version": 2,
    "web_accessible_resources" : [
        "images/*.png"
    ],
    "description": "Replaces Google logo",
    "permissions": ["activeTab", "declarativeContent", "storage"],

    "content_scripts" : [
        {
            "matches" : [
                "<all_urls>" //normally I want only google.com here but idk how
            ],
            "js": ["changePicture.js"]
        }
    ]
}

changePicture.js:

var googleLogo = document.getElementsByClassName("doodle"); //the parent div has the classes "logo" and "doodle"

googleLogo.innerHTML = "<a href=\"https://www.google.com\" data-hveid=\"8\"><img alt=\"Alt\" height=\"33\" src=\"https://example.com/logo.png\" title=\"Title\" width=\"92\" border=\"0\" data-atf=\"1\"></a>";

Answer 1

document.getElementsByClassName() returns 一个 html collection object。要 select 具有此 class 的特定第一个元素，您必须像这样指定索引 -

var googleLogo = document.getElementsByClassName("doodle")[0];

您还可以使用 querySelector 简化您的方法来获得特定的 img，然后像下面这样更改 src -

document.querySelector(".logo.doodle a img").src = "Your desired source"

将 Google 徽标替换为 Chrome 扩展名

Replacing the Google logo with a Chrome extension

javascript

json

google-chrome

google-chrome-extension