Added user preference toggles.

Version bump for new functionality.
2024-08-10 16:03:15 -07:00 · 2024-08-10 16:03:15 -07:00 · 7ad3da0cd6
parent adbbfb0de1
commit 7ad3da0cd6
5 changed files with 200 additions and 97 deletions
--- a/manifest.json
+++ b/manifest.json
@ -1,8 +1,8 @@
 {
 	"manifest_version": 3,
 	"name": "SGDB Button on Steam",
-	"version": "1.0.4",
-	"description": "Adds a button on Steam game pages to bring you to its SteamGridDB entry.",
+	"version": "1.0.5",
+	"description": "Adds a button on Steam games that brings you to their SteamGridDB entry.",
 	"icons": {
 		"16": "icons/icon_16.png",
 		"32": "icons/icon_32.png",
--- a/popup.html
+++ b/popup.html
@ -9,6 +9,7 @@
 			body {
 				min-width: 350px;
 				max-width: 100%;
+				font-size: 16px;
 				text-align: center;
 				font-family: "Open Sans", sans-serif;
 				background-color: #32414c;
@ -42,22 +43,82 @@
 				width: 22px;
 				height: 22px;
 			}
+			.checkbox {
+				display: inline-flex;
+				align-items: center;
+				cursor: pointer;
+			}
+			.checkbox > input[type="checkbox"] {
+				width: 0;
+				height: 0;
+				opacity: 0;
+				padding: 0;
+				margin: 0;
+				-webkit-appearance: none;
+				-moz-appearance: none;
+				appearance: none;
+			}
+			.checkbox > .fakebox {
+				width: 2em;
+				height: 1em;
+				border: 0;
+				border-radius: 1em;
+				background: rgba(0,0,0,.45);
+				display: inline-block;
+				position: relative;
+				margin-right: .5em;
+				transition: background 200ms ease;
+			}
+			.checkbox > input[type="checkbox"]:checked + .fakebox {
+				background: rgba(95, 180, 240, .5);
+			}
+			.checkbox > .fakebox::before {
+				content: "";
+				display: block;
+				position: absolute;
+				width: 1em;
+				height: 1em;
+				border-radius: 100%;
+				background: #5fb4f0;
+				transform: translateX(0);
+				transition: background 150ms ease,transform 150ms ease;
+			}
+			.checkbox > input[type="checkbox"]:checked + .fakebox::before {
+				transform: translateX(1em);
+			}
+			div {
+				text-align: center;
+				padding: 5px 0px;
+				margin-right: .25rem;
+			}
 		</style>
 		<script src="popup.js" defer></script>
 	</head>
 	<body>
-		<h2>
+		<h2 style="margin-bottom: 5px">
 			<img id="sgdb-icon" src="" style="vertical-align: middle; display: inline"> SGDB Button on Steam
 		</h2>
-		<a class="btn" href="https://www.steamgriddb.com/profile/76561198274324627">
-			<span data-tooltip-text="View my profile">
-				<img id="nes-icon" class="icon" src="">Created by <span style="color: #FC2A7C">Nes</span>
-			</span>
-		</a>
+		
+		<div>
+			<label class="checkbox">
+				<input type="checkbox" id="game"/><span class="fakebox"></span>Show on games
+			</label>
+		</div>
+		<div>
+			<label class="checkbox" style="margin-bottom: 10px">
+				<input type="checkbox" id="profile"/><span class="fakebox"></span>Show on profiles
+			</label>
+		</div>	
+		
 		<a class="btn" href="https://gitea.goblincave.synology.me/Nes/SGDB-Extension">
 			<span data-tooltip-text="View source">
 				<img id="gitea-icon" class="icon" src="">View Source
 			</span>
 		</a>
+		<a class="btn" href="https://www.steamgriddb.com/profile/76561198274324627">
+			<span data-tooltip-text="View my profile">
+				<img id="nes-icon" class="icon" src="">Created by <span style="color: #FC2A7C">Nes</span>
+			</span>
+		</a>
 	</body>
 </html>
--- a/popup.js
+++ b/popup.js
@ -1,10 +1,31 @@
-document.addEventListener("DOMContentLoaded", function() {
-	const headerIcon = document.querySelector("#sgdb-icon");
-	const nesIcon = document.querySelector("#nes-icon");
-	const giteaIcon = document.querySelector("#gitea-icon");
-	if(typeof browser === "undefined")
+if(typeof browser === "undefined")
 		var browser = chrome;
+
+document.addEventListener("DOMContentLoaded", function() {
+	
+	const headerIcon = document.querySelector("#sgdb-icon");
 	headerIcon.src = browser.runtime.getURL("icons/icon_32.png");
+	const nesIcon = document.querySelector("#nes-icon");
 	nesIcon.src = browser.runtime.getURL("icons/nes_32.png");
+	const giteaIcon = document.querySelector("#gitea-icon");
 	giteaIcon.src = browser.runtime.getURL("icons/gitea_32.png");
+	
+	const gameToggle = document.getElementById('game');
+	browser.storage.sync.get('gameEnabled').then((result) => {
+		gameToggle.checked = result.gameEnabled !== undefined ? result.gameEnabled : true;
+	});
+	gameToggle.addEventListener('change', () => {
+		const enabled = gameToggle.checked;
+		browser.storage.sync.set({ gameEnabled: enabled });
+	});
+	
+	const profileToggle = document.getElementById('profile');
+	browser.storage.sync.get('profileEnabled').then((result) => {
+		profileToggle.checked = result.profileEnabled !== undefined ? result.profileEnabled : false;
+	});
+	profileToggle.addEventListener('change', () => {
+		const enabled = profileToggle.checked;
+		browser.storage.sync.set({ profileEnabled: enabled });
+	});
+	
 });
--- a/readme.md
+++ b/readme.md
@ -17,6 +17,10 @@ I'm still awaiting verification to publish on the Edge Add-ons site, and I don't
 4. Enable "Developer mode"
 5. Press "Load unpacked" and select the folder where you unzipped the extension.

+## Preferences
+
+You can configure your preferences by clicking on the extension icon to show a popup menu.
+
 ## Other Recommended Extensions

 Some other great extensions for enhancing your Steam browsing experience:
@ -37,4 +41,3 @@ You can also add some custom SGDB buttons through Augmented Steam.
 	- URL: `steamgriddb.com/profile/[ID]`
 	- Icon: `i.imgur.com/NYQSplq.png`

-If you find that user profiles are too crowded, I would recommend disabling the "Show a link to view SteamIDs" setting under Community > Profile in Augmented Steam.
--- a/script.js
+++ b/script.js
@ -3,103 +3,121 @@ if(typeof browser === "undefined")

 const url = window.location.href;

-var appID;
-if(url.includes('/app/')) {
-	const appIDMatch = url.match(/\/app\/(\d+)/);
-	appID = appIDMatch[1];
-}
+browser.storage.sync.get('gameEnabled').then((result) => {

-if(appID) {
+	const gameEnabled = result.gameEnabled !== undefined ? result.gameEnabled : true;
+	if(gameEnabled) {

-	const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
-	if(buttonContainer) {
+		var appID;
+		if(url.includes('/app/')) {
+			const appIDMatch = url.match(/\/app\/(\d+)/);
+			appID = appIDMatch[1];
+		}

-		const sgdb_button = document.createElement('a');
-		sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
-		sgdb_button.className = "btnv6_blue_hoverfade btn_medium";
-		sgdb_button.style.marginRight = "3px";
-		sgdb_button.style.marginLeft = "3px";
+		if(appID) {
 			
-		const span = document.createElement('span');
-		span.setAttribute("data-tooltip-text", "View on SteamGridDB");
+			const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
+			if(buttonContainer) {
 		
-		const icon = document.createElement("img");
-		icon.className = "ico16";
-		icon.style.backgroundImage = "none";
-		icon.src = browser.runtime.getURL("icons/sgdb_16.png");
+				const sgdb_button = document.createElement('a');
+				sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
+				sgdb_button.className = "btnv6_blue_hoverfade btn_medium";
+				sgdb_button.style.marginRight = "3px";
+				sgdb_button.style.marginLeft = "3px";
 			
-		span.append(icon);
-		sgdb_button.append(span);
-		buttonContainer.prepend(sgdb_button);
+				const span = document.createElement('span');
+				span.setAttribute("data-tooltip-text", "View on SteamGridDB");
+			
+				const icon = document.createElement("img");
+				icon.className = "ico16";
+				icon.style.backgroundImage = "none";
+				icon.src = browser.runtime.getURL("icons/sgdb_16.png");
+				
+				span.append(icon);
+				sgdb_button.append(span);
+				buttonContainer.prepend(sgdb_button);
+				
+			}
+			
+		}
 		
 	}
 	
-}
+});

-var userID;
-if(url.includes('/profiles/')) {
-	const userIDMatch = url.match(/\/profiles\/(\d+)/);
-	if(userIDMatch) {
-		userID = userIDMatch[1];
-	}
-} else if(url.includes('/id/')) {
-	const div = document.getElementById('responsive_page_template_content');
-	if(div) {
-		const scriptElements = div.getElementsByTagName('script');
-		for(script of scriptElements) {
-			const content = script.textContent || script.innerText;
-			const userIDMatch = content.match(/"steamid":"(\d+)"/);
+browser.storage.sync.get('profileEnabled').then((result) => {
+    
+	const profileEnabled = result.profileEnabled !== undefined ? result.profileEnabled : false;
+	if(result.profileEnabled) {
+	
+		var userID;
+		if(url.includes('/profiles/')) {
+			const userIDMatch = url.match(/\/profiles\/(\d+)/);
 			if(userIDMatch) {
 				userID = userIDMatch[1];
-				break;
+			}
+		} else if(url.includes('/id/')) {
+			const div = document.getElementById('responsive_page_template_content');
+			if(div) {
+				const scriptElements = div.getElementsByTagName('script');
+				for(script of scriptElements) {
+					const content = script.textContent || script.innerText;
+					const userIDMatch = content.match(/"steamid":"(\d+)"/);
+					if(userIDMatch) {
+						userID = userIDMatch[1];
+						break;
+					}
+				}
 			}
 		}
-	}
-}
 		
-if(userID) {
+		if(userID) {			
 			
-	const headerActions = document.querySelector(".profile_header_actions");
-	if(headerActions) {
+			const headerActions = document.querySelector(".profile_header_actions");
+			if(headerActions) {
 				
-		const dropdown = document.getElementById("profile_action_dropdown");
-		if(dropdown) {
+				const dropdown = document.getElementById("profile_action_dropdown");
+				if(dropdown) {
 					
-			const popup_menu = dropdown.getElementsByClassName("popup_menu");
+					const popup_menu = dropdown.getElementsByClassName("popup_menu");
 					
-			const dropdown_button = document.createElement('a');
-			dropdown_button.href = `https://steamgriddb.com/profile/${userID}`;
-			dropdown_button.className = "popup_menu_item";
+					const dropdown_button = document.createElement('a');
+					dropdown_button.href = `https://steamgriddb.com/profile/${userID}`;
+					dropdown_button.className = "popup_menu_item";
 					
-			const icon = document.createElement("img");
-			icon.src = browser.runtime.getURL("icons/sgdb_16.png");
+					const icon = document.createElement("img");
+					icon.src = browser.runtime.getURL("icons/sgdb_16.png");
 					
-			dropdown_button.append(icon);
-			dropdown_button.append("\u00A0 SteamGridDB Profile");
-			popup_menu[0].append(dropdown_button);
+					dropdown_button.append(icon);
+					dropdown_button.append("\u00A0 SteamGridDB Profile");
+					popup_menu[0].append(dropdown_button);
 					
-		} else {
+				} else {
 					
-			const profile_button = document.createElement('a');
-			profile_button.href = `https://steamgriddb.com/profile/${userID}`;
-			profile_button.className = "btn_profile_action btn_medium";
-			profile_button.style.marginRight = "3px";
-			profile_button.style.marginLeft = "3px";
+					const profile_button = document.createElement('a');
+					profile_button.href = `https://steamgriddb.com/profile/${userID}`;
+					profile_button.className = "btn_profile_action btn_medium";
+					profile_button.style.marginRight = "3px";
+					profile_button.style.marginLeft = "3px";

-			const span = document.createElement('span');
-			span.setAttribute("data-tooltip-text", "View SteamGridDB profile");
+					const span = document.createElement('span');
+					span.setAttribute("data-tooltip-text", "View SteamGridDB profile");

-			const icon = document.createElement("img");
-			icon.className = "ico16";
-			icon.style.backgroundImage = "none";
-			icon.src = browser.runtime.getURL("icons/sgdb_16.png");
+					const icon = document.createElement("img");
+					icon.className = "ico16";
+					icon.style.backgroundImage = "none";
+					icon.src = browser.runtime.getURL("icons/sgdb_16.png");
 					
-			span.append(icon);
-			profile_button.append(span);
-			headerActions.append(profile_button);
+					span.append(icon);
+					profile_button.append(span);
+					headerActions.append(profile_button);
+					
+				}
+				
+			}	
 			
 		}
 	
 	}
 	
-}
+});