Tüm .config dosyaları ilk yedekleme

This commit is contained in:
2026-03-28 03:21:14 +03:00
commit 4f7e8904be
7835 changed files with 1631041 additions and 0 deletions

View File

@@ -0,0 +1,285 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
color-scheme: dark;
font-size: 16px;
background: #1b1b24;
accent-color: #00aff4;
scrollbar-gutter: stable;
scrollbar-color: hsl(197deg 100% 30%) #1b1b24;
height: 100%;
}
body {
height: 100%;
margin: 0;
font:
1rem/1.5 system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
"Noto Sans",
"Liberation Sans",
Arial,
sans-serif,
"Apple Color Emoji",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Noto Color Emoji";
color: #c6d4df;
display: flex;
flex-direction: column;
}
a {
color: inherit;
}
a:hover {
color: #fff;
}
:target {
outline: 3px solid #00aff4;
outline-offset: 5px;
}
button {
cursor: pointer;
}
h1,
h2,
h3,
h4 {
margin: 0 0 0.5rem;
font-weight: normal;
line-height: 1;
}
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
h3 {
margin-top: 3rem;
font-size: 1.75rem;
font-weight: 600;
font-style: italic;
color: #fff;
text-transform: uppercase;
}
h4 {
font-size: 1.25rem;
}
h3:first-child {
margin-top: 0;
}
p {
margin: 0 0 1rem;
}
summary {
cursor: pointer;
}
summary:hover {
color: #fff;
text-decoration: underline;
}
.muted {
font-size: 80%;
color: #999;
}
.container {
margin: 0 auto;
padding: 1rem 2rem;
width: 100%;
max-width: 34rem;
}
.options-list {
margin-bottom: auto;
}
.built-in-checkboxes {
margin-top: 3rem;
color: #888;
}
header {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #0197cf;
background-color: #000;
color: #fff;
}
header .container {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
header .logo {
font-size: 20px;
}
header svg {
vertical-align: middle;
}
#localization {
background-color: #16161d;
color: #888;
direction: ltr;
}
#localization .container {
padding-top: 0.3rem;
padding-bottom: 0.3rem;
}
footer {
margin-top: 3rem;
padding-top: 3rem;
padding-bottom: 3rem;
border-top: 1px solid #0197cf;
background-color: #000;
color: #34c8fe;
text-align: center;
}
footer svg {
margin-bottom: 1rem;
}
footer p {
margin-bottom: 0.5rem;
}
.checkbox {
display: flex;
gap: 0.4rem;
margin-top: 0.4rem;
}
:focus,
.checkbox:focus {
outline: solid;
outline-color: #00aff4;
outline-offset: 4px;
outline-width: 2px;
}
.checkbox > input {
width: 1rem;
height: 1rem;
margin: 0;
margin-top: 0.3rem;
flex-shrink: 0;
}
#welcome {
padding-bottom: 1rem;
margin-top: 1rem;
color: #34c8fe;
text-wrap: balance;
text-wrap: pretty;
}
#welcome h2 {
font-size: 1.3rem;
font-weight: bold;
line-height: 1.4;
margin-bottom: 1rem;
}
#permissions {
background: #000;
color: #fff;
border-bottom: 0.4rem solid red;
margin-top: 1rem;
padding: 1rem;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
}
#steamchina-permissions {
margin-top: 3rem;
}
#star {
background: #000;
color: #fff;
margin-top: 1rem;
padding: 1rem;
border-radius: 1rem;
font-weight: bold;
}
#js-get-steamchina-permissions,
#js-get-permissions {
appearance: none;
border: 0;
border-radius: 0.5rem;
background: #0064ff;
color: #fff;
font: inherit;
font-weight: bold;
line-height: 1;
padding: 0.8rem 1rem;
width: 100%;
}
#js-get-steamchina-permissions:focus,
#js-get-steamchina-permissions:hover,
#js-get-permissions:focus,
#js-get-permissions:hover {
background: #00f;
color: #fff;
}
.search {
flex-grow: 1;
input {
background: #1b2838;
color: #fff;
border: 0;
border-radius: 10rem;
width: 100%;
font: inherit;
padding: 5px 12px 5px 40px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
background-size: 16px;
background-position: 12px center;
background-repeat: no-repeat;
}
}
@media (max-width: 34rem) {
.container {
padding: 1rem;
}
}

View File

@@ -0,0 +1,319 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#1b1b24">
<title data-msg="options">Options · SteamDB</title>
<link rel="stylesheet" href="options.css">
</head>
<body>
<script src="../scripts/common.js" defer></script>
<script src="options.js" defer></script>
<header>
<div class="container">
<div class="logo">
<svg width="32" height="32" viewBox="0 0 128 128" aria-hidden="true"><path fill="#fff" fill-rule="evenodd" d="M63.9 0C30.5 0 3.1 11.9.1 27.1l35.6 6.7c2.9-.9 6.2-1.3 9.6-1.3l16.7-10c-.2-2.5 1.3-5.1 4.7-7.2 4.8-3.1 12.3-4.8 19.9-4.8 5.2-.1 10.5.7 15 2.2 11.2 3.8 13.7 11.1 5.7 16.3-5.1 3.3-13.3 5-21.4 4.8l-22 7.9c-.2 1.6-1.3 3.1-3.4 4.5-5.9 3.8-17.4 4.7-25.6 1.9-3.6-1.2-6-3-7-4.8L2.5 38.4c2.3 3.6 6 6.9 10.8 9.8C5 53 0 59 0 65.5c0 6.4 4.8 12.3 12.9 17.1C4.8 87.3 0 93.2 0 99.6 0 115.3 28.6 128 64 128c35.3 0 64-12.7 64-28.4 0-6.4-4.8-12.3-12.9-17 8.1-4.8 12.9-10.7 12.9-17.1 0-6.5-5-12.6-13.4-17.4 8.3-5.1 13.3-11.4 13.3-18.2 0-16.5-28.7-29.9-64-29.9zm22.8 14.2c-5.2.1-10.2 1.2-13.4 3.3-5.5 3.6-3.8 8.5 3.8 11.1 7.6 2.6 18.1 1.8 23.6-1.8s3.8-8.5-3.8-11c-3.1-1-6.7-1.5-10.2-1.5zm.3 1.7c7.4 0 13.3 2.8 13.3 6.2 0 3.4-5.9 6.2-13.3 6.2s-13.3-2.8-13.3-6.2c0-3.4 5.9-6.2 13.3-6.2zM45.3 34.4c-1.6.1-3.1.2-4.6.4l9.1 1.7a10.8 5 0 1 1-8.1 9.3l-8.9-1.7c1 .9 2.4 1.7 4.3 2.4 6.4 2.2 15.4 1.5 20-1.5s3.2-7.2-3.2-9.3c-2.6-.9-5.7-1.3-8.6-1.3zM109 51v9.3c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-9.2c11.5 5.3 27.4 8.6 44.9 8.6 17.6 0 33.6-3.3 45.2-8.7zm0 34.6v8.8c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-8.8c11.6 5.1 27.4 8.2 45 8.2s33.5-3.1 45-8.2z"></path></svg>
<span data-msg="options"></span>
</div>
<div class="search">
<input type="search" id="search-field" maxlength="255" accesskey="/">
</div>
</div>
</header>
<div id="localization">
<div class="container">
<!-- This is intentionally not translated. -->
See an issue with localization? <a href="https://crowdin.com/project/steamdb-extension" target="_blank">Translate on Crowdin</a>
</div>
</div>
<div class="container options-list">
<div id="welcome" hidden>
<h2 data-msg="options_welcome_title"></h2>
<p data-msg="options_welcome_description"></p>
<ul>
<li data-msg="options_welcome_option1"></li>
<li data-msg="options_welcome_option2"></li>
<li data-msg="options_welcome_option3"></li>
</ul>
</div>
<div id="permissions">
<p data-msg="options_permissions_description"></p>
<button type="button" id="js-get-permissions" data-msg="options_permissions_button"></button>
</div>
<div id="star" hidden><a href="https://steamdb.info/extension/" target="_blank" data-msg="options_review"></a></div>
<h3 data-msg="options_header_website"></h3>
<details style="margin-bottom:1rem">
<summary data-msg="options_website_explanation"></summary>
<p data-msg="options_website_explanation1"></p>
<p data-msg="options_website_explanation2" style="font-weight:bold"></p>
<p data-msg="options_website_explanation3"></p>
<p data-msg="options_website_explanation4"></p>
</details>
<div class="checkbox">
<input type="checkbox" class="option-check" data-option="steamdb-highlight" id="checkbox-steamdb-highlight" checked>
<div>
<label for="checkbox-steamdb-highlight" data-msg="options_website_highlight"></label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="steamdb-highlight-family" checked>
<div data-msg="options_website_family"></div>
</label>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_website_highlight1"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_website_highlight2"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_website_highlight3"></div>
</div>
</div>
</div>
<h3 data-msg="options_header_extra_data"></h3>
<details style="margin-bottom:1rem">
<summary data-msg="options_extra_data"></summary>
<p data-msg="options_extra_data_prices"></p>
<p data-msg="options_extra_data_players"></p>
<p data-msg="options_extra_data_achievement_groups"></p>
</details>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="steamdb-lowest-price" checked>
<div data-msg="options_steamdb_lowest_price"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="online-stats" checked>
<div data-msg="options_online_stats"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="steamdb-last-update" checked>
<div data-msg="options_steamdb_last_update"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="achievements-group-updates" checked>
<div data-msg="options_achievement_groups"></div>
</label>
<h3 data-msg="options_header_buttons_and_links"></h3>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="button-app" checked>
<div data-msg="options_button_app"></div>
</label>
<label class="checkbox">
<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-sub" checked>
<div data-msg="options_button_sub"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="button-gamehub" checked>
<div data-msg="options_button_gamehub"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="button-gamecards" checked>
<div data-msg="options_button_gamecards"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="steamdb-dev-pub-links" checked>
<div data-msg="options_steamdb_dev_pub_links"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="link-subid" checked>
<div data-msg="options_link_subid"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="link-subid-widget" checked>
<div data-msg="options_link_subid_widget"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="link-accountpage" checked>
<div data-msg="options_link_accountpage"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="profile-calculator" checked>
<div data-msg="options_profile_calculator"></div>
</label>
<h3 data-msg="options_header_inventory" id="inventory"></h3>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-inventory-sidebar" checked>
<div data-msg="options_enhancement_inventory_sidebar"></div>
</label>
<div class="checkbox">
<input type="checkbox" class="option-check" data-option="link-inventory" id="checkbox-link-inventory" checked>
<label for="checkbox-link-inventory" data-msg="options_link_inventory"></label>
</div>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-inventory-no-sell-reload" checked>
<div data-msg="options_enhancement_inventory_no_sell_reload"></div>
</label>
<div class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-inventory-quick-sell" id="checkbox-enhancement-inventory-quick-sell" checked>
<div>
<label for="checkbox-enhancement-inventory-quick-sell" data-msg="options_enhancement_inventory_quick_sell"></label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-inventory-quick-sell-auto">
<div data-msg="options_enhancement_inventory_quick_sell_auto"></div>
</label>
</div>
</div>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-inventory-badge-info" checked>
<div data-msg="options_enhancement_inventory_badge_info"></div>
</label>
<h3 data-msg="options_header_trade_offers"></h3>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-tradeoffer-url-items" checked>
<div>
<div data-msg="options_enhancement_tradeoffer_url_items"></div>
<div><a href="https://github.com/SteamDatabase/BrowserExtension#trade-offers-support-for-for_item-and-my_item" target="_blank" class="muted" data-msg="options_github_explanation"></a></div>
</div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-tradeoffer-no-gift-confirm">
<div data-msg="options_enhancement_tradeoffer_no_gift_confirm"></div>
</label>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_enhancement_tradeoffer_better_errors"></div>
</div>
<h3 data-msg="options_header_achievements"></h3>
<div class="checkbox">
<input type="checkbox" class="option-check" data-option="improve-achievements" checked id="checkbox-improve-achievements">
<div>
<label for="checkbox-improve-achievements" data-msg="options_improve_achievements"></label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="spoiler-achievements" checked>
<div data-msg="options_spoiler_achievements"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="achievements-global-unlock" checked>
<div data-msg="options_achievements_global_unlock"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="achievements-group-updates" checked>
<div data-msg="options_achievement_groups"></div>
</label>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_modernized_achievements"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div><a href="https://steamcommunity.com/my/stats/CSGO" target="_blank" data-msg="options_builtin_achievements_csrating"></a></div>
</div>
</div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div>
<div data-msg="options_builtin_achievements_global"></div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_builtin_achievements_link"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_builtin_achievements_locked"></div>
</div>
</div>
</div>
<h3 data-msg="options_header_enhancements"></h3>
<label class="checkbox" id="skip_agecheck">
<input type="checkbox" class="option-check" data-option="enhancement-skip-agecheck">
<div>
<div data-msg="options_enhancement_skip_agecheck"></div>
<div class="muted" data-msg="options_enhancement_skip_agecheck_description"></div>
</div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-no-linkfilter">
<div data-msg="options_enhancement_no_linkfilter"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-market-ssa">
<div data-msg="options_enhancement_market_ssa"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-hide-install-button" checked>
<div data-msg="options_enhancement_hide_install_button"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-hide-mobile-app-button">
<div data-msg="options_enhancement_hide_mobile_app_button"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="steamdb-rating" checked>
<div data-msg="options_steamdb_rating"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-appicon" checked>
<div data-msg="options_enhancement_appicon"></div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="prevent-store-images">
<div>
<div data-msg="options_prevent_store_images"></div>
<div class="muted" data-msg="options_prevent_store_images_description"></div>
</div>
</label>
<label class="checkbox">
<input type="checkbox" class="option-check" data-option="enhancement-award-popup-url" checked>
<div>
<span data-msg="options_enhancement_award_popup_url"></span>
<div><a href="https://github.com/SteamDatabase/BrowserExtension#automatically-open-grant-an-award-popup-from-a-link-using-award" target="_blank" class="muted" data-msg="options_github_explanation"></a></div>
</div>
</label>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_builtin_collapse_library"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_builtin_card_drops"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_builtin_queue_cheat"></div>
</div>
<div class="checkbox">
<input type="checkbox" class="option-check" checked disabled>
<div data-msg="options_builtin_multibuy_redirect"></div>
</div>
</div>
<footer>
<p data-msg="options_footer1"></p>
<p data-msg="options_footer2"></p>
<p class="built-in-checkboxes" data-msg="options_disabled_checkboxes"></p>
</footer>
</body>
</html>

