From 80784886dd7b77319ac5fb54409e20a9356fbe42 Mon Sep 17 00:00:00 2001 From: Melvyn M <56388157+Melvynx@users.noreply.github.com> Date: Fri, 5 Aug 2022 23:09:17 +0200 Subject: [PATCH] feat(notification): add hide notification notification badge and message notifications badge --- app/_locales/en/messages.json | 6 ++ app/pages/popup.html | 120 ++++++++++++++------------- app/scripts/contentscript.ts | 60 ++++++++++---- app/scripts/popup.ts | 56 +++++++++---- app/styles/contentscript.scss | 151 ++++++++++++++++++++++++++++------ 5 files changed, 280 insertions(+), 113 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 85fa708..7aa7071 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -27,6 +27,12 @@ "titleShowCalmText": { "message": "Show \"Calm\" next to the logo" }, + "titleIsNotificationHidden": { + "message": "Hide Notifications Badge" + }, + "titleIsMessageNotificationHidden": { + "message": "Hide Message Notifications Badge" + }, "titleIsFollowingNumberHidden": { "message": "Hide number of following" }, diff --git a/app/pages/popup.html b/app/pages/popup.html index 8a5b2e9..110842f 100644 --- a/app/pages/popup.html +++ b/app/pages/popup.html @@ -1,60 +1,66 @@ + + + __MSG_appName__ + + - - - __MSG_appName__ - - - - -

__MSG_appName__

- - - - -

__MSG_titleAdditionalSettings__

- - - - - - - - - - - \ No newline at end of file + +

__MSG_appName__

+ + + + +

__MSG_titleAdditionalSettings__

