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

View File

@ -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",

View File

@ -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>

View File

@ -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")
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 });
});
});

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"
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.

156
script.js
View File

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