View File

@@ -0,0 +1,291 @@
'use strict';
( ( () =>
{
document.body.dir = _t( '@@bidi_dir' );
/** @type {NodeListOf<HTMLElement>} */
const localizable = document.querySelectorAll( '[data-msg]' );
for( const element of localizable )
{
const token = element.dataset.msg;
let msg = null;
if( token === 'options_extra_data_players' )
{
msg = _t( token, [ _t( 'options_online_stats' ), _t( 'options_steamdb_last_update' ) ] );
}
else if( token === 'options_extra_data_prices' )
{
msg = _t( token, [ _t( 'options_steamdb_lowest_price' ) ] );
}
else if( token === 'options_extra_data_achievement_groups' )
{
msg = _t( token, [ _t( 'options_achievement_groups' ) ] );
}
else
{
msg = _t( token );
}
if( !msg )
{
console.error( 'Missing localization', element, token );
}
if( element.tagName === 'TITLE' )
{
msg += ' · SteamDB';
}
element.innerHTML = msg;
}
if( location.search.includes( 'welcome=1' ) )
{
document.getElementById( 'welcome' ).hidden = false;
}
let starDismissed = false;
/** @type {NodeListOf<HTMLInputElement>} */
const checkboxes = document.querySelectorAll( '.option-check:not(:disabled)' );
/** @type {Record<string, HTMLInputElement[]>} */
const options =
{
'clicked-star': null,
};
/**
* @this {HTMLInputElement}
* @param {Event} e
*/
const CheckboxChange = function( e )
{
if( !e.isTrusted )
{
return;
}
this.disabled = true;
SetOption( this.dataset.option, this.checked );
};
for( let i = 0; i < checkboxes.length; i++ )
{
const element = checkboxes[ i ];
const item = element.dataset.option;
if( !options[ item ] )
{
options[ item ] = [ element ];
}
else
{
options[ item ].push( element );
}
element.addEventListener( 'change', CheckboxChange );
}
GetOption( Object.keys( options ), ( items ) =>
{
for( const item in items )
{
if( item === 'clicked-star' )
{
starDismissed = true;
document.getElementById( 'star' ).hidden = true;
continue;
}
for( const element of options[ item ] )
{
element.checked = items[ item ];
}
}
} );
ExtensionApi.storage.sync.onChanged.addListener( ( changes ) =>
{
const changedItems = Object.keys( changes );
for( const item of changedItems )
{
if( options[ item ] )
{
for( const element of options[ item ] )
{
element.checked = !!changes[ item ].newValue;
element.disabled = false;
}
}
}
} );
// Must be synced with host_permissions in manifest.json
const permissions = {
origins: [
'https://steamdb.info/*',
'https://steamcommunity.com/*',
'https://*.steampowered.com/*',
],
};
document.getElementById( 'js-get-permissions' ).addEventListener( 'click', ( e ) =>
{
e.preventDefault();
try
{
ExtensionApi.permissions.request( permissions ).catch( ex =>
{
alert( `Failed to request permissions: ${ex.message}` );
} );
}
catch( ex )
{
alert( `Failed to request permissions: ${ex}` );
}
} );
ExtensionApi.permissions.onAdded.addListener( HideButtonIfAllPermissionsGranted );
ExtensionApi.permissions.onRemoved.addListener( HideButtonIfAllPermissionsGranted );
HideButtonIfAllPermissionsGranted();
function HideButtonIfAllPermissionsGranted()
{
ExtensionApi.permissions.contains( permissions, ( result ) =>
{
document.getElementById( 'permissions' ).hidden = result;
document.getElementById( 'star' ).hidden = starDismissed || !result;
} );
}
let storeHref = null;
if( ExtensionApi.runtime.id === 'kdbmhfkmnlmbkgbabkdealhhbfhlmmon' )
{
storeHref = 'https://chromewebstore.google.com/detail/steamdb/kdbmhfkmnlmbkgbabkdealhhbfhlmmon?utm_source=Options';
}
else if( ExtensionApi.runtime.id === 'hjknpdomhlodgaebegjopkmfafjpbblg' )
{
storeHref = 'https://microsoftedge.microsoft.com/addons/detail/steamdb/hjknpdomhlodgaebegjopkmfafjpbblg?utm_source=Options';
}
else if( ExtensionApi.runtime.id === 'firefox-extension@steamdb.info' )
{
storeHref = 'https://addons.mozilla.org/firefox/addon/steam-database/?utm_source=Options';
}
/** @type {HTMLAnchorElement} */
const storeUrl = document.querySelector( '#star a' );
storeUrl.addEventListener( 'click', () =>
{
starDismissed = true;
SetOption( 'clicked-star', true );
document.getElementById( 'star' ).hidden = true;
} );
if( storeHref !== null )
{
storeUrl.href = storeHref;
}
// Search functionality for filtering options
/** @type {HTMLInputElement} */
const searchField = document.querySelector( '#search-field' );
searchField.placeholder = _t( 'search' );
searchField.addEventListener( 'input', function()
{
const searchVal = this.value.trim().normalize( 'NFD' ).toLocaleUpperCase();
/** @type {NodeListOf<HTMLElement>} */
const sections = document.querySelectorAll( 'h3, .checkbox, label.checkbox, details' );
if( searchVal.length === 0 )
{
for( const section of sections )
{
section.hidden = false;
}
return;
}
for( const section of sections )
{
section.hidden = true;
}
/** @type {Set<Element>} */
const visibleHeaders = new Set();
/** @type {NodeListOf<HTMLElement>} */
const checkboxContainers = document.querySelectorAll( '.checkbox, label.checkbox' );
for( const container of checkboxContainers )
{
const textContent = container.textContent.trim().normalize( 'NFD' ).toLocaleUpperCase();
const isMatch = textContent.includes( searchVal );
if( !isMatch )
{
continue;
}
container.hidden = false;
let currentElement = container.previousElementSibling;
while( currentElement )
{
if( currentElement.tagName === 'DETAILS' )
{
visibleHeaders.add( currentElement );
}
if( currentElement.tagName === 'H3' )
{
visibleHeaders.add( currentElement );
break;
}
currentElement = currentElement.previousElementSibling;
}
}
// Show relevant headers
for( const header of visibleHeaders )
{
if( header instanceof HTMLElement )
{
header.hidden = false;
}
}
} );
// Focus search field when pressing '/' or 's'
document.addEventListener( 'keydown', ( e ) =>
{
if( e.ctrlKey || e.metaKey )
{
return;
}
if( e.target instanceof Element && [ 'INPUT', 'TEXTAREA', 'SELECT', 'BUTTON' ].includes( e.target.tagName ) )
{
return;
}
if( e.code === 'Slash' || e.code === 'KeyS' || e.key === '/' || e.key === 's' )
{
e.preventDefault();
searchField.focus();
}
} );
} )() );

View File

@@ -0,0 +1,90 @@
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--bg-color: #000;
--link-color: #fff;
--link-color-hover: #34c8fe;
}
body {
min-width: min-content;
margin: 0;
padding: 0;
background: var(--bg-color);
color: var(--link-color);
font:
1rem/1.5 system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
"Noto Sans",
"Liberation Sans",
Arial,
sans-serif;
}
.links {
display: flex;
flex-direction: column;
}
.link {
display: flex;
align-items: center;
padding: 0.5em 1em;
gap: 0.7em;
text-decoration: none;
color: inherit;
> svg {
width: 1em;
height: 1em;
flex-shrink: 0;
}
&:hover {
color: var(--link-color-hover);
background-color: rgb(0 100 255 / 20%);
> b,
> span {
text-decoration: underline;
}
}
&.options-link {
color: var(--link-color-hover);
}
}
.separator {
height: 1px;
background: rgb(255 255 255 / 30%);
}
@media (prefers-color-scheme: light) {
:root {
--bg-color: #fff;
--link-color: #000;
--link-color-hover: #00f;
}
.separator {
background: rgb(0 0 0 / 30%);
}
}
@media (pointer: coarse) {
body {
font-size: 1.2rem;
}
.link {
padding: 0.75em 1em;
}
}

