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

Compare commits

base: Nes:main
Branches Tags
Nes:main
Nes:1.0.5
Nes:1.0.4
Nes:1.0.3
Nes:1.0.2
Nes:1.0.1
Nes:1.0.0
..
compare: Nes:1.0.3
Branches Tags
Nes:main
Nes:1.0.5
Nes:1.0.4
Nes:1.0.3
Nes:1.0.2
Nes:1.0.1
Nes:1.0.0

No commits in common. "main" and "1.0.3" have entirely different histories.
main ... 1.0.3

5 changed files with 47 additions and 259 deletions
Show Stats Expand all files Collapse all files

11
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.5", "version": "1.0.3",
"description": "Adds a button on Steam games that brings you to their 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",
"32": "icons/icon_32.png", "32": "icons/icon_32.png",
@ -25,12 +25,7 @@
}, },
"content_scripts": [ "content_scripts": [
{ {
"matches": [ "matches": [ "*://store.steampowered.com/app/*", "*://steamcommunity.com/app/*" ],
"*://store.steampowered.com/app/*",
"*://steamcommunity.com/app/*",
"*://steamcommunity.com/id/*",
"*://steamcommunity.com/profiles/*"
],
"js": [ "script.js" ] "js": [ "script.js" ]
} }
], ],

75
popup.html
View File

@ -9,7 +9,6 @@
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;
@ -43,82 +42,22 @@
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 style="margin-bottom: 5px"> <h2>
<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"> SGBD Button on Steam
</h2> </h2>
<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"> <a class="btn" href="https://www.steamgriddb.com/profile/76561198274324627">
<span data-tooltip-text="View my profile"> <span data-tooltip-text="View my profile">
<img id="nes-icon" class="icon" src="">Created by <span style="color: #FC2A7C">Nes</span> <img id="nes-icon" class="icon" src="">Created by <span style="color: #FC2A7C">Nes</span>
</span> </span>
</a> </a>
<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>
</body> </body>
</html> </html>

35
popup.js
View File

@ -1,31 +1,14 @@
if(typeof browser === "undefined")
var browser = chrome;
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
const headerIcon = document.querySelector("#sgdb-icon"); const headerIcon = document.querySelector("#sgdb-icon");
headerIcon.src = browser.runtime.getURL("icons/icon_32.png");
const nesIcon = document.querySelector("#nes-icon"); const nesIcon = document.querySelector("#nes-icon");
nesIcon.src = browser.runtime.getURL("icons/nes_32.png");
const giteaIcon = document.querySelector("#gitea-icon"); const giteaIcon = document.querySelector("#gitea-icon");
giteaIcon.src = browser.runtime.getURL("icons/gitea_32.png"); if(chrome) {
headerIcon.src = chrome.runtime.getURL("icons/icon_32.png");
const gameToggle = document.getElementById('game'); nesIcon.src = chrome.runtime.getURL("icons/nes_32.png");
browser.storage.sync.get('gameEnabled').then((result) => { giteaIcon.src = chrome.runtime.getURL("icons/gitea_32.png");
gameToggle.checked = result.gameEnabled !== undefined ? result.gameEnabled : true; } else {
}); headerIcon.src = browser.runtime.getURL("icons/icon_32.png");
gameToggle.addEventListener('change', () => { nesIcon.src = browser.runtime.getURL("icons/nes_32.png");
const enabled = gameToggle.checked; giteaIcon.src = browser.runtime.getURL("icons/gitea_32.png");
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 });
});
}); });

41
readme.md
View File

@ -1,41 +0,0 @@
# SGDB Button on Steam
A simple browser extension that adds a button on Steam pages that links to their SteamGridDB entry.
## Installation
You can download it for Firefox [here](https://addons.mozilla.org/en-US/firefox/addon/sgdb-button-on-steam/), or Edge [here](https://microsoftedge.microsoft.com/addons/detail/sgdb-button-on-steam/bmgdnoicjbecmmhpnbndjmgpojhlmmao).
If you want to use it on Chrome, you will have to manually install it instead, because I don't want to pay to publish it on the Chrome Web Store.
### Manual Install
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.
3. Go to `chrome://extensions` in Chrome, or `edge://extensions` in Edge
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:
- [Augmented Steam](https://augmentedsteam.com/)
- [SteamDB](https://steamdb.info/extension/)
You can also add some custom SGDB buttons through Augmented Steam.
1. Go to https://store.steampowered.com/
2. At the top of the page, click on the "Augmented Steam" dropdown, and select "Options".
3. Navigate to the Store > App page section.
4. Create a custom link with the following properties:
- Name: `SteamGridDB`
- URL: `steamgriddb.com/steam/[ID]`
- Icon: `https://cdn2.steamgriddb.com/icon/c4ca4238a0b923820dcc509a6f75849b.ico`
5. Navigate to the Community > Profile section.
6. Create a custom link with the following properties:
- Name: `SteamGridDB`
- URL: `steamgriddb.com/profile/[ID]`
- Icon: `i.imgur.com/NYQSplq.png`

144
script.js
View File

@ -1,123 +1,35 @@
if(typeof browser === "undefined")
var browser = chrome;
const url = window.location.href; const url = window.location.href;
browser.storage.sync.get('gameEnabled').then((result) => { const appIDMatch = url.match(/\/app\/(\d+)/);
if(appIDMatch) {
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];
}
if(appID) {
const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
if(buttonContainer) {
const sgdb_button = document.createElement('a'); const appID = appIDMatch[1];
sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
sgdb_button.className = "btnv6_blue_hoverfade btn_medium"; const sgdb_button = document.createElement('a');
sgdb_button.style.marginRight = "3px"; sgdb_button.href = `https://steamgriddb.com/steam/${appID}`;
sgdb_button.style.marginLeft = "3px"; sgdb_button.className = "btnv6_blue_hoverfade btn_medium";
sgdb_button.style.marginRight = "3px";
const span = document.createElement('span'); sgdb_button.style.marginLeft = "3px";
span.setAttribute("data-tooltip-text", "View on SteamGridDB");
const span = document.createElement('span');
const icon = document.createElement("img"); span.setAttribute("data-tooltip-text", "View on SteamGridDB");
icon.className = "ico16";
icon.style.backgroundImage = "none"; const icon = document.createElement("img");
icon.src = browser.runtime.getURL("icons/sgdb_16.png"); icon.className = "ico16";
if(chrome) {
span.append(icon); icon.src = chrome.runtime.getURL("icons/sgdb_16.png");
sgdb_button.append(span); } else {
buttonContainer.prepend(sgdb_button); icon.src = browser.runtime.getURL("icons/sgdb_16.png");
}
} }
icon.style.backgroundImage = "none";
span.append(icon);
sgdb_button.append(span);
buttonContainer.prepend(sgdb_button);
} }
}); }
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];
}
} 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);
}
}
}
}
});