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.
main
Nes370 2024-08-10 00:45:28 -07:00
parent e7784d56fa
commit 5d2c42788e
3 changed files with 89 additions and 12 deletions

View File

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

View File

@ -13,7 +13,7 @@ I'm still awaiting verification to publish on the Edge Add-ons site, and I don't
### Manual Install ### Manual Install
1. Start by downloading the latest release from [here](https://gitea.goblincave.synology.me/Nes/SGDB-Extension/releases). 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. 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" 4. Enable "Developer mode"
5. Press "Load unpacked" and select the folder where you unzipped the extension. 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` - Name: `SteamGridDB`
- URL: `steamgriddb.com/profile/[ID]` - URL: `steamgriddb.com/profile/[ID]`
- Icon: `i.imgur.com/NYQSplq.png` - 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.

View File

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