Как реализовать воздушный шар на день рождения Google с помощью js?

Мне очень нравятся плавающие воздушные шары Google на моем аватаре в честь дня рождения. Есть ли способ оставить воздушные шары плавающими на моем аватаре? Можно ли написать сценарий Tampermonkey для выполнения этого требования?

    let divNav = document.querySelector('div[role = "navigation"]')
    let btnAccount = undefined, btnArr = divNav.getElementsByTagName("a")
    for (let objA of btnArr) {
        if (objA.getAttribute("aria-label").includes("account")) {btnAccount = objA; break;}
    }
    if (btnAccount != undefined) {
        let imgEle = document.createElement("img")
        imgEle.className = "gb_d"
        imgEle.src = "https://ssl.gstatic.com/gb/images/birthday/apd_desktop_dark_2x.gif"
        imgEle.style.zIndex = 991
        imgEle.style.position = "absolute"
        imgEle.style.top = "-4px"
        imgEle.style.bottom = "-4px"
        imgEle.style.left = "-4px"
        imgEle.style.right = "-4px"
        btnAccount.parentNode.insertBefore(imgEle, btnAccount);
    }
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

if (objA.getAttribute("aria-label").includes("account"))

includes() чувствителен к регистру, я думаю, вы хотели ввести Account вместо account.

Нет необходимости перебирать все теги <a>, просто выберите нужный элемент с помощью селекторов атрибутов .

Вот исправленная версия, которая должна работать на всех сайтах Google (и iframe), включая Youtube:

function main(){
    const images = document.querySelectorAll('a[aria-label^ = "Google Account:"] > img, img[alt = "Profile image"], img[alt = "Avatar image"]');
    if (!images.length) return;

    const imgEle = document.createElement("img");
    imgEle.className = "balloons"; // changed classname to avoid inherited styles
    imgEle.src = 'https://ssl.gstatic.com/gb/images/birthday/apd_desktop_dark_2x.gif';
    //imgEle.style.zIndex = 991  // causes weird behavior sometimes (used img.after instead)
    imgEle.style.position = 'absolute';
    imgEle.style.height = '100%';
    imgEle.style.width = '100%';
    imgEle.style.top = '0px';
    imgEle.style.left = '0px';
    imgEle.style.transform = 'scale(1.1)'; // not needed but looks better with

    images.forEach(img => {
        img.parentElement.style.position ='relative'; // fixes issue on youtube
        img.after(imgEle.cloneNode(true)); // used after instead of before (takes care of z-index)
    });
}

window.addEventListener('load', () => setTimeout(main, 1000)); // sometimes elements take some time to load (especially iframes)

для соответствия Google и YouTube:

// @match        https://*.google.com/*
// @match        https://www.youtube.com/*

вау, это сработало! Большое спасибо за вашу помощь~ Надеюсь, у вас будет отличный день!

Asterisk Azurain 16.05.2024 08:48

Другие вопросы по теме