Compare commits
No commits in common. "main" and "1.0.2" have entirely different histories.
|
|
@ -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.2",
|
||||
"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",
|
||||
|
|
@ -25,19 +25,14 @@
|
|||
},
|
||||
"content_scripts": [
|
||||
{
|
||||
"matches": [
|
||||
"*://store.steampowered.com/app/*",
|
||||
"*://steamcommunity.com/app/*",
|
||||
"*://steamcommunity.com/id/*",
|
||||
"*://steamcommunity.com/profiles/*"
|
||||
],
|
||||
"matches": [ "*://store.steampowered.com/app/*", "*://steamcommunity.com/app/*" ],
|
||||
"js": [ "script.js" ]
|
||||
}
|
||||
],
|
||||
"web_accessible_resources": [
|
||||
{
|
||||
"resources": [ "icons/sgdb_16.png" ],
|
||||
"matches": [ "*://store.steampowered.com/*", "*://steamcommunity.com/*" ]
|
||||
"matches": [ "*://store.steampowered.com/app/*", "*://steamcommunity.com/app/*" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
77
popup.html
77
popup.html
|
|
@ -7,9 +7,6 @@
|
|||
<title>SGDB Button on Steam</title>
|
||||
<style>
|
||||
body {
|
||||
min-width: 350px;
|
||||
max-width: 100%;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
background-color: #32414c;
|
||||
|
|
@ -43,82 +40,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">
|
||||
<img id="sgdb-icon" src="" style="vertical-align: middle; display: inline"> SGDB Button on Steam
|
||||
<h2>
|
||||
<img id="sgdb-icon" src="" style="vertical-align: middle; display: inline"> SGBD 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>
|
||||
|
|
|
|||
27
popup.js
27
popup.js
|
|
@ -1,31 +1,8 @@
|
|||
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");
|
||||
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 });
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
41
readme.md
41
readme.md
|
|
@ -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`
|
||||
|
||||
146
script.js
146
script.js
|
|
@ -1,123 +1,29 @@
|
|||
if(typeof browser === "undefined")
|
||||
var browser = chrome;
|
||||
|
||||
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/')) {
|
||||
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');
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const appIDMatch = url.match(/\/app\/(\d+)/);
|
||||
if(appIDMatch) {
|
||||
|
||||
const 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";
|
||||
|
||||
const span = document.createElement('span');
|
||||
span.setAttribute("data-tooltip-text", "View on SteamGridDB");
|
||||
|
||||
const icon = document.createElement("img");
|
||||
icon.className = "ico16";
|
||||
icon.src = browser.runtime.getURL("icons/sgdb_16.png");
|
||||
icon.style.backgroundImage = "none";
|
||||
span.append(icon);
|
||||
|
||||
sgdb_button.append(span);
|
||||
|
||||
const buttonContainer = document.querySelector(".apphub_OtherSiteInfo");
|
||||
if(buttonContainer) {
|
||||
sgdb_button.style.marginRight = "3px";
|
||||
sgdb_button.style.marginLeft = "3px";
|
||||
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);
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue