Quality improvements

src/detectPageChange.js

@@ -1,28 +1,28 @@
 chrome.runtime.onInstalled.addListener(details => {
-  if(details.reason === chrome.runtime.OnInstalledReason.INSTALL) {
-    chrome.storage.sync.set({ "show-scrollbar": false });
-  }
+	if(details.reason !== chrome.runtime.OnInstalledReason.INSTALL)return;
+	chrome.storage.sync.set({
+		"show-scrollbar": false,
+		"show-comments": true,
+		"swap-watch-next": false,
+	});
 });
 chrome.webNavigation.onCommitted.addListener(loadScriptAndCss, {
-    url: [{
-        urlPrefix: 'https://www.youtube.com/watch'
-    }]
+	url: [{
+		urlPrefix: "https://www.youtube.com/watch"
+	}]
 });
 chrome.webNavigation.onHistoryStateUpdated.addListener(loadScriptAndCss, {
-    url: [{
-        urlPrefix: 'https://www.youtube.com/watch'
-    }]
+	url: [{
+		urlPrefix: "https://www.youtube.com/watch"
+	}]
 });
 
 function loadScriptAndCss(tab) {
-    chrome.scripting.executeScript({target: {tabId: tab.tabId}, files: ["showYoutubeComments.js"]});
-    chrome.scripting.insertCSS({target: {tabId: tab.tabId}, files: ["showYoutubeComments.css"]});
-    chrome.storage.sync.get(['show-scrollbar'], value => {
-        if (value['show-scrollbar'] == true) {
-            chrome.scripting.insertCSS({target: {tabId: tab.tabId}, files: ["showYoutubeComments-scrollbar.css"]});
-        }
-        else {
-            chrome.scripting.removeCSS({target: {tabId: tab.tabId}, files: ["showYoutubeComments-scrollbar.css"]});
-        }
-    })
+	chrome.scripting.executeScript({target: {tabId: tab.tabId}, files: ["showYoutubeComments.js"]});
+	chrome.scripting.insertCSS({target: {tabId: tab.tabId}, files: ["showYoutubeComments.css"]});
+	chrome.storage.sync.get(["show-scrollbar"], value => {
+		if (value["show-scrollbar"] == true)
+			chrome.scripting.insertCSS({target: {tabId: tab.tabId}, files: ["showYoutubeComments-scrollbar.css"]});
+		else chrome.scripting.removeCSS({target: {tabId: tab.tabId}, files: ["showYoutubeComments-scrollbar.css"]});
+	});
 }

src/manifest.json

@@ -1,31 +1,27 @@
 {
-    "name": "Show YouTube comments while watching",
-    "version": "1.0.3",
-    "description": "Show YouTube comments on the right of the video. Read comments while you watch!",
-    "manifest_version": 3,
-    "content_scripts": [{
-        "matches": ["https://www.youtube.com/watch*"],
-        "js": ["showYoutubeComments.js"],
-        "css": ["showYoutubeComments.css"]
-    }],
-    "host_permissions": [
-        "https://www.youtube.com/watch*"
-    ],
-    "permissions": [
-        "scripting",
-        "webNavigation",
-        "storage"
-    ],
-    "background": {
-        "service_worker": "detectPageChange.js"
-    },
-    "action": {
-        "default_popup": "popup.html",
-        "default_icons": {
-            "128": "128.png"
-        }
-    },
-    "icons": {
-        "128": "128.png"
-    }
-}
+   "action": {
+      "default_icons": {
+         "128": "128.png"
+      },
+      "default_popup": "popup.html"
+   },
+   "background": {
+      "service_worker": "detectPageChange.js"
+   },
+   "content_scripts": [ {
+      "css": [ "showYoutubeComments.css" ],
+      "js": [ "showYoutubeComments.js" ],
+      "matches": [ "https://www.youtube.com/watch*" ]
+   } ],
+   "description": "Show YouTube comments on the right of the video. Read comments while you watch!",
+   "host_permissions": [ "https://www.youtube.com/watch*" ],
+   "icons": {
+      "128": "128.png"
+   },
+   "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAvVKr9w+fOFRs23uXXKBNuc8j/2bDS3W2mE4b6KUr5f3jzjY2rq2rthF/LRhcDlGUExIKMyV490DClaO3fyPSW662wt98vb4lfGEO74zT6StQ1e6tIBznsm4zXdZnHCpXm6Goy23JUERyse1jNz6ywX+1XPo5ifaqeDQRCg1UjN7r/YS03kka02amhgB1dN2NSUJK91LBJM2VAxbgqBu8ulQHa34axaV04/O7e9vvLi71dZlm6rK+oB17lZDxZ81K098/IcdXaBeI+x8dZ1gGy10EHHaUWvgENFx1uM2VTqrzoAmeqME3hmvXSZ2tSXcBHuVGT28ygI/YXQdI15/kOwIDAQAB",
+   "manifest_version": 3,
+   "name": "Show YouTube comments while watching",
+   "permissions": [ "scripting", "webNavigation", "storage" ],
+   "update_url": "https://clients2.google.com/service/update2/crx",
+   "version": "1.0.5"
+}

src/popup.html

@@ -1,30 +1,39 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <title>Options</title>
-    </head>
-    <style type="text/css">
-        body {
-            margin: 5px;
-            width: 180px;
-        }
-        #scroll-option-container {
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-        }
-        #scroll-option-container > label {
-            font-size: 1.1em;
-        }
-        #scroll-option-container > * {
-            cursor: pointer;
-        }
-    </style>
-    <body>
-        <div id="scroll-option-container">
-            <input type="checkbox" id="show-scrollbar" name="scollbar-ativated">
-            <label for="show-scrollbar">Show comments scrollbar</label> 
-        </div>
-    </body>
-    <script src="popup.js"></script>
+	<head>
+		<title>Options</title>
+	</head>
+	<style type="text/css">
+		body {
+			margin: 5px;
+			width: 180px;
+		}
+		#option-container {
+			margin: 5px 0px;
+			display: flex;
+			align-items: center;
+			justify-content: start;
+		}
+		#option-container > label {
+			font-size: 1.1em;
+		}
+		#option-container > * {
+			cursor: pointer;
+		}
+	</style>
+	<body>
+		<div id="option-container">
+			<input type="checkbox" id="show-scrollbar" name="scollbar-activated">
+			<label for="show-scrollbar">Show comments scrollbar</label>
+		</div>
+		<div id="option-container">
+			<input type="checkbox" id="show-comments" name="comments-activated">
+			<label for="show-comments">Always show comments</label>
+		</div>
+		<div id="option-container">
+			<input type="checkbox" id="swap-watch-next" name="swap-activated">
+			<label for="swap-watch-next">Swap Watch Next</label>
+		</div>
+	</body>
+	<script src="popup.js" type="text/javascript"></script>
 </html>

src/popup.js

@@ -1,15 +1,19 @@
 document.addEventListener("DOMContentLoaded", () => {
-    chrome.storage.sync.get(['show-scrollbar'], value => {
-        showScrollbar = value['show-scrollbar'] || false
-        let scrollbarButton = document.getElementById("show-scrollbar")
-        scrollbarButton.checked = showScrollbar
-        scrollbarButton.addEventListener("click", () => {
-            showScrollbar = !showScrollbar
-            chrome.storage.sync.set({ "show-scrollbar": showScrollbar });
-            scrollbarButton.checked = showScrollbar
-            console.log(`local show-scrollbar: ${showScrollbar}`)
-            chrome.storage.sync.get(['show-scrollbar'], value => {console.log(`stored show-scrollbar: ${value['show-scrollbar']}`)})
-        })
-    })
-
+	chrome.storage.sync.get(["show-scrollbar", "show-comments", "swap-watch-next"], value => {
+		function setupOption (id, defaultValue)
+		{
+			let currentValue = value[id] ?? defaultValue;
+			const checkbox = document.querySelector(`#${id}`);
+			checkbox.checked = currentValue;
+			checkbox.addEventListener("click", () => {
+				currentValue = !currentValue;
+				chrome.storage.sync.set({ [id]: currentValue });
+				checkbox.checked = currentValue;
+			});
+		}
+
+		setupOption("show-scrollbar", false);
+		setupOption("show-comments", true);
+		setupOption("swap-watch-next", false);
+	});
 })

src/showYoutubeComments-scrollbar.css

@@ -1,19 +1,19 @@
-#secondary::-webkit-scrollbar {
-    width: 16px;
+#comments::-webkit-scrollbar {
+	width: 16px;
 }
 
-#secondary::-webkit-scrollbar-thumb {
-    height: 56px;
-    border-radius: 8px;
-    border: 4px solid transparent;
-    background-clip: content-box;
-    background-color: var(--yt-opalescence-dark-grey);
+#comments::-webkit-scrollbar-thumb {
+	height: 56px;
+	border-radius: 8px;
+	border: 4px solid transparent;
+	background-clip: content-box;
+	background-color: var(--yt-spec-text-secondary);
 }
 
-#secondary::-webkit-scrollbar-thumb:hover, #secondary::-webkit-scrollbar-thumb:active {
-    background-color: var(--yt-spec-icon-disabled);
+#comments::-webkit-scrollbar-thumb:hover, #comments::-webkit-scrollbar-thumb:active {
+	background-color: var(--yt-spec-icon-disabled);
 }
 
-#secondary::-webkit-scrollbar {
-    display: block;
+#comments::-webkit-scrollbar {
+	display: block;
 }

src/showYoutubeComments.css

