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.

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 3,
 	"name": "SGDB Button on Steam",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"description": "Adds a button on Steam game pages to bring you to its SteamGridDB entry.",
 	"icons": {
 		"16": "icons/icon_16.png",
@@ -25,7 +25,12 @@
 	},
 	"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" ]
 		}
 	],

readme.md

@@ -13,7 +13,7 @@ I'm still awaiting verification to publish on the Edge Add-ons site, and I don't
 ### 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. `edge://extensions` in Edge, or `chrome://extensions` in Chrome
+3. Go to `edge://extensions` in Edge, or `chrome://extensions` in Chrome
 4. Enable "Developer mode"
 5. Press "Load unpacked" and select the folder where you unzipped the extension.
 
@@ -36,3 +36,5 @@ You can also add some custom SGDB buttons through Augmented Steam.
 	- Name: `SteamGridDB`
 	- 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.

script.js

@@ -1,12 +1,18 @@
+if(typeof browser === "undefined")
+	var browser = chrome;
+
 const url = window.location.href;
 
-const appIDMatch = url.match(/\/app\/(\d+)/);
-if(appIDMatch) {
+var appID;
+if(url.includes('/app/')) {
+	const appIDMatch = url.match(/\/app\/(\d+)/);
+	appID = appIDMatch[1];
+}
+
+if(appID) {
 	
 	const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
 	if(buttonContainer) {
-		
-		const appID = appIDMatch[1];
 	
 		const sgdb_button = document.createElement('a');
 		sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
@@ -19,12 +25,8 @@ if(appIDMatch) {
 	
 		const icon = document.createElement("img");
 		icon.className = "ico16";
-		if(chrome) {
-			icon.src = chrome.runtime.getURL("icons/sgdb_16.png");
-		} else {
-			icon.src = browser.runtime.getURL("icons/sgdb_16.png");
-		}
 		icon.style.backgroundImage = "none";
+		icon.src = browser.runtime.getURL("icons/sgdb_16.png");
 		
 		span.append(icon);
 		sgdb_button.append(span);
@@ -33,3 +35,71 @@ if(appIDMatch) {
 	}
 	
 }
+
+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);
+			
+		}
+		
+	}	
+	
+}