From 26e77f1846cfc4050fb21e7190d9abe382226273 Mon Sep 17 00:00:00 2001 From: Patrick Chong <20418855+patrickxchong@users.noreply.github.com> Date: Sun, 30 May 2021 20:22:09 +0800 Subject: [PATCH] v3.0: add extension popup menu to customise extension behaviour * Dropdown Menu when Extension Icon is clicked (resolves #4) * Enable/disable extension * Enable/disable autohiding servers * Enable/disable autohiding channels * Specify small window width that servers/channels will autohide * Donate/Support button * Remember whether servers list is hidden/shown in the Discord UI (resolves #5) * Only applies when server autohide is disabled --- README.md | 19 +- button-click-listener.js | 68 ----- compress.sh | 3 + hide-discord-sidebar.js | 113 --------- .../archive}/marquee.png | Bin .../archive}/screenshot1.png | Bin .../archive}/screenshot2.png | Bin .../archive}/screenshot3.png | Bin .../archive}/screenshot4.png | Bin .../archive}/small.png | Bin images/chrome-webstore.png | Bin 0 -> 9171 bytes images/hide-discord-sidebar-collapsed.png | Bin 0 -> 188985 bytes images/hide-discord-sidebar.png | Bin 0 -> 121058 bytes images/large.png | Bin 0 -> 88495 bytes images/marquee.png | Bin 0 -> 108809 bytes images/small.png | Bin 0 -> 32982 bytes manifest.json | 24 -- src/background.js | 94 +++++++ .../hide-discord-sidebar.css | 8 +- src/hide-discord-sidebar.js | 124 +++++++++ src/icons/hide-discord-sidebar.png | Bin 0 -> 20234 bytes {icons => src/icons}/icon128-active.png | Bin {icons => src/icons}/icon128-inactive.png | Bin src/manifest.json | 38 +++ src/popup/BuyMeACoffee_Yellow.png | Bin 0 -> 38036 bytes src/popup/alpine.min.js | 8 + src/popup/micromodal.css | 239 ++++++++++++++++++ src/popup/micromodal.min.js | 1 + src/popup/popup.css | 172 +++++++++++++ src/popup/popup.html | 165 ++++++++++++ src/popup/popup.js | 68 +++++ 31 files changed, 931 insertions(+), 213 deletions(-) delete mode 100644 button-click-listener.js create mode 100644 compress.sh delete mode 100644 hide-discord-sidebar.js rename {images_for_chrome_webstore => images/archive}/marquee.png (100%) rename {images_for_chrome_webstore => images/archive}/screenshot1.png (100%) rename {images_for_chrome_webstore => images/archive}/screenshot2.png (100%) rename {images_for_chrome_webstore => images/archive}/screenshot3.png (100%) rename {images_for_chrome_webstore => images/archive}/screenshot4.png (100%) rename {images_for_chrome_webstore => images/archive}/small.png (100%) create mode 100644 images/chrome-webstore.png create mode 100644 images/hide-discord-sidebar-collapsed.png create mode 100644 images/hide-discord-sidebar.png create mode 100644 images/large.png create mode 100644 images/marquee.png create mode 100644 images/small.png delete mode 100644 manifest.json create mode 100644 src/background.js rename hide-discord-sidebar.css => src/hide-discord-sidebar.css (82%) create mode 100644 src/hide-discord-sidebar.js create mode 100644 src/icons/hide-discord-sidebar.png rename {icons => src/icons}/icon128-active.png (100%) rename {icons => src/icons}/icon128-inactive.png (100%) create mode 100644 src/manifest.json create mode 100644 src/popup/BuyMeACoffee_Yellow.png create mode 100644 src/popup/alpine.min.js create mode 100644 src/popup/micromodal.css create mode 100644 src/popup/micromodal.min.js create mode 100644 src/popup/popup.css create mode 100644 src/popup/popup.html create mode 100644 src/popup/popup.js diff --git a/README.md b/README.md index 941889d..7ac7397 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,24 @@ # Hide Discord Sidebar -Hide Discord Sidebar is a Chrome extension for Discord users who find the Discord sidebar too huge and wish to minimize/hide it when they are not using it. This extension minimizes the channels list into a small left sidebar when it is not in use as well as installs a button on the top right corner that hides/shows the Discord server list. +Chrome extension to hide Discord servers and channels -IMPORTANT: This extension is only meant to work on Discord in Chromium based browsers. Tested and working on Windows, Mac and Linux versions of Brave Browser and Chrome. +[![Chrome Web Store](https://img.shields.io/chrome-web-store/users/kaaohmdnmbdagpnenakakpkinddjmenp)](https://chrome.google.com/webstore/detail/hide-discord-sidebar/kaaohmdnmbdagpnenakakpkinddjmenp) +[![Chrome Webstore Rating](https://img.shields.io/chrome-web-store/rating/kaaohmdnmbdagpnenakakpkinddjmenp)](https://chrome.google.com/webstore/detail/hide-discord-sidebar/kaaohmdnmbdagpnenakakpkinddjmenp) +[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](https://www.gnu.org/licenses/gpl-3.0) +![GitHub stars](https://img.shields.io/github/stars/patrickxchong/hide-discord-sidebar.svg?style=social&label=Star) +![GitHub watchers](https://img.shields.io/github/watchers/patrickxchong/hide-discord-sidebar.svg?style=social&label=Watch) -[![Image of Chrome Store Badge](https://developer.chrome.com/webstore/images/ChromeWebStore_Badge_v2_340x96.png)](https://chrome.google.com/webstore/detail/hide-discord-sidebar/kaaohmdnmbdagpnenakakpkinddjmenp?hl=en) +![Image of Hide Discord Sidebar](./images/hide-discord-sidebar.png) -## Buy me a coffee (or bubble tea) +Hide Discord Sidebar is a Chrome extension that minimizes the channels list into a small left sidebar when it is not in use and installs a button on the top right corner to hide/show the Discord server list. Users are able to customise the extension with the popup that shows when the extension button is clicked. + +IMPORTANT: This extension is only meant to work on Discord in Chromium based browsers. Tested and working on Windows, Mac and Linux versions of Brave Browser and Chrome. + +[![Image of Chrome Store Badge](./images/chrome-webstore.png)](https://chrome.google.com/webstore/detail/hide-discord-sidebar/kaaohmdnmbdagpnenakakpkinddjmenp?hl=en) + +## Support this project [![ko-fi](https://www.ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/patrickxchong) ## Copying + This project is licensed under the GNU General Public License v3.0 or later - see the [COPYING](COPYING) file for details diff --git a/button-click-listener.js b/button-click-listener.js deleted file mode 100644 index 6fe3e8e..0000000 --- a/button-click-listener.js +++ /dev/null @@ -1,68 +0,0 @@ -// Update extension icon and also inform opened Discord tabs about active status change -function updateDiscordTabs(result) { - chrome.tabs.query({ url: "*://*.discord.com/*" }, function (tabs) { - tabs.forEach(function (tab) { - if (result.active) { - chrome.pageAction.setIcon({ tabId: tab.id, path: "icons/icon128-active.png" }); - } else { - chrome.pageAction.setIcon({ tabId: tab.id, path: "icons/icon128-inactive.png" }); - } - chrome.tabs.sendMessage(tab.id, { active: result.active }); - }); - }); -} - -// Enable/disable extension when extension button is clicked -chrome.pageAction.onClicked.addListener(function (tab) { - chrome.storage.local.get({ "active": true }, function (result) { - // toggle active status - result.active = !result.active; - chrome.storage.local.set({ active: result.active }); - updateDiscordTabs(result); - }); -}); - -// Initialize extension status on client when requested -chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { - if (request.action == "initialize") { - chrome.storage.local.get({ "active": true }, function (result) { - updateDiscordTabs(result); - }); - return true; - } -}); - -// Initialize extension on install -chrome.runtime.onInstalled.addListener(function (details) { - if (details.reason == "install") { - console.log("[Hide Discord Sidebar] First install"); - // Set default active state and refresh Discord pages on first install - chrome.storage.local.set({ active: true }); - chrome.tabs.query({ url: "*://*.discord.com/*" }, function (tabs) { - tabs.forEach(function (tab) { - chrome.tabs.reload(tab.id); - }); - }); - } else if (details.reason == "update") { - const thisVersion = chrome.runtime.getManifest().version; - console.log("[Hide Discord Sidebar] Updated from " + details.previousVersion + " to " + thisVersion + "!"); - } -}); - -// Enable PageAction only on discord.com pages (causes extension icon have "disabled" look on other pages) -// The removeRules operation is performed because the rule will be added repeatedly every time the extension is refreshed. -chrome.declarativeContent.onPageChanged.removeRules(undefined, data => { - chrome.declarativeContent.onPageChanged.addRules([{ - conditions: [ - new chrome.declarativeContent.PageStateMatcher({ - pageUrl: { hostEquals: 'discord.com', schemes: ['https'] }, - css: [".sidebar-2K8pFh"] - }), - ], - actions: [ - new chrome.declarativeContent.ShowPageAction() - ], - }], data => { - // addRules callback - }); -}); \ No newline at end of file diff --git a/compress.sh b/compress.sh new file mode 100644 index 0000000..fcab732 --- /dev/null +++ b/compress.sh @@ -0,0 +1,3 @@ +#!/bin/bash + +cd src/ && 7z a ../../hide-discord-sidebar.zip * \ No newline at end of file diff --git a/hide-discord-sidebar.js b/hide-discord-sidebar.js deleted file mode 100644 index 29175f7..0000000 --- a/hide-discord-sidebar.js +++ /dev/null @@ -1,113 +0,0 @@ -function hideDiscordSidebar() { - /* SERVERS */ - - // Select the server list element, which changes in some updates. - const guildsWrapper = document.getElementsByClassName('guildsWrapper-5TJh6A')[0] - || document.getElementsByClassName('wrapper-1Rf91z')[0] - || document.getElementsByClassName('wrapper-3NnKdC')[0] - // Experimenting with document.querySelector("nav[class*=wrapper-]") - // as a general fallback to select the server list. - || document.querySelector("nav[class*=wrapper-]"); - - // const app = document.getElementsByClassName('base-3dtUhz')[0]; - - const btn = document.createElement("BUTTON"); - const t = document.createTextNode("Hide Servers"); - btn.appendChild(t); - btn.id = "hds-btn"; - - btn.onclick = function () { - if (guildsWrapper.style.display === 'none') { - showServers(); - } else { - hideServers(); - } - }; - document.body.appendChild(btn); - - const popup = document.createElement("div"); - popup.innerHTML = ` -
Hide Discord Sidebar is disabled. You can enable it by clicking on the extension icon.
- - `; - popup.id = "hds-popup"; - popup.onclick = function () { - togglePopup(false); - }; - document.body.appendChild(popup); - - window.onresize = function () { - // only if extension is active - if (document.body.classList.contains("hide-dis-bar")) { - if (window.innerWidth < 700) { - hideServers(); - } else { - showServers(); - } - } - }; - - // initialize extension in page (response handled by onMessage handler below) - chrome.runtime.sendMessage({ action: "initialize" }); - - chrome.runtime.onMessage.addListener(function (request) { - if (request.active) { - togglePopup(false); - document.body.classList.add("hide-dis-bar"); - // hide servers by default when screen width is small - if (window.innerWidth < 700) { - hideServers(); - } - } else { - document.body.classList.remove("hide-dis-bar"); - togglePopup(true); - showServers(); // force show servers list (if it's hidden) when extension is disabled - } - }); - - function hideServers() { - guildsWrapper.style.display = 'none'; - // app.style.left = 0; - btn.innerHTML = "Show Servers"; - } - - function showServers() { - guildsWrapper.style.display = 'flex'; - // app.style.left = "72px"; - btn.innerHTML = "Hide Servers"; - } - - function togglePopup(active) { - if (active) { - popup.style.display = "flex"; - } else { - popup.style.display = "none"; - } - } - - const styles = [ - 'background: linear-gradient(#D33106, #571402)' - , 'border: 1px solid #3E0E02' - , 'color: white' - , 'display: block' - , 'text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3)' - , 'background-image: linear-gradient(180deg, #667eea 0%, #764ba2 100%)', - , 'line-height: 40px' - , 'text-align: center' - , 'font-weight: bold' - , 'font-size: 18px' - ].join(';'); - - console.log('%c Hide Discord Sidebar extension activated ', styles); -} - -// document.addEventListener('DOMContentLoaded', hideDiscordSidebar, false); -// alternative to DOMContentLoaded -document.onreadystatechange = function () { - if (document.readyState === "complete") { - // Check that the Discord page contains the base chat element - if (document.getElementsByClassName('base-3dtUhz')[0]) { - hideDiscordSidebar(); - } - } -}; \ No newline at end of file diff --git a/images_for_chrome_webstore/marquee.png b/images/archive/marquee.png similarity index 100% rename from images_for_chrome_webstore/marquee.png rename to images/archive/marquee.png diff --git a/images_for_chrome_webstore/screenshot1.png b/images/archive/screenshot1.png similarity index 100% rename from images_for_chrome_webstore/screenshot1.png rename to images/archive/screenshot1.png diff --git a/images_for_chrome_webstore/screenshot2.png b/images/archive/screenshot2.png similarity index 100% rename from images_for_chrome_webstore/screenshot2.png rename to images/archive/screenshot2.png diff --git a/images_for_chrome_webstore/screenshot3.png b/images/archive/screenshot3.png similarity index 100% rename from images_for_chrome_webstore/screenshot3.png rename to images/archive/screenshot3.png diff --git a/images_for_chrome_webstore/screenshot4.png b/images/archive/screenshot4.png similarity index 100% rename from images_for_chrome_webstore/screenshot4.png rename to images/archive/screenshot4.png diff --git a/images_for_chrome_webstore/small.png b/images/archive/small.png similarity index 100% rename from images_for_chrome_webstore/small.png rename to images/archive/small.png diff --git a/images/chrome-webstore.png b/images/chrome-webstore.png new file mode 100644 index 0000000000000000000000000000000000000000..224c12bfdf3a3efe2121657d5f2a8e8ce968e02f GIT binary patch literal 9171 zcmc&)^;cBi+XX~Ylt#Kix_cNz1SF(8C8S}90cJ==dZa|Uk?zhRq;u%*E{UO=m(TZ~ zc+U^#+;OKts}gyBh-27LhrF mt<9(l`%^#Gh*2v=O
zIVx~R#=?Wae#{#xi%qpc5Igtv@W*s`_FzfgZN1gjT=Y^Y0G|
z!^FCRnQpD3$_b}tPxy}ub=ch09!Ue`H%VM-BwFb2n3{cc8R`Bu4qRjdIZKtG#@nug
zQtjx&@{7XA$ZPxcvhnFtrjhB);iwQ+B|>~+7{G$=D$THCJf)zf4ni(urt@)SrKeB$
z%3I=mJ-e?2FYV!dV?+}DbJ}oY*Tgaeag`=*w8Q?&D=chmDPh5gzTkI35%x(8Mf*dg
z$rB8~O*R%u?y^C#wL%Hgpy$K~7-%I;iulwG6fyc*N}Qh~hgKoeF(flHj WC
zqa?Yx0X>7=@cNsF)4R{j%_Y+Uwice
z?(9DDdpQ}t*lNJOc4cUbjde6LK=rTpKuKf%ZrMnf5n?%&kyFS>A`}J6D#&qV$UB&6
zp+Uz;>DA{Gu|-qK1_cE{`1$vEVSOQGOQgb0OLZU$L$kDQ^V-~>(PoqaGSe}5c}!UW
z$pmGEb{p{;=;>kQ;Wf2@jPPNJ5)rj1QAvu>}I5~a1G1&31W0i4>~kpfK(mq+oFII
z5a2F~W*Wys|0BbQjN*$#0hfAh4Sl@GG~N}0`?UZJCNWp9faAL(X>7GY06k2^-4mNm
z)YB>umh3}`BKX_t!)z!gj8O)wc~c|*?v0d0#PEg@YpLeI*tPil>V@zR4T6lem!Bp{
z^&Y>sZ&Icxfdz+hT6MqLnr~C|-wne^$K|d1?WgybE6FNms*(G2`@H=)uyy$?PQ1^%
z9f`>j9G%gM74smMM;ztm;o9Bab`(Sf@OQs_ZSAdDJVH0#)R)kb?xcMW#wa~NGiR3r
zU~o1srK2UM`(p{>6TBOwZ1^x7D-iLWs=dpo5hIT@P6@3U!MY_(h9K~rjubn}HD{A#
zbXH
BNpr*5P^>k@HL
zLpas+pr4&@j4xj{Vu8mi)IP3Ty*l}jY_7NSFE0fBCmE{WhD(3@UtMvoq-XWCefIU+
zpfH9QKA2