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")
 		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,6 +3,11 @@ if(typeof browser === "undefined")

 const url = window.location.href;

+browser.storage.sync.get('gameEnabled').then((result) => {
+
+	const gameEnabled = result.gameEnabled !== undefined ? result.gameEnabled : true;
+	if(gameEnabled) {
+
 		var appID;
 		if(url.includes('/app/')) {
 			const appIDMatch = url.match(/\/app\/(\d+)/);
@ -36,6 +41,15 @@ if(appID) {
 			
 		}
 		
+	}
+	
+});
+
+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+)/);
@ -103,3 +117,7 @@ if(userID) {
 			}	
 			
 		}
+	
+	}
+	
+});