Added Edge add-on page link.

Added user preference toggles.
Version bump for new functionality.
2024-08-15 21:00:56 -07:00 · 2024-08-10 16:03:15 -07:00 · 2024-08-10 00:52:42 -07:00 · 2024-08-10 00:45:28 -07:00 · 2024-08-09 20:52:55 -07:00 · 2024-08-09 14:33:58 -07:00
5 changed files with 273 additions and 48 deletions
--- a/manifest.json
+++ b/manifest.json
@ -1,8 +1,8 @@
 {
 	"manifest_version": 3,
 	"name": "SGDB Button on Steam",
-	"version": "1.0.1",
-	"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",
@ -25,14 +25,19 @@
 	},
 	"content_scripts": [
 		{
-			"matches": [ "*://store.steampowered.com/app/*", "*://steamcommunity.com/app/*" ],
+			"matches": [ 
+				"*://store.steampowered.com/app/*", 
+				"*://steamcommunity.com/app/*", 
+				"*://steamcommunity.com/id/*", 
+				"*://steamcommunity.com/profiles/*" 
+			],
 			"js": [ "script.js" ]
 		}
 	],
 	"web_accessible_resources": [
 		{
-			"resources": [ "icons/sgdb_16.png", "icons/nes_32.png" ],
-			"matches": [ "*://store.steampowered.com/app/*", "*://steamcommunity.com/app/*" ]
+			"resources": [ "icons/sgdb_16.png" ],
+			"matches": [ "*://store.steampowered.com/*", "*://steamcommunity.com/*" ]
 		}
 	]
 }
