Skip to content

Commit

Permalink
v2.13: enable/disable extension by clicking on extension button
Browse files Browse the repository at this point in the history
  • Loading branch information
patrickxchong authored Dec 5, 2020
2 parents 7ed2363 + 3835337 commit 662d9d6
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 47 deletions.
68 changes: 68 additions & 0 deletions button-click-listener.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
// 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
});
});
61 changes: 48 additions & 13 deletions hide-discord-sidebar.css
Original file line number Diff line number Diff line change
@@ -1,22 +1,24 @@
.noticeInfo-3_iTE1,
/* .hide-dis-bar class on body indicates that extension is active */
body.hide-dis-bar .noticeInfo-3_iTE1,
.notice-2FJMB4 {
z-index: 1000;
}

.toolbar-1t6TWx {
body.hide-dis-bar .toolbar-1t6TWx {
padding-right: 100px;
}

/* .container-3gCOGc .flex-1xMQg5.flex-1O1GKY.horizontal-1ae9ci.horizontal-2EEEnY.flex-1O1GKY.directionRow-3v3tfG.justifyStart-2NDFzi.alignCenter-1dQNNs.noWrap-3jynv6 {
padding-right: 100px;
} */

.container-3gCOGc {
body.hide-dis-bar .container-3gCOGc {
z-index: 0;
}

#hideNshow {
/* background: rgba(32, 34, 37, 0.6); */
/* Hide button by default when extension is not active */
#hds-btn {
display: none;
}

body.hide-dis-bar #hds-btn {
display: block;
background: #4f5660;
color: white;
padding-top: 5px;
Expand All @@ -29,26 +31,59 @@
width: 90px;
}

html .sidebar-2K8pFh {
body.hide-dis-bar .sidebar-2K8pFh {
transition: all 0.1s ease 0.1s;
width: 0;
padding-left: 3.5vmin;
}
html .sidebar-2K8pFh:hover {
body.hide-dis-bar .sidebar-2K8pFh:hover {
width: 240px;
padding-left: 0;
}

.sidebar-2K8pFh > * {
body.hide-dis-bar .sidebar-2K8pFh > * {
visibility: hidden;
opacity: 0;
transition: visibility 0s 0.2s, opacity 0.2s linear;
/* display: none; */
}

.sidebar-2K8pFh:hover > * {
body.hide-dis-bar .sidebar-2K8pFh:hover > * {
visibility: visible;
opacity: 1;
transition: opacity 0.2s linear;
/* display: flex; */
}

#hds-popup {
display: none;
justify-content: space-between; /* applies when display: flex */
align-items: center;
background: #7289da;

position: absolute;
top: 10px;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 70%;
padding: 15px;

color: #fff;
cursor: pointer;
z-index: 100;
border-radius: 8px;
line-height: 1.15;
}

#hds-popup p {
margin: 0 !important;
}

#hds-popup svg {
width: 18px;
min-width: 18px;
height: 18px;
margin-left: 5px;
}
91 changes: 62 additions & 29 deletions hide-discord-sidebar.js
Original file line number Diff line number Diff line change
@@ -1,52 +1,84 @@
function discordHack() {

function hideDiscordSidebar() {
/* SERVERS */
var guildsWrapper = document.getElementsByClassName('guildsWrapper-5TJh6A')[0]
const guildsWrapper = document.getElementsByClassName('guildsWrapper-5TJh6A')[0]
|| document.getElementsByClassName('wrapper-1Rf91z')[0];
var app = document.getElementsByClassName('base-3dtUhz')[0];
const app = document.getElementsByClassName('base-3dtUhz')[0];

var btn = document.createElement("BUTTON");
var t = document.createTextNode("Hide Servers");
const btn = document.createElement("BUTTON");
const t = document.createTextNode("Hide Servers");
btn.appendChild(t);
btn.id = "hideNshow";
btn.id = "hds-btn";

btn.onclick = function() {
if (
guildsWrapper.style.display === 'none') {
btn.onclick = function () {
if (guildsWrapper.style.display === 'none') {
showServers();
} else {
hideServers();
}
}
document.body.appendChild(btn)
};
document.body.appendChild(btn);

const popup = document.createElement("div");
popup.innerHTML = `
<p><b style="font-weight: 600;">Hide Discord Sidebar</b> is disabled. You can enable it by clicking on the extension icon.</p>
<svg class="closeIcon-2eaC4U" aria-hidden="false" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M18.4 4L12 10.4L5.6 4L4 5.6L10.4 12L4 18.4L5.6 20L12 13.6L18.4 20L20 18.4L13.6 12L20 5.6L18.4 4Z"></path></svg>
`;
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();
}
}
};

if (window.innerWidth < 700) {
hideServers();
}
// initialize extension in page (response handled by onMessage handler below)
chrome.runtime.sendMessage({ action: "initialize" });

window.onresize = function() {
if (window.innerWidth < 700) {
hideServers();
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 {
showServers();
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"
btn.innerHTML = "Show Servers";
}

function showServers() {
guildsWrapper.style.display = 'flex';
app.style.left = "72px";
btn.innerHTML = "Hide Servers"
btn.innerHTML = "Hide Servers";
}

function togglePopup(active) {
if (active) {
popup.style.display = "flex";
} else {
popup.style.display = "none";
}
}

var styles = [
const styles = [
'background: linear-gradient(#D33106, #571402)'
, 'border: 1px solid #3E0E02'
, 'color: white'
Expand All @@ -60,14 +92,15 @@ function discordHack() {
].join(';');

console.log('%c Hide Discord Sidebar extension activated ', styles);
// }
}

// var hider = setInterval(discordHack, 2000);
// document.addEventListener('DOMContentLoaded', discordHack, false);
// document.addEventListener('DOMContentLoaded', hideDiscordSidebar, false);
// alternative to DOMContentLoaded
document.onreadystatechange = function() {
document.onreadystatechange = function () {
if (document.readyState === "complete") {
discordHack();
// Check that the Discord page contains the base chat element
if(document.getElementsByClassName('base-3dtUhz')[0]) {
hideDiscordSidebar();
}
}
}
};
File renamed without changes
Binary file added icons/icon128-inactive.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 9 additions & 5 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
{
"name": "Hide Discord Sidebar",
"short_name": "Hide Dis Bar",
"version": "2.12",
"version": "2.13",
"description": "Installs an unfolding sidebar for Discord channels and a button that hides/shows the Discord server list.",
"manifest_version": 2,
"permissions": ["*://*.discord.com/*"],
"permissions": ["*://*.discord.com/*", "storage", "declarativeContent"],
"background": {
"scripts": ["button-click-listener.js"],
"persistent": false
},
"content_scripts": [{
"matches": ["*://*.discord.com/*"],
"css": ["hide-discord-sidebar.css"],
"js": ["hide-discord-sidebar.js"],
"run_at": "document_end"
}],
"icons": {
"128": "icon128.png"
"128": "icons/icon128-active.png"
},
"browser_action": {
"default_icon": "icon128.png"
"page_action": {
"default_icon": "icons/icon128-inactive.png"
}
}

0 comments on commit 662d9d6

Please sign in to comment.