diff --git a/manifest.json b/manifest.json index 18da4ab..beb9eb3 100644 --- a/manifest.json +++ b/manifest.json @@ -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", diff --git a/popup.html b/popup.html index 96cfbd2..625fc24 100644 --- a/popup.html +++ b/popup.html @@ -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; + } -

+

SGDB Button on Steam

- - - Created by Nes - - + +
+ +
+
+ +
+ View Source + + + Created by Nes + + diff --git a/popup.js b/popup.js index 9c868f9..1598787 100644 --- a/popup.js +++ b/popup.js @@ -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 }); + }); + }); diff --git a/readme.md b/readme.md index 99157ac..e4749a6 100644 --- a/readme.md +++ b/readme.md @@ -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. \ No newline at end of file diff --git a/script.js b/script.js index 197f594..5cef4fa 100644 --- a/script.js +++ b/script.js @@ -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 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"); + const gameEnabled = result.gameEnabled !== undefined ? result.gameEnabled : true; + if(gameEnabled) { + + 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) { - span.append(icon); - sgdb_button.append(span); - buttonContainer.prepend(sgdb_button); + 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); + + } + + } } -} +}); -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) { - - const headerActions = document.querySelector(".profile_header_actions"); - if(headerActions) { - const dropdown = document.getElementById("profile_action_dropdown"); - if(dropdown) { + if(userID) { - 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 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 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); + 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); + + } + + } } - - } -} + } + +});