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.4
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.4" have entirely different histories.
main ... 1.0.4

5 changed files with 106 additions and 207 deletions
Show Stats Expand all files Collapse all files

4
manifest.json
View File

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

73
popup.html
View File

@ -9,7 +9,6 @@
body {
min-width: 350px;
max-width: 100%;
font-size: 16px;
text-align: center;
font-family: "Open Sans", sans-serif;
background-color: #32414c;
@ -43,82 +42,22 @@
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 style="margin-bottom: 5px">
<h2>
<img id="sgdb-icon" src="" style="vertical-align: middle; display: inline"> SGDB Button on Steam
</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">
<span data-tooltip-text="View my profile">
<img id="nes-icon" class="icon" src="">Created by <span style="color: #FC2A7C">Nes</span>
</span>
</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>
</html>

29
popup.js
View File

@ -1,31 +1,10 @@
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");
if(typeof browser === "undefined")
var browser = chrome;
headerIcon.src = browser.runtime.getURL("icons/icon_32.png");
nesIcon.src = browser.runtime.getURL("icons/nes_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 });
});
});

13
readme.md
View File

@ -4,21 +4,19 @@ A simple browser extension that adds a button on Steam pages that links to their
## 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).
You can download it for Firefox [here](https://addons.mozilla.org/en-US/firefox/addon/sgdb-button-on-steam/).
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.
If you want to use it on Edge or Chrome, you will have to manually install it instead.
I'm still awaiting verification to publish on the Edge Add-ons site, and 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
3. Go to `edge://extensions` in Edge, or `chrome://extensions` in Chrome
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:
@ -39,3 +37,4 @@ 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.

40
script.js
View File

@ -3,18 +3,13 @@ if(typeof browser === "undefined")
const url = window.location.href;
browser.storage.sync.get('gameEnabled').then((result) => {
const gameEnabled = result.gameEnabled !== undefined ? result.gameEnabled : true;
if(gameEnabled) {
var appID;
if(url.includes('/app/')) {
var appID;
if(url.includes('/app/')) {
const appIDMatch = url.match(/\/app\/(\d+)/);
appID = appIDMatch[1];
}
}
if(appID) {
if(appID) {
const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
if(buttonContainer) {
@ -39,24 +34,15 @@ browser.storage.sync.get('gameEnabled').then((result) => {
}
}
}
}
});
browser.storage.sync.get('profileEnabled').then((result) => {
const profileEnabled = result.profileEnabled !== undefined ? result.profileEnabled : false;
if(result.profileEnabled) {
var userID;
if(url.includes('/profiles/')) {
var userID;
if(url.includes('/profiles/')) {
const userIDMatch = url.match(/\/profiles\/(\d+)/);
if(userIDMatch) {
userID = userIDMatch[1];
}
} else if(url.includes('/id/')) {
} else if(url.includes('/id/')) {
const div = document.getElementById('responsive_page_template_content');
if(div) {
const scriptElements = div.getElementsByTagName('script');
@ -69,9 +55,9 @@ browser.storage.sync.get('profileEnabled').then((result) => {
}
}
}
}
}
if(userID) {
if(userID) {
const headerActions = document.querySelector(".profile_header_actions");
if(headerActions) {
@ -116,8 +102,4 @@ browser.storage.sync.get('profileEnabled').then((result) => {
}
}
}
});
}