View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SteamDB</title>
<meta name="color-scheme" content="light dark">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="popup.css">
<script src="popup.js" defer></script>
</head>
<body>
<div class="links">
<a href="https://steamdb.info/" target="_blank" class="link">
<svg viewBox="0 0 128 128"><path fill-rule="evenodd" fill="currentColor" d="M63.9 0C30.5 0 3.1 11.9.1 27.1l35.6 6.7c2.9-.9 6.2-1.3 9.6-1.3l16.7-10c-.2-2.5 1.3-5.1 4.7-7.2 4.8-3.1 12.3-4.8 19.9-4.8 5.2-.1 10.5.7 15 2.2 11.2 3.8 13.7 11.1 5.7 16.3-5.1 3.3-13.3 5-21.4 4.8l-22 7.9c-.2 1.6-1.3 3.1-3.4 4.5-5.9 3.8-17.4 4.7-25.6 1.9-3.6-1.2-6-3-7-4.8L2.5 38.4c2.3 3.6 6 6.9 10.8 9.8C5 53 0 59 0 65.5c0 6.4 4.8 12.3 12.9 17.1C4.8 87.3 0 93.2 0 99.6 0 115.3 28.6 128 64 128c35.3 0 64-12.7 64-28.4 0-6.4-4.8-12.3-12.9-17 8.1-4.8 12.9-10.7 12.9-17.1 0-6.5-5-12.6-13.4-17.4 8.3-5.1 13.3-11.4 13.3-18.2 0-16.5-28.7-29.9-64-29.9zm22.8 14.2c-5.2.1-10.2 1.2-13.4 3.3-5.5 3.6-3.8 8.5 3.8 11.1 7.6 2.6 18.1 1.8 23.6-1.8s3.8-8.5-3.8-11c-3.1-1-6.7-1.5-10.2-1.5zm.3 1.7c7.4 0 13.3 2.8 13.3 6.2 0 3.4-5.9 6.2-13.3 6.2s-13.3-2.8-13.3-6.2c0-3.4 5.9-6.2 13.3-6.2zM45.3 34.4c-1.6.1-3.1.2-4.6.4l9.1 1.7a10.8 5 0 1 1-8.1 9.3l-8.9-1.7c1 .9 2.4 1.7 4.3 2.4 6.4 2.2 15.4 1.5 20-1.5s3.2-7.2-3.2-9.3c-2.6-.9-5.7-1.3-8.6-1.3zM109 51v9.3c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-9.2c11.5 5.3 27.4 8.6 44.9 8.6 17.6 0 33.6-3.3 45.2-8.7zm0 34.6v8.8c0 11-20.2 19.9-45 19.9-24.9 0-45-8.9-45-19.9v-8.8c11.6 5.1 27.4 8.2 45 8.2s33.5-3.1 45-8.2z"></path></svg>
<b>SteamDB</b>
</a>
<div class="separator"></div>
<a href="https://steamdb.info/charts/" target="_blank" class="link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16v5"/><path d="M16 14v7"/><path d="M20 10v11"/><path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15"/><path d="M4 18v3"/><path d="M8 14v7"/></svg>
<span data-msg="popup_charts"></span>
</a>
<a href="https://steamdb.info/sales/" target="_blank" class="link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="19" x2="5" y1="5" y2="19"/><circle cx="6.5" cy="6.5" r="2.5"/><circle cx="17.5" cy="17.5" r="2.5"/></svg>
<span data-msg="popup_sales"></span>
</a>
<a href="https://steamdb.info/calendar/" target="_blank" class="link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>
<span data-msg="popup_calendar"></span>
</a>
<a href="https://steamdb.info/patchnotes/" target="_blank" class="link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
<span data-msg="popup_patches"></span>
</a>
<a href="https://steamdb.info/calculator/" target="_blank" class="link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z"/><path d="M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8"/><path d="M12 17.5v-11"/></svg>
<span data-msg="popup_calculator"></span>
</a>
<div class="separator"></div>
<a href="#" target="_blank" class="link options-link">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
<span data-msg="options"></span>
</a>
</div>
</body>
</html>

View File

@@ -0,0 +1,20 @@
'use strict';
( () =>
{
const browserApi = typeof browser !== 'undefined' ? browser : chrome;
document.body.dir = browserApi.i18n.getMessage( '@@bidi_dir' );
/** @type {NodeListOf<HTMLElement>} */
const localizable = document.querySelectorAll( '[data-msg]' );
for( const element of localizable )
{
element.textContent = browserApi.i18n.getMessage( element.dataset.msg );
}
/** @type {HTMLAnchorElement} */
const optionsLink = document.querySelector( '.options-link' );
optionsLink.href = browserApi.runtime.getURL( 'options/options.html' );
} )();