时间戳

首页 > 解决方案 > 用 Chrome 扩展程序替换 Google 徽标

javascript - 用 Chrome 扩展程序替换 Google 徽标

问题描述

所以我做了一个扩展，它应该用另一张图片替换搜索结果页面的谷歌标志。由于徽标的 img 标签没有自己的类或 id，我不得不通过使用类更改最近的父 div 的 innerHTML 来做这件事有点奇怪。

清单.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"]
        }
    ]
}

更改图片.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>";

标签： javascriptjsongoogle-chromegoogle-chrome-extension

解决方案

document.getElementsByClassName()返回一个html collection object. 要使用此类选择特定的第一个元素，您必须像这样指定索引 -

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

您还可以简化使用方法querySelector来获取具体信息img，然后进行src如下更改 -

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

推荐阅读