@@ -1,10 +1,17 @@
-#secondary {
-    height: calc(100vh - 80px);
-    overflow: scroll;
-    overflow-x: hidden;
-    overscroll-behavior: contain;
+#comments {
+	max-height: calc(100vh - 80px);
+	overflow: scroll;
+	overflow-x: hidden;
+	overscroll-behavior: contain;
+	margin-bottom: var(--ytd-margin-6x);
 }
 
-#secondary::-webkit-scrollbar {
-    display: none;
+#comments::-webkit-scrollbar {
+	display: none;
+}
+
+#show-comments {
+	left: 50%;
+	transform: translate(-50%, 0px);
+	margin-bottom: var(--ytd-margin-6x);
 }

src/showYoutubeComments.js

@@ -1,39 +1,94 @@
-showCommentsOnTheRight();
+showCommentsOnTheRight(null, null, null, null);
 
-function showCommentsOnTheRight() {
-	if (!comments() || !watchNext()) {
-		window.setTimeout(showCommentsOnTheRight, 500);
+function showCommentsOnTheRight(comments, watchNext, leftPanel, rightPanel) {
+	if (!(comments ??= getComments()) || !(watchNext ??= getWatchNext()) ||
+		!(leftPanel ??= getLeftPanel()) || !(rightPanel ??= getRightPanel())) {
+		window.setTimeout(() => showCommentsOnTheRight(comments, watchNext, leftPanel, rightPanel), 100);
 		return;
 	}
-	swapCommentsAndWatchNext();
+	initiateChanges(comments, watchNext, leftPanel, rightPanel);
 }
 
-function swapCommentsAndWatchNext() {
-	if (!panelsContainNodes()) {
-		return;
-	}
-	let commentsNode = leftPanel().removeChild(comments());
-	let watchNextNode = rightPanel().removeChild(watchNext());
-	leftPanel().appendChild(watchNextNode);
-	rightPanel().appendChild(commentsNode);
+function initiateChanges(comments, watchNext, leftPanel, rightPanel) {
+	const commentsStyle = comments.style;
+
+	chrome.storage.sync.get(["show-comments", "swap-watch-next"], value => {
+		const showComments = value["show-comments"] == true, swapWatchNext = value["swap-watch-next"] == true;
+
+		// Move comments from left to right
+		if(leftPanel.contains(comments))
+		{
+			comments = swapWatchNext ? rightPanel.appendChild(leftPanel.removeChild(comments)) :
+										rightPanel.insertBefore(leftPanel.removeChild(comments), watchNext);
+
+		}
+
+		// If we want to swap the Watch Next section from right to left
+		if(swapWatchNext)
+		{
+			if(rightPanel.contains(watchNext))
+				watchNext = leftPanel.appendChild(rightPanel.removeChild(watchNext));
+		}
+		else if(leftPanel.contains(watchNext))
+			watchNext = rightPanel.appendChild(leftPanel.removeChild(watchNext));
+
+		// If we want to always show the comments
+		let showCommentsBtn = document.querySelector("#show-comments");
+		if(showComments)
+		{
+			// Make comments visible
+			comments.style.display = "";
+
+			// If the Show Comments button exists in the DOM, hide it
+			if(showCommentsBtn)showCommentsBtn.style.display = "none";
+		}
+		else
+		{
+			// Make comments hidden
+			commentsStyle.display = "none";
+
+			// If this is a live stream, there is no comment to show.
+			const liveBtn = document.querySelector(".ytp-live-badge");
+			if(liveBtn && window.getComputedStyle(liveBtn).display !== "none")return;
+
+			// Make sure Show Comments button is seen
+			if(showCommentsBtn)showCommentsBtn.style.display = "";
+			else
+			{
+				showCommentsBtn = document.createElement("button");
+				showCommentsBtn.id = "show-comments";
+				showCommentsBtn.className = "yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading ";
+				showCommentsBtn.innerHTML = "Show Comments";
+
+				showCommentsBtn.addEventListener("click", () =>
+				{
+					showCommentsBtn.style.display = "none";
+					commentsStyle.display = "";
+				});
+
+				if(swapWatchNext)rightPanel.appendChild(showCommentsBtn);
+				else rightPanel.insertBefore(showCommentsBtn, watchNext);
+			}
+		}
+	});
 }
 
-function comments() {
-	return document.getElementById('comments');
+function getComments() {
+	return document.querySelector("#comments");
 }
 
-function watchNext() {
-	return document.getElementById('related');
+function getWatchNext() {
+	return document.querySelector("#related");
 }
 
-function panelsContainNodes() {
-	return leftPanel().contains(comments()) && rightPanel().contains(watchNext());
+function getChat (rightPanel) {
+	return rightPanel.querySelector("#chat");
 }
 
-function rightPanel() {
-	return document.getElementById('secondary-inner');
+function getLeftPanel() {
+	return document.querySelector("#primary-inner > #below");
 }
 
-function leftPanel() {
-	return document.getElementById('primary-inner');
+function getRightPanel() {
+	return document.querySelector("#secondary-inner");
 }