+ + + + + + + + + + + + diff --git a/app/scripts/contentscript.ts b/app/scripts/contentscript.ts index 4b84294..ce8042e 100644 --- a/app/scripts/contentscript.ts +++ b/app/scripts/contentscript.ts @@ -1,4 +1,18 @@ -toggleClass(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText", "isFollowingNumberHidden", "isFollowerNumberHidden", "isReactionNumberAlwaysHidden", "isReactionNumberDetailHidden", "isWhoToFollowHidden", "isTopicsToFollowHidden", "isFontChanged"]); +toggleClass([ + "isExploreHidden", + "isTrendsHidden", + "isReactionNumberHidden", + "showCalmText", + "isFollowingNumberHidden", + "isFollowerNumberHidden", + "isReactionNumberAlwaysHidden", + "isReactionNumberDetailHidden", + "isWhoToFollowHidden", + "isTopicsToFollowHidden", + "isNotificationHidden", + "isMessageNotificationHidden", + "isFontChanged", +]); addCalmTitle(); for (let i = 0; i < 2; i++) { setTimeout(changeCalmColor, (i + 1) * 100); @@ -6,8 +20,16 @@ for (let i = 0; i < 2; i++) { function toggleClass(keys: string[]) { chrome.storage.local.get(keys, function (data) { - keys.forEach(key => { - if (key === "isFollowingNumberHidden" || key === "isFollowerNumberHidden" || key === "isReactionNumberAlwaysHidden" || key === "isReactionNumberDetailHidden" || key === "isWhoToFollowHidden" || key === "isTopicsToFollowHidden" || key === "isFontChanged") { + keys.forEach((key) => { + if ( + key === "isFollowingNumberHidden" || + key === "isFollowerNumberHidden" || + key === "isReactionNumberAlwaysHidden" || + key === "isReactionNumberDetailHidden" || + key === "isWhoToFollowHidden" || + key === "isTopicsToFollowHidden" || + key === "isFontChanged" + ) { if (typeof data[key] === "undefined") { data[key] = false; } @@ -16,7 +38,7 @@ function toggleClass(keys: string[]) { data[key] = true; } } - let body = document.getElementsByTagName('body')[0]; + let body = document.getElementsByTagName("body")[0]; if (data[key]) { body.classList.add(key); } else { @@ -31,28 +53,36 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { sendResponse(); }); -chrome.runtime.sendMessage({ from: 'content', subject: 'showPageAction' }); +chrome.runtime.sendMessage({ from: "content", subject: "showPageAction" }); function addCalmTitle() { let calmText = chrome.i18n.getMessage("textCalm"); - let css = "body.showCalmText header[role=\"banner\"] h1[role=\"heading\"]::after { content:\"" + calmText + "\";}"; - let head = document.head || document.getElementsByTagName('head')[0]; - let style = document.createElement('style'); + let css = + 'body.showCalmText header[role="banner"] h1[role="heading"]::after { content:"' + + calmText + + '";}'; + let head = document.head || document.getElementsByTagName("head")[0]; + let style = document.createElement("style"); head.appendChild(style); - style.type = 'text/css'; + style.type = "text/css"; style.appendChild(document.createTextNode(css)); } function changeCalmColor() { - let body = document.body || document.getElementsByTagName('body')[0]; + let body = document.body || document.getElementsByTagName("body")[0]; if (body.style.backgroundColor !== null) { - const logo = (document.querySelector('header[role="banner"] h1[role="heading"] > a svg')); + const logo = ( + document.querySelector('header[role="banner"] h1[role="heading"] > a svg') + ); if (logo !== null) { - let css = "body.showCalmText header[role=\"banner\"] h1[role=\"heading\"]::after { color: " + window.getComputedStyle(logo).color + ";}"; - let head = document.head || document.getElementsByTagName('head')[0]; - let style = document.createElement('style'); + let css = + 'body.showCalmText header[role="banner"] h1[role="heading"]::after { color: ' + + window.getComputedStyle(logo).color + + ";}"; + let head = document.head || document.getElementsByTagName("head")[0]; + let style = document.createElement("style"); head.appendChild(style); - style.type = 'text/css'; + style.type = "text/css"; style.appendChild(document.createTextNode(css)); } } diff --git a/app/scripts/popup.ts b/app/scripts/popup.ts index 995e082..48b4f9f 100644 --- a/app/scripts/popup.ts +++ b/app/scripts/popup.ts @@ -1,8 +1,22 @@ localize(); -initValues(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText", "isFollowingNumberHidden", "isFollowerNumberHidden", "isReactionNumberAlwaysHidden", "isReactionNumberDetailHidden", "isWhoToFollowHidden", "isTopicsToFollowHidden", "isFontChanged"]); +initValues([ + "isExploreHidden", + "isTrendsHidden", + "isReactionNumberHidden", + "showCalmText", + "isFollowingNumberHidden", + "isFollowerNumberHidden", + "isReactionNumberAlwaysHidden", + "isReactionNumberDetailHidden", + "isWhoToFollowHidden", + "isTopicsToFollowHidden", + "isNotificationHidden", + "isMessageNotificationHidden", + "isFontChanged", +]); function localize() { - var objects = document.getElementsByTagName('html'); + var objects = document.getElementsByTagName("html"); for (var j = 0; j < objects.length; j++) { var obj = objects[j]; @@ -15,29 +29,43 @@ function localize() { obj.innerHTML = valNewH; } } - } function addClickEventListeners(keys: string[]) { - keys.forEach(key => { + keys.forEach((key) => { var input = document.getElementById(key); - input!.addEventListener('click', function (event) { - var checkbox = event.target as HTMLInputElement; - chrome.storage.local.set({ [key]: checkbox!.checked }, function () { }); + input!.addEventListener( + "click", + function (event) { + var checkbox = event.target as HTMLInputElement; + chrome.storage.local.set({ [key]: checkbox!.checked }, function () {}); - chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) { - let tabId = tabs[0].id; - chrome.tabs.sendMessage(tabId!, { key: key }, function () { }); - }); - }, false); + chrome.tabs.query( + { active: true, currentWindow: true }, + function (tabs) { + let tabId = tabs[0].id; + chrome.tabs.sendMessage(tabId!, { key: key }, function () {}); + } + ); + }, + false + ); }); } function toggleChecked(keys: string[]) { chrome.storage.local.get(keys, function (data) { - keys.forEach(key => { + keys.forEach((key) => { console.log(key + ": " + data[key]); - if (key === "isFollowingNumberHidden" || key === "isFollowerNumberHidden" || key === "isReactionNumberAlwaysHidden" || key === "isReactionNumberDetailHidden" || key === "isWhoToFollowHidden" || key === "isTopicsToFollowHidden" || key === "isFontChanged") { + if ( + key === "isFollowingNumberHidden" || + key === "isFollowerNumberHidden" || + key === "isReactionNumberAlwaysHidden" || + key === "isReactionNumberDetailHidden" || + key === "isWhoToFollowHidden" || + key === "isTopicsToFollowHidden" || + key === "isFontChanged" + ) { if (typeof data[key] === "undefined") { data[key] = false; } diff --git a/app/styles/contentscript.scss b/app/styles/contentscript.scss index 23b1161..58273f5 100644 --- a/app/styles/contentscript.scss +++ b/app/styles/contentscript.scss @@ -28,13 +28,21 @@ body { } &.isReactionNumberHidden { - div[data-testid="primaryColumn"] article:not(:hover) div[role="group"] div[role="button"] span { + div[data-testid="primaryColumn"] + article:not(:hover) + div[role="group"] + div[role="button"] + span { opacity: 0 !important; transition-property: transform, opacity !important; } &.isReactionNumberAlwaysHidden { - div[data-testid="primaryColumn"] article div[role="group"] div[role="button"] span { + div[data-testid="primaryColumn"] + article + div[role="group"] + div[role="button"] + span { opacity: 0 !important; transition-property: transform, opacity !important; } @@ -43,9 +51,12 @@ body { &.isReactionNumberDetailHidden { div[data-testid="primaryColumn"] article { - a[href$="/retweets"]:not(:hover) span[data-testid="app-text-transition-container"], - a[href$="/retweets/with_comments"]:not(:hover) span[data-testid="app-text-transition-container"], - a[href$="/likes"]:not(:hover) span[data-testid="app-text-transition-container"] { + a[href$="/retweets"]:not(:hover) + span[data-testid="app-text-transition-container"], + a[href$="/retweets/with_comments"]:not(:hover) + span[data-testid="app-text-transition-container"], + a[href$="/likes"]:not(:hover) + span[data-testid="app-text-transition-container"] { display: none; } } @@ -55,9 +66,12 @@ body { opacity: 0 !important; transition-property: transform, opacity !important; } - a[href$="/retweets"]:not(:hover) span[data-testid="app-text-transition-container"], - a[href$="/retweets/with_comments"]:not(:hover) span[data-testid="app-text-transition-container"], - a[href$="/likes"]:not(:hover) span[data-testid="app-text-transition-container"] { + a[href$="/retweets"]:not(:hover) + span[data-testid="app-text-transition-container"], + a[href$="/retweets/with_comments"]:not(:hover) + span[data-testid="app-text-transition-container"], + a[href$="/likes"]:not(:hover) + span[data-testid="app-text-transition-container"] { display: none; } } @@ -65,7 +79,8 @@ body { &.isReactionNumberAlwaysHidden { div[data-testid="primaryColumn"] article { a[href$="/retweets"] span[data-testid="app-text-transition-container"], - a[href$="/retweets/with_comments"] span[data-testid="app-text-transition-container"], + a[href$="/retweets/with_comments"] + span[data-testid="app-text-transition-container"], a[href$="/likes"] span[data-testid="app-text-transition-container"] { display: none; } @@ -77,7 +92,8 @@ body { transition-property: transform, opacity !important; } a[href$="/retweets"] span[data-testid="app-text-transition-container"], - a[href$="/retweets/with_comments"] span[data-testid="app-text-transition-container"], + a[href$="/retweets/with_comments"] + span[data-testid="app-text-transition-container"], a[href$="/likes"] span[data-testid="app-text-transition-container"] { display: none; } @@ -114,17 +130,45 @@ body { div.r-u8s1d div.r-1upvrn0, div.r-u8s1d div.r-xnswec, div.r-u8s1d div.r-qo02w8 { - div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:first-child > a > span:first-child { + div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:first-child + > a + > span:first-child { display: none !important; } } div[data-testid="primaryColumn"] > div > div > div > div > div { - & div.css-1dbjc4n.r-dr54s0 > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:first-child > a > span:first-child, - & div.css-1dbjc4n.r-1cad53l > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:first-child > a > span:first-child, - & div.css-1dbjc4n.r-ku1wi2 > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:first-child > a > span:first-child, - & div.css-1dbjc4n.r-1ifxtd0 > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:first-child > a > span:first-child, - & div.css-1dbjc4n.r-le4sbl > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:first-child > a > span:first-child { + & + div.css-1dbjc4n.r-dr54s0 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:first-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-1cad53l + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:first-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-ku1wi2 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:first-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-1ifxtd0 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:first-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-le4sbl + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:first-child + > a + > span:first-child { display: none !important; } } @@ -134,24 +178,58 @@ body { div.r-u8s1d div.r-1upvrn0, div.r-u8s1d div.r-xnswec, div.r-u8s1d div.r-qo02w8 { - div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span:first-child { + div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span:first-child { display: none !important; } } div[data-testid="primaryColumn"] > div > div > div > div > div { - & div.css-1dbjc4n.r-dr54s0 > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span:first-child, - & div.css-1dbjc4n.r-1cad53l > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span:first-child, - & div.css-1dbjc4n.r-ku1wi2 > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span:first-child, - & div.css-1dbjc4n.r-1ifxtd0 > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span:first-child, - & div.css-1dbjc4n.r-le4sbl > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span:first-child { + & + div.css-1dbjc4n.r-dr54s0 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-1cad53l + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-ku1wi2 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-1ifxtd0 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span:first-child, + & + div.css-1dbjc4n.r-le4sbl + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span:first-child { display: none !important; } } } &.isWhoToFollowHidden { - div[data-testid="primaryColumn"] > div > div:nth-child(2) > div > div > section:nth-child(3) > div { + div[data-testid="primaryColumn"] + > div + > div:nth-child(2) + > div + > div + > section:nth-child(3) + > div { div.css-1dbjc4n[data-testid="UserCell"], a[href*="/i/connect_people?user_id="] { display: none; @@ -160,23 +238,42 @@ body { } &.isTopicsToFollowHidden { - div[data-testid="primaryColumn"] > div > div:nth-child(2) > div > div > section:nth-child(3) > div { + div[data-testid="primaryColumn"] + > div + > div:nth-child(2) + > div + > div + > section:nth-child(3) + > div { a[aria-labelledby*=" topic-name"], a[href*="/i/flow/topics_selector"], a[href*="/i/topics/picker/home"] { display: none; } - section[aria-labelledby^="accessible-list-"] > div[aria-label$="Carousel"] { + section[aria-labelledby^="accessible-list-"] + > div[aria-label$="Carousel"] { display: none; } } } + &.isNotificationHidden { + a[data-testid="AppTabBar_Notifications_Link"] div[aria-live="polite"] { + display: none !important; + } + } + + &.isMessageNotificationHidden { + a[data-testid="AppTabBar_DirectMessage_Link"] div[aria-live="polite"] { + display: none !important; + } + } + &.isFontChanged { .r-1tl8opc { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, - sans-serif; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif; } } }