From f36f346c5e6c22c35fbee7f3b69d6a054866f17c Mon Sep 17 00:00:00 2001
From: PeterFour <git@ptr4.com>
Date: Sat, 15 Nov 2025 16:36:27 +0000
Subject: [PATCH] Add ProtonDB button

---
 _locales/en/messages.json    |  6 ++++
 _locales/fr/messages.json    |  6 ++++
 icons/protondb.svg           | 42 +++++++++++++++++++++++++
 manifest.json                |  1 +
 options/options.html         |  4 +++
 scripts/community/gamehub.js | 30 ++++++++++++++++++
 scripts/store/app.js         | 59 ++++++++++++++++++++++++++++++++++++
 7 files changed, 148 insertions(+)
 create mode 100644 icons/protondb.svg

diff --git a/_locales/en/messages.json b/_locales/en/messages.json
index fd65f3b9c..b0fbd846f 100644
--- a/_locales/en/messages.json
+++ b/_locales/en/messages.json
@@ -33,6 +33,9 @@
 	"view_on_pcgamingwiki": {
 		"message": "View on PCGamingWiki"
 	},
+	"view_on_protondb": {
+		"message": "View on ProtonDB"
+	},
 	"view_your_achievements": {
 		"message": "Personal achievements"
 	},
@@ -553,6 +556,9 @@
 	"options_button_pcgw": {
 		"message": "Display PCGamingWiki button on product pages"
 	},
+	"options_button_protondb": {
+		"message": "Display ProtonDB button on product pages"
+	},
 	"options_button_sub": {
 		"message": "Display a button on package pages"
 	},
diff --git a/_locales/fr/messages.json b/_locales/fr/messages.json
index 4a5575bc8..121b6e44d 100644
--- a/_locales/fr/messages.json
+++ b/_locales/fr/messages.json
@@ -31,6 +31,9 @@
 	"view_on_pcgamingwiki": {
 		"message": "Voir sur PCGamingWiki"
 	},
+	"view_on_protondb": {
+		"message": "Voir sur ProtonDB"
+	},
 	"view_your_achievements": {
 		"message": "Succès personnels"
 	},
@@ -531,6 +534,9 @@
 	"options_button_pcgw": {
 		"message": "Afficher le bouton PCGamingWiki sur les pages des produits"
 	},
+	"options_button_protondb": {
+		"message": "Afficher le bouton ProtonDB sur les pages des produits"
+	},
 	"options_button_sub": {
 		"message": "Afficher un bouton sur les pages des packages"
 	},
