Nes370
parent
adbbfb0de1
commit
7ad3da0cd6
|
|
@ -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",
|
||||
|
|
|
|||
73
popup.html
73
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;
|
||||
}
|
||||
</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>
|
||||
|
|
|
|||
31
popup.js
31
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 });
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
184
script.js
184
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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue