feat: support changing notifications

Author: so1ve

script.user.js

@@ -21,19 +21,21 @@
 	const TWITTER_LOGO = `<svg viewBox="0 0 24 24" aria-hidden="true" class="__FUCK_MUSK_BLUE__ r-4qtqp9 r-yyyyoo r-16y2uox r-8kz0gk r-dnmrzs r-bnwqim r-1plcrui r-lrvibr r-lrsllp">${TWITTER_LOGO_G}</svg>`;
 	/** @see https://greasyfork.org/zh-CN/scripts/471576-f-kelonmusk-twitter-com */
 	const TWITTER_LOGO_FOR_SHORTCUT_ICON = `data:image/svg+xml,%3Csvg width='500' height='500' viewBox='0 0 500 500' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Etwitter-logo%3C/title%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M170.2264 442.7654c162.2648 0 251.0168-140.0367 251.0168-261.4758 0-3.9775 0-7.9371-.258-11.8788 17.2659-13.009 32.1701-29.1167 44.0148-47.5687-16.1013 7.4318-33.1817 12.3057-50.6712 14.4587 18.4168-11.4849 32.2005-29.5486 38.786-50.8295-17.3177 10.7044-36.2637 18.2483-56.0204 22.3062-27.3466-30.29-70.8-37.7036-105.9942-18.0837-35.194 19.62-53.3763 61.3941-44.351 101.8979-70.9346-3.7043-137.0242-38.6047-181.8212-96.0154-23.4157 41.9903-11.4554 95.7083 27.3136 122.6754-14.0397-.4335-27.7732-4.3786-40.0416-11.5025v1.1646c.0115 43.7452 29.6141 81.4229 70.778 90.085-12.9882 3.6897-26.6156 4.229-39.8352 1.5766 11.5575 37.4355 44.6783 63.0807 82.4224 63.8192-31.2398 25.5748-69.831 39.4584-109.564 39.4166A172.495 172.495 0 0 1 35 401.4854c40.345 26.9696 87.2885 41.275 135.2264 41.2083' fill='%231DA1F2'/%3E%3Cpath d='M35 35h430v430H35z'/%3E%3C/g%3E%3C/svg%3E%0A`;
+	const FUCKER_X =
+		'<g><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g>';
 
 	/**
 	 * @param {string} selector
-	 * @returns {Promise<HTMLElement>}
+	 * @returns {Promise<HTMLElement[]>}
 	 */
-	const waitForElement = (selector) =>
+	const waitForElements = (selector) =>
 		new Promise((resolve) => {
-			if (document.querySelector(selector)) {
-				return resolve(document.querySelector(selector));
+			if (document.querySelectorAll(selector).length > 0) {
+				return resolve(document.querySelectorAll(selector));
 			}
 			const observer = new MutationObserver(() => {
-				if (document.querySelector(selector)) {
-					resolve(document.querySelector(selector));
+				if (document.querySelectorAll(selector).length > 0) {
+					resolve(document.querySelectorAll(selector));
 					observer.disconnect();
 				}
 			});
@@ -45,7 +47,7 @@
 			} catch {
 				// If failed, try again after 100ms
 				setTimeout(() => {
-					resolve(waitForElement(selector));
+					resolve(waitForElements(selector));
 				}, 100);
 			}
 		});
@@ -84,6 +86,7 @@
 		"main > div > div > div > div:nth-child(2) > div > svg";
 	const LOGOUT_ICON_SELECTOR =
 		'div[data-testid="confirmationSheetDialog"] > svg';
+	const NOTIFICATIONS_SELECTOR = "article";
 
 	const createStyleMaker =
 		(selector) =>
@@ -102,54 +105,66 @@
 	function initChangers() {
 		GM_addStyle(COLOR_CSS);
 
-		waitForElement(ICON_SELECTOR).then((iconEl) => {
+		waitForElements(ICON_SELECTOR).then(([iconEl]) => {
 			iconEl.href = TWITTER_LOGO_FOR_SHORTCUT_ICON;
 		});
 
 		GM_addStyle(makePlaceholderStyle(false));
-		waitForElement(PLACEHOLDER_SELECTOR).then((placeholder) => {
+		waitForElements(PLACEHOLDER_SELECTOR).then(([placeholder]) => {
 			placeholder.children[0].innerHTML = TWITTER_LOGO;
 			GM_addStyle(makePlaceholderStyle(true));
 		});
 
 		GM_addStyle(makeTwitterLogoStyle(false));
-		waitForElement(LOGO_SELECTOR).then((a) => {
+		waitForElements(LOGO_SELECTOR).then(([a]) => {
 			a.children[0].innerHTML = TWITTER_LOGO;
 			GM_addStyle(makeTwitterLogoStyle(true));
 		});
 
 		if (location.pathname === "/") {
 			GM_addStyle(makeHomepageIconStyle(false));
-			waitForElement(HOMEPAGE_ICON_SELECTOR).then((svg) => {
-				svg.innerHTML = TWITTER_LOGO_G;
+			waitForElements(HOMEPAGE_ICON_SELECTOR).then(([svg]) => {
 				svg.classList.add("__FUCK_MUSK_BLUE__");
+				svg.innerHTML = TWITTER_LOGO_G;
 				GM_addStyle(makeHomepageIconStyle(true));
 			});
 
 			GM_addStyle(makeHomepageLeftIconStyle(false));
-			waitForElement(HOMEPAGE_LEFT_ICON_SELECTOR).then((svg) => {
+			waitForElements(HOMEPAGE_LEFT_ICON_SELECTOR).then(([svg]) => {
 				svg.innerHTML = TWITTER_LOGO_G;
 				GM_addStyle(makeHomepageLeftIconStyle(true));
 			});
 		}
 
 		if (location.pathname === "/home") {
 			GM_addStyle(makeTwitterNavbarLogoStyle(false));
-			waitForElement(NAVBAR_LOGO_SELECTOR).then((div) => {
-				div.children[1].innerHTML = TWITTER_LOGO;
+			waitForElements(NAVBAR_LOGO_SELECTOR).then(([div]) => {
 				div.children[1].classList.add("__FUCK_MUSK_BLUE__");
+				div.children[1].innerHTML = TWITTER_LOGO;
 				GM_addStyle(makeTwitterNavbarLogoStyle(true));
 			});
 		}
 
 		if (location.pathname === "/logout") {
 			GM_addStyle(makeLogoutIconStyle(false));
-			waitForElement(LOGOUT_ICON_SELECTOR).then((svg) => {
+			waitForElements(LOGOUT_ICON_SELECTOR).then(([svg]) => {
 				svg.classList.add("__FUCK_MUSK_BLUE__");
 				svg.innerHTML = TWITTER_LOGO_G;
 				GM_addStyle(makeLogoutIconStyle(true));
 			});
 		}
+
+		if (location.pathname === "/notifications") {
+			waitForElements(NOTIFICATIONS_SELECTOR).then((notifications) => {
+				for (const notification of notifications) {
+					const svg = notification.children[0].children[0].children[0];
+					if (svg.innerHTML === FUCKER_X) {
+						svg.classList.add("__FUCK_MUSK_BLUE__");
+						svg.innerHTML = TWITTER_LOGO_G;
+					}
+				}
+			});
+		}
 	}
 	initChangers();
 	observeUrlChange(initChangers);