diff --git a/icons/protondb.svg b/icons/protondb.svg
new file mode 100644
index 000000000..53dc01e32
--- /dev/null
+++ b/icons/protondb.svg
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 491 491" style="enable-background:new 0 0 491 491;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#1A2233;}
+	.st1{fill:#F50057;}
+	.st2{fill:#FFFFFF;}
+</style>
+<!-- <path class="st0" d="M455.3,491H35.7C16,491,0,475,0,455.3V35.7C0,16,16,0,35.7,0h419.7C475,0,491,16,491,35.7v419.7
+	C491,475,475,491,455.3,491z"/> -->
+<g>
+	<path class="st1" d="M470.5,245.5c0-29.8-37.3-58.1-94.6-75.6c13.2-58.3,7.3-104.7-18.5-119.6c-6-3.5-12.9-5.1-20.5-5.1v20.5
+		c4.2,0,7.6,0.8,10.5,2.4c12.5,7.2,17.9,34.4,13.7,69.4c-1,8.6-2.7,17.7-4.7,27c-18-4.4-37.6-7.8-58.2-10
+		c-12.4-17-25.2-32.4-38.2-45.9c29.9-27.8,58-43,77-43V45.1l0,0c-25.2,0-58.2,18-91.6,49.2c-33.4-31-66.4-48.8-91.6-48.8v20.5
+		c19,0,47.1,15.1,77,42.7c-12.8,13.5-25.7,28.8-37.9,45.8c-20.7,2.2-40.4,5.6-58.3,10.1c-2.1-9.2-3.7-18.1-4.8-26.6
+		c-4.3-35,1-62.3,13.4-69.5c2.8-1.7,6.3-2.4,10.5-2.4V45.6l0,0c-7.7,0-14.7,1.7-20.7,5.1c-25.8,14.9-31.6,61.2-18.3,119.3
+		c-57.1,17.6-94.2,45.8-94.2,75.5c0,29.8,37.3,58.1,94.6,75.6c-13.2,58.3-7.3,104.7,18.5,119.6c6,3.5,12.9,5.1,20.6,5.1
+		c25.2,0,58.2-18,91.6-49.2c33.4,31,66.4,48.8,91.6,48.8c7.7,0,14.7-1.7,20.7-5.1c25.8-14.9,31.6-61.2,18.3-119.3
+		C433.4,303.5,470.5,275.3,470.5,245.5z M351.1,184.4c-3.4,11.8-7.6,24-12.4,36.2c-3.8-7.3-7.7-14.7-12-22
+		c-4.2-7.3-8.7-14.5-13.2-21.5C326.5,179,339.1,181.4,351.1,184.4z M309.1,282.1c-7.2,12.4-14.5,24.1-22.1,35
+		c-13.7,1.2-27.5,1.8-41.5,1.8c-13.9,0-27.7-0.6-41.3-1.7c-7.6-10.9-15-22.6-22.2-34.9c-7-12-13.3-24.2-19.1-36.5
+		c5.7-12.3,12.1-24.6,19-36.6c7.2-12.4,14.5-24.1,22.1-35c13.7-1.2,27.5-1.8,41.5-1.8c13.9,0,27.7,0.6,41.3,1.7
+		c7.6,10.9,15,22.6,22.2,34.9c7,12,13.3,24.2,19.1,36.5C322.3,257.7,315.9,270,309.1,282.1z M338.7,270.1c5,12.3,9.2,24.6,12.7,36.5
+		c-12,2.9-24.7,5.4-37.8,7.3c4.5-7.1,9-14.3,13.2-21.7C331,284.9,334.9,277.5,338.7,270.1z M245.7,368c-8.5-8.8-17.1-18.6-25.5-29.4
+		c8.3,0.4,16.7,0.6,25.2,0.6c8.6,0,17.2-0.2,25.5-0.6C262.7,349.4,254.1,359.2,245.7,368z M177.4,314c-13-1.9-25.6-4.3-37.6-7.2
+		c3.4-11.8,7.6-24,12.4-36.2c3.8,7.3,7.7,14.7,12,22C168.5,299.8,172.9,307,177.4,314z M245.2,123.1c8.5,8.8,17.1,18.6,25.5,29.4
+		c-8.3-0.4-16.7-0.6-25.2-0.6c-8.6,0-17.2,0.2-25.5,0.6C228.3,141.7,236.8,131.9,245.2,123.1z M177.3,177.1
+		c-4.5,7.1-9,14.3-13.2,21.7c-4.2,7.3-8.2,14.7-11.9,22c-5-12.3-9.2-24.6-12.7-36.5C151.6,181.5,164.2,179,177.3,177.1z M94.3,292
+		c-32.5-13.9-53.5-32-53.5-46.4c0-14.4,21-32.7,53.5-46.4c7.9-3.4,16.5-6.4,25.4-9.3c5.2,18,12.1,36.7,20.6,55.9
+		c-8.4,19.1-15.2,37.7-20.4,55.6C110.9,298.5,102.3,295.4,94.3,292z M143.7,423c-12.5-7.2-17.9-34.4-13.7-69.4
+		c1-8.6,2.7-17.7,4.7-27c18,4.4,37.6,7.8,58.2,10c12.4,17,25.2,32.4,38.2,45.9c-29.9,27.8-58,43-77,43
+		C149.9,425.4,146.4,424.6,143.7,423z M361.3,353.1c4.3,35-1,62.3-13.4,69.5c-2.8,1.7-6.3,2.4-10.5,2.4c-19,0-47.1-15.1-77-42.7
+		c12.8-13.5,25.7-28.8,37.9-45.8c20.7-2.2,40.4-5.6,58.3-10.1C358.6,335.7,360.2,344.6,361.3,353.1z M396.6,292
+		c-7.9,3.4-16.5,6.4-25.4,9.3c-5.2-18-12.1-36.7-20.6-55.9c8.4-19.1,15.2-37.7,20.4-55.6c9.1,2.8,17.7,6,25.8,9.4
+		c32.5,13.9,53.5,32,53.5,46.4C450,259.9,429,278.2,396.6,292z"/>
+	<path class="st1" d="M153.6,45.5L153.6,45.5L153.6,45.5z"/>
+	<circle class="st2" cx="245.4" cy="245.5" r="41.9"/>
+	<path class="st1" d="M336.8,45.2L336.8,45.2L336.8,45.2z"/>
+</g>
+</svg>
diff --git a/manifest.json b/manifest.json
index fa436d78c..c702bb3de 100644
--- a/manifest.json
+++ b/manifest.json
@@ -71,6 +71,7 @@
 
 				"icons/white.svg",
 				"icons/pcgamingwiki.svg",
+				"icons/protondb.svg",
 				"icons/steamhunters.svg",
 				"icons/image.svg",
 				"icons/achievements_completed.svg",
diff --git a/options/options.html b/options/options.html
index 1e2f7bdc0..966d0e9fb 100644
--- a/options/options.html
+++ b/options/options.html
@@ -122,6 +122,10 @@ <h3 data-msg="options_header_buttons_and_links"></h3>
 			<input type="checkbox" class="option-check" data-option="button-pcgw" checked>
 			<div data-msg="options_button_pcgw"></div>
 		</label>
+		<label class="checkbox">
+			<input type="checkbox" class="option-check" data-option="button-protondb" checked>
+			<div data-msg="options_button_protondb"></div>
+		</label>
 		<label class="checkbox">
 			<input type="checkbox" class="option-check" data-option="button-sub" checked>
 			<div data-msg="options_button_sub"></div>
diff --git a/scripts/community/gamehub.js b/scripts/community/gamehub.js
index c06b01850..3fbe2005c 100644
--- a/scripts/community/gamehub.js
+++ b/scripts/community/gamehub.js
@@ -4,6 +4,7 @@
 GetOption( {
 	'button-gamehub': true,
 	'button-pcgw': true,
+	'button-protondb': true,
 }, ( items ) =>
 {
 	const container = document.querySelector( '.apphub_OtherSiteInfo' );
@@ -93,5 +94,34 @@ GetOption( {
 				responsiveMenu.append( link.cloneNode( true ) );
 			}
 		}
+
+		if( items[ 'button-protondb' ] )
+		{
+			const link = document.createElement( 'a' );
+			link.className = 'btnv6_blue_hoverfade btn_medium btn_steamdb';
+			link.href = 'https://www.protondb.com/app/' + GetCurrentAppID() + '?utm_source=SteamDB';
+
+			const element = document.createElement( 'span' );
+			element.dataset.tooltipText = _t( 'view_on_protondb' );
+			link.appendChild( element );
+
+			const image = document.createElement( 'img' );
+			image.className = 'ico16';
+			image.src = GetLocalResource( 'icons/protondb.svg' );
+
+			element.appendChild( image );
+
+			container.insertBefore( link, container.firstChild );
+
+			container.insertBefore( document.createTextNode( ' ' ), link.nextSibling );
+
+			const responsiveMenu = document.querySelector( '.apphub_ResponsiveMenuCtn' );
+
+			if( responsiveMenu )
+			{
+				responsiveMenu.append( document.createTextNode( ' ' ) );
+				responsiveMenu.append( link.cloneNode( true ) );
+			}
+		}
 	}
 } );
diff --git a/scripts/store/app.js b/scripts/store/app.js
index 9381d41a5..b64ffef4a 100644
--- a/scripts/store/app.js
+++ b/scripts/store/app.js
@@ -14,6 +14,7 @@ else
 	GetOption( {
 		'button-app': true,
 		'button-pcgw': true,
+		'button-protondb': true,
 		'link-subid': true,
 		'online-stats': true,
 		'steamdb-lowest-price': true,
@@ -185,6 +186,64 @@ else
 			}
 		}
 
+		if( items[ 'button-protondb' ] )
+		{
+			let container = document.querySelector( '.apphub_OtherSiteInfo' );
+
+			if( !container )
+			{
+				// Steam China has no community hub
+				const headerStandardTop = document.querySelector( '.apphub_HeaderStandardTop' );
+
+				if( headerStandardTop )
+				{
+					container = document.createElement( 'div' );
+					container.className = 'apphub_OtherSiteInfo';
+					headerStandardTop.prepend( container );
+				}
+			}
+
+			if( container )
+			{
+				const link = document.createElement( 'a' );
+				link.className = 'btnv6_blue_hoverfade btn_medium btn_steamdb';
+				link.href = 'https://www.protondb.com/app/' + GetCurrentAppID() + '?utm_source=SteamDB';
+
+				const element = document.createElement( 'span' );
+				element.dataset.tooltipText = _t( 'view_on_protondb' );
+				link.appendChild( element );
+
+				const image = document.createElement( 'img' );
+				image.className = 'ico16';
+				image.src = GetLocalResource( 'icons/protondb.svg' );
+
+				element.appendChild( image );
+
+				container.insertBefore( link, container.firstChild );
+				container.insertBefore( document.createTextNode( ' ' ), link.nextSibling );
+			}
+
+			const lastLinkBar = document.querySelector( '#appDetailsUnderlinedLinks .linkbar:last-child' );
+
+			if( lastLinkBar )
+			{
+				const link = document.createElement( 'a' );
+				link.className = 'linkbar linkbar_steamdb';
+				link.href = 'https://www.protondb.com/app/' + GetCurrentAppID() + '?utm_source=SteamDB';
+
+				const image = document.createElement( 'img' );
+				image.src = GetLocalResource( 'icons/protondb.svg' );
+				link.append( image );
+
+				const span = document.createElement( 'span' );
+				span.className = 'social_account';
+				span.textContent = _t( 'view_on_protondb' );
+				link.append( span );
+
+				lastLinkBar.insertAdjacentElement( 'afterend', link );
+			}
+		}
+
 		if( items[ 'link-subid' ] )
 		{
 			// Find each "add to cart" button