--- a/popup.html
+++ b/popup.html
@ -7,6 +7,9 @@
 		<title>SGDB Button on Steam</title>
 		<style>
 			body {
+				min-width: 350px;
+				max-width: 100%;
+				font-size: 16px;
 				text-align: center;
 				font-family: "Open Sans", sans-serif;
 				background-color: #32414c;
@ -40,31 +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>
-			document.addEventListener("DOMContentLoaded", function() {
-				const headerIcon = document.querySelector("#sgdb-icon");
-				const nesIcon = document.querySelector("#nes-icon");
-				const giteaIcon = document.createElement("#gitea-icon");
-				headerIcon.src = browser.runtime.getURL("icons/icon_32.png");
-				nesIcon.src = browser.runtime.getURL("icons/nes_32.png");
-				giteaIcon.src = browser.runtime.getURL("icons/gitea_32.png");
-			});
-		</script>
+		<script src="popup.js" defer></script>
 	</head>
 	<body>
-		<h2>
-			<img id="header-icon" src="" style="vertical-align: middle; display: inline"> SGBD Button on Steam
+		<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
@ -0,0 +1,31 @@
+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
@ -0,0 +1,41 @@
+# SGDB Button on Steam
+
+A simple browser extension that adds a button on Steam pages that links to their SteamGridDB entry.
+
+## Installation
+
+You can download it for Firefox [here](https://addons.mozilla.org/en-US/firefox/addon/sgdb-button-on-steam/), or Edge [here](https://microsoftedge.microsoft.com/addons/detail/sgdb-button-on-steam/bmgdnoicjbecmmhpnbndjmgpojhlmmao).
+
+If you want to use it on Chrome, you will have to manually install it instead, because I don't want to pay to publish it on the Chrome Web Store.
+
+### Manual Install
+1. Start by downloading the latest release from [here](https://gitea.goblincave.synology.me/Nes/SGDB-Extension/releases).
+2. Unpack the ZIP archive in a location of your choosing.
+3. Go to `chrome://extensions` in Chrome, or `edge://extensions` in Edge
+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:
+- [Augmented Steam](https://augmentedsteam.com/)
+- [SteamDB](https://steamdb.info/extension/)
+
+You can also add some custom SGDB buttons through Augmented Steam.
+1. Go to https://store.steampowered.com/
+2. At the top of the page, click on the "Augmented Steam" dropdown, and select "Options".
+3. Navigate to the Store > App page section.
+4. Create a custom link with the following properties:
+	- Name: `SteamGridDB`
+	- URL: `steamgriddb.com/steam/[ID]`
+	- Icon: `https://cdn2.steamgriddb.com/icon/c4ca4238a0b923820dcc509a6f75849b.ico`
+5. Navigate to the Community > Profile section.
+6. Create a custom link with the following properties:
+	- Name: `SteamGridDB`
+	- URL: `steamgriddb.com/profile/[ID]`
+	- Icon: `i.imgur.com/NYQSplq.png`
+
--- a/script.js
+++ b/script.js
@ -1,29 +1,123 @@
+if(typeof browser === "undefined")
+	var browser = chrome;
+
 const url = window.location.href;
-const appIDMatch = url.match(/\/app\/(\d+)/);
-if(appIDMatch) {

-	const appID = appIDMatch[1];
+browser.storage.sync.get('gameEnabled').then((result) => {

-	const sgdb_button = document.createElement('a');
-	sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
-	sgdb_button.className = "btnv6_blue_hoverfade btn_medium";
+	const gameEnabled = result.gameEnabled !== undefined ? result.gameEnabled : true;
+	if(gameEnabled) {

-	const span = document.createElement('span');
-	span.setAttribute("data-tooltip-text", "View on SteamGridDB");
+		var appID;
+		if(url.includes('/app/')) {
+			const appIDMatch = url.match(/\/app\/(\d+)/);
+			appID = appIDMatch[1];
+		}

-	const icon = document.createElement("img");
-	icon.className = "ico16";
-	icon.src = browser.runtime.getURL("icons/sgdb_16.png");
-	icon.style.backgroundImage = "none";
-	span.append(icon);
+		if(appID) {
 			
-	sgdb_button.append(span);
+			const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
+			if(buttonContainer) {
+		
+				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";
+			
+				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);
+				
+			}
+			
+		}
 		
-	const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
-	if(buttonContainer) {
-		sgdb_button.style.marginRight = "3px";
-		sgdb_button.style.marginLeft = "3px";
-		buttonContainer.prepend(sgdb_button);
 	}
 	
-}
+});
+
+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];
+			}
+		} 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) {			
+			
+			const headerActions = document.querySelector(".profile_header_actions");
+			if(headerActions) {
+				
+				const dropdown = document.getElementById("profile_action_dropdown");
+				if(dropdown) {
+					
+					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 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);
+					
+				} 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 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");
+					
+					span.append(icon);
+					profile_button.append(span);
+					headerActions.append(profile_button);
+					
+				}
+				
+			}	
+			
+		}
+	
+	}
+	
+});
Author	SHA1	Message	Date
Nes	67900b5bfb	Added Edge add-on page link.	2024-08-15 21:00:56 -07:00
Nes370	7ad3da0cd6	Added user preference toggles. Version bump for new functionality.	2024-08-10 16:03:15 -07:00
Nes370	adbbfb0de1	Update popup.js simplified compatibility code	2024-08-10 00:52:42 -07:00
Nes370	5d2c42788e	Added user profile buttons. Added buttons to Steam user profiles that take you to their SGDB profile. Version bump due to new functionality. May cause some crowding with other extensions -- recommend users to disable the "Show a link to view SteamIDs" under Community > Profile setting in Augmented Steam.	2024-08-10 00:45:28 -07:00
Nes370	e7784d56fa	Update popup.html Yet another typo	2024-08-09 20:52:55 -07:00
Nes370	b5faeabd32	Update readme.md	2024-08-09 14:33:58 -07:00
Nes	4e01741d7c	Add readme.md	2024-08-09 13:30:19 -07:00
Nes370	a6ff96f098	Added compatibility for Edge/Chrome browsers. Version bump due to significant changes.	2024-08-09 12:36:26 -07:00
Nes370	f263c0358f	Update manifest.json bumped version number for significant change.	2024-08-08 17:00:05 -07:00
Nes370	1b7ad15d06	Split popup script into separate file After testing found that in-line javascript is discouraged due to security policy settings, so split that into a separate file.	2024-08-08 16:59:43 -07:00