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

@@ -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

compress.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+cd src/ && 7z a ../../hide-discord-sidebar.zip *

src/background.js

@@ -0,0 +1,94 @@
+// Alert scripts on Discord tabs and update extension icon 
+function updateDiscordTabs(state) {
+  console.log(state);
+  chrome.tabs.query({ url: "*://*.discord.com/*" }, function (tabs) {
+    tabs.forEach(function (tab) {
+      chrome.tabs.sendMessage(tab.id, state);
+
+      if (state.active) {
+        chrome.pageAction.setIcon({ tabId: tab.id, path: "icons/icon128-active.png" });
+      } else {
+        chrome.pageAction.setIcon({ tabId: tab.id, path: "icons/icon128-inactive.png" });
+      }
+    });
+  });
+}
+
+// Initialize extension status on client when requested
+chrome.runtime.onMessage.addListener(async function (request, sender, sendResponse) {
+  if (request.action === "initialize") {
+    let state = await getState(null);
+    updateDiscordTabs(state);
+  }
+  else if (request.action === "update") {
+    chrome.storage.local.set(request.state);
+    updateDiscordTabs(request.state);
+    sendResponse({ success: true });
+  }
+  else if (request.action === "silent-update") {
+    chrome.storage.local.set(request.state);
+    sendResponse({ success: true });
+  }
+  return true;
+});
+
+// Promisefy Chrome functions
+function getState(query) {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get(query, function (result) {
+      resolve(result);
+    });
+  });
+}
+
+function setState(data) {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.set(data, function () {
+      resolve(data);
+    });
+  });
+}
+
+// Initialize extension on install
+chrome.runtime.onInstalled.addListener(async function (details) {
+  // Initialize default state
+  let state = await getState({
+    active: true,
+    showServers: true,
+    servers: "server-autohide",
+    channels: "channel-hide",
+    smallWindowWidth: 750
+  });
+  await setState(state);
+  console.table(state);
+
+  if (details.reason == "install") {
+    console.log("[Hide Discord Sidebar] First install");
+    // Refresh Discord pages on first install
+    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 action 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'] }
+      }),
+    ],
+    actions: [
+      new chrome.declarativeContent.ShowPageAction()
+    ],
+  }], data => {
+    // addRules callback
+  });
+});

hide-discord-sidebar.css → src/hide-discord-sidebar.css

@@ -31,24 +31,24 @@ body.hide-dis-bar #hds-btn {
   width: 90px;
 }
 
-body.hide-dis-bar .sidebar-2K8pFh {
+body.hide-dis-bar.channel-hide .sidebar-2K8pFh {
   transition: all 0.1s ease 0.1s;
   width: 0 !important;
   padding-left: 3.5vmin !important;
 }
-body.hide-dis-bar .sidebar-2K8pFh:hover {
+body.hide-dis-bar.channel-hide .sidebar-2K8pFh:hover {
   width: 240px !important;
   padding-left: 0 !important;
 }
 
-body.hide-dis-bar .sidebar-2K8pFh > * {
+body.hide-dis-bar.channel-hide .sidebar-2K8pFh > * {
   visibility: hidden;
   opacity: 0;
   transition: visibility 0s 0.2s, opacity 0.2s linear;
   /* display: none; */
 }
 
-body.hide-dis-bar .sidebar-2K8pFh:hover > * {
+body.hide-dis-bar.channel-hide .sidebar-2K8pFh:hover > * {
   visibility: visible;
   opacity: 1;
   transition: opacity 0.2s linear;