Мне очень нравятся плавающие воздушные шары 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);
}
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/*
вау, это сработало! Большое спасибо за вашу помощь~ Надеюсь, у вас будет отличный день!