Nes
/
SGDB-Extension
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

Added user preference toggles. 

Version bump for new functionality.
main 1.0.5
Nes370 2024-08-10 16:03:15 -07:00
parent adbbfb0de1
commit 7ad3da0cd6
5 changed files with 200 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
manifest.json
View File

@ -1,8 +1,8 @@
{ {
"manifest_version": 3, "manifest_version": 3,
"name": "SGDB Button on Steam", "name": "SGDB Button on Steam",
"version": "1.0.4", "version": "1.0.5",
"description": "Adds a button on Steam game pages to bring you to its SteamGridDB entry.", "description": "Adds a button on Steam games that brings you to their SteamGridDB entry.",
"icons": { "icons": {
"16": "icons/icon_16.png", "16": "icons/icon_16.png",
"32": "icons/icon_32.png", "32": "icons/icon_32.png",

73
popup.html
View File

@ -9,6 +9,7 @@
body { body {
min-width: 350px; min-width: 350px;
max-width: 100%; max-width: 100%;
font-size: 16px;
text-align: center; text-align: center;
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
background-color: #32414c; background-color: #32414c;
@ -42,22 +43,82 @@
width: 22px; width: 22px;
height: 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> </style>
<script src="popup.js" defer></script> <script src="popup.js" defer></script>
</head> </head>
<body> <body>
<h2> <h2 style="margin-bottom: 5px">
<img id="sgdb-icon" src="" style="vertical-align: middle; display: inline"> SGDB Button on Steam <img id="sgdb-icon" src="" style="vertical-align: middle; display: inline"> SGDB Button on Steam
</h2> </h2>
<a class="btn" href="https://www.steamgriddb.com/profile/76561198274324627">
<span data-tooltip-text="View my profile"> <div>
<img id="nes-icon" class="icon" src="">Created by <span style="color: #FC2A7C">Nes</span> <label class="checkbox">
</span> <input type="checkbox" id="game"/><span class="fakebox"></span>Show on games
</a> </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"> <a class="btn" href="https://gitea.goblincave.synology.me/Nes/SGDB-Extension">
<span data-tooltip-text="View source"> <span data-tooltip-text="View source">
<img id="gitea-icon" class="icon" src="">View Source <img id="gitea-icon" class="icon" src="">View Source
</span> </span>
</a> </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> </body>
</html> </html>

31
popup.js
View File

@ -1,10 +1,31 @@
document.addEventListener("DOMContentLoaded", function() { if(typeof browser === "undefined")
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; var browser = chrome;
document.addEventListener("DOMContentLoaded", function() {
const headerIcon = document.querySelector("#sgdb-icon");
headerIcon.src = browser.runtime.getURL("icons/icon_32.png"); headerIcon.src = browser.runtime.getURL("icons/icon_32.png");
const nesIcon = document.querySelector("#nes-icon");
nesIcon.src = browser.runtime.getURL("icons/nes_32.png"); nesIcon.src = browser.runtime.getURL("icons/nes_32.png");
const giteaIcon = document.querySelector("#gitea-icon");
giteaIcon.src = browser.runtime.getURL("icons/gitea_32.png"); 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 });
});
}); });

5
readme.md
View File

@ -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" 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.
## Preferences
You can configure your preferences by clicking on the extension icon to show a popup menu.
## Other Recommended Extensions ## Other Recommended Extensions
Some other great extensions for enhancing your Steam browsing experience: 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]` - 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.

156
script.js
View File

@ -3,103 +3,121 @@ if(typeof browser === "undefined")
const url = window.location.href; const url = window.location.href;
var appID; browser.storage.sync.get('gameEnabled').then((result) => {
if(url.includes('/app/')) {
const appIDMatch = url.match(/\/app\/(\d+)/);
appID = appIDMatch[1];
}
if(appID) { const gameEnabled = result.gameEnabled !== undefined ? result.gameEnabled : true;
if(gameEnabled) {
const buttonContainer = document.querySelector(".apphub_OtherSiteInfo"); var appID;
if(buttonContainer) { if(url.includes('/app/')) {
const appIDMatch = url.match(/\/app\/(\d+)/);
appID = appIDMatch[1];
}
const sgdb_button = document.createElement('a'); if(appID) {
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'); const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
span.setAttribute("data-tooltip-text", "View on SteamGridDB"); if(buttonContainer) {
const icon = document.createElement("img"); const sgdb_button = document.createElement('a');
icon.className = "ico16"; sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
icon.style.backgroundImage = "none"; sgdb_button.className = "btnv6_blue_hoverfade btn_medium";
icon.src = browser.runtime.getURL("icons/sgdb_16.png"); sgdb_button.style.marginRight = "3px";
sgdb_button.style.marginLeft = "3px";
span.append(icon); const span = document.createElement('span');
sgdb_button.append(span); span.setAttribute("data-tooltip-text", "View on SteamGridDB");
buttonContainer.prepend(sgdb_button);
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; browser.storage.sync.get('profileEnabled').then((result) => {
if(url.includes('/profiles/')) {
const userIDMatch = url.match(/\/profiles\/(\d+)/); const profileEnabled = result.profileEnabled !== undefined ? result.profileEnabled : false;
if(userIDMatch) { if(result.profileEnabled) {
userID = userIDMatch[1];
} var userID;
} else if(url.includes('/id/')) { if(url.includes('/profiles/')) {
const div = document.getElementById('responsive_page_template_content'); const userIDMatch = url.match(/\/profiles\/(\d+)/);
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) { if(userIDMatch) {
userID = userIDMatch[1]; 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"); const headerActions = document.querySelector(".profile_header_actions");
if(headerActions) { if(headerActions) {
const dropdown = document.getElementById("profile_action_dropdown"); const dropdown = document.getElementById("profile_action_dropdown");
if(dropdown) { if(dropdown) {
const popup_menu = dropdown.getElementsByClassName("popup_menu"); const popup_menu = dropdown.getElementsByClassName("popup_menu");
const dropdown_button = document.createElement('a'); const dropdown_button = document.createElement('a');
dropdown_button.href = `https://steamgriddb.com/profile/${userID}`; dropdown_button.href = `https://steamgriddb.com/profile/${userID}`;
dropdown_button.className = "popup_menu_item"; dropdown_button.className = "popup_menu_item";
const icon = document.createElement("img"); const icon = document.createElement("img");
icon.src = browser.runtime.getURL("icons/sgdb_16.png"); icon.src = browser.runtime.getURL("icons/sgdb_16.png");
dropdown_button.append(icon); dropdown_button.append(icon);
dropdown_button.append("\u00A0 SteamGridDB Profile"); dropdown_button.append("\u00A0 SteamGridDB Profile");
popup_menu[0].append(dropdown_button); popup_menu[0].append(dropdown_button);
} else { } else {
const profile_button = document.createElement('a'); const profile_button = document.createElement('a');
profile_button.href = `https://steamgriddb.com/profile/${userID}`; profile_button.href = `https://steamgriddb.com/profile/${userID}`;
profile_button.className = "btn_profile_action btn_medium"; profile_button.className = "btn_profile_action btn_medium";
profile_button.style.marginRight = "3px"; profile_button.style.marginRight = "3px";
profile_button.style.marginLeft = "3px"; profile_button.style.marginLeft = "3px";
const span = document.createElement('span'); const span = document.createElement('span');
span.setAttribute("data-tooltip-text", "View SteamGridDB profile"); span.setAttribute("data-tooltip-text", "View SteamGridDB profile");
const icon = document.createElement("img"); const icon = document.createElement("img");
icon.className = "ico16"; icon.className = "ico16";
icon.style.backgroundImage = "none"; icon.style.backgroundImage = "none";
icon.src = browser.runtime.getURL("icons/sgdb_16.png"); icon.src = browser.runtime.getURL("icons/sgdb_16.png");
span.append(icon); span.append(icon);
profile_button.append(span); profile_button.append(span);
headerActions.append(profile_button); headerActions.append(profile_button);
}
}
} }
} }
} });