Get a clear view of global Xbox pricing. PriceLens adds a powerful, customizable dashboard to game pages, showing you what a game costs in different countries—all in your home currency. Pin your favorite stores and let PriceLens help you focus on the best deals.
// ==UserScript==
// @name Xbox PriceLens
// @namespace https://github.com/sinazadeh/userscripts
// @version 1.0.4
// @description Get a clear view of global Xbox pricing. PriceLens adds a powerful, customizable dashboard to game pages, showing you what a game costs in different countries—all in your home currency. Pin your favorite stores and let PriceLens help you focus on the best deals.
// @author TheSina
// @match *://www.xbox.com/*/games/store/*
// @connect cdn.jsdelivr.net
// @grant GM_xmlhttpRequest
// @grant GM_getValue
// @grant GM_setValue
// @license MIT
// ==/UserScript==
/* jshint esversion: 11 */
(async function () {
'use strict';
// 1) Centralized Configuration
const CONFIG = {
SELECTORS: {
priceText: '.Price-module__boldText___1i2Li',
insertionPoint: '.Price-module__priceBaseContainer___j9jGE',
buyButton: 'button[data-m*="Buy"]',
banner: '.xbox-banner',
},
API_BASE_URL:
'https://cdn.jsdelivr.net/npm/@fawazahmed0/currency-api@latest/v1/currencies/',
RETRY_DELAY: 750,
CACHE: {
KEY_RATES_PREFIX: 'xboxCurrencyRates_v4.2_',
KEY_TIMESTAMP_PREFIX: 'xboxCurrencyRatesTS_v4.2_',
TTL: 12 * 60 * 60 * 1000,
},
};
// 2) Style Injection
function injectStyles() {
const style = document.createElement('style');
style.textContent = `
.xbox-banner,
.xbox-row,
.xbox-modal,
.xbox-modal-section,
.xbox-settings-btn {
font-family:
system-ui,
'Noto Sans',
'Segoe UI',
'Noto Color Emoji',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 14px;
}
.xbox-banner {
position: relative;
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
margin: 16px 0;
padding: 12px 16px;
font-size: 0.95rem;
line-height: 1.4;
color: #333;
min-height: 50px;
}
.xbox-rows {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-content: flex-start;
}
.xbox-row {
flex: 1 1 calc(50% - 8px);
background: #f9f9f9;
padding: 8px;
border-radius: 4px;
direction: ltr;
text-align: left;
border-left: 3px solid transparent;
transition:
background-color 0.2s,
border-color 0.2s;
}
.xbox-row.default-store-highlight {
background-color: #e6ffed;
border-left-color: #4caf50;
}
.xbox-row.error {
color: #d32f2f;
}
.xbox-row.loading {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #888;
background: none;
}
.xbox-row .error-text {
color: currentColor;
}
.rtl-text {
direction: rtl;
unicode-bidi: embed;
display: inline-block;
}
.xbox-settings-btn {
position: absolute;
bottom: 8px;
right: 8px;
background: none;
border: none;
cursor: pointer;
color: currentColor;
padding: 4px;
font-size: 1.2rem;
z-index: 1;
}
.xbox-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
z-index: 9999;
}
.xbox-overlay.show {
opacity: 1;
}
.xbox-modal {
background: #fff;
color: #000;
padding: 20px;
border-radius: 8px;
width: 500px;
max-width: 95%;
font-size: 1rem;
line-height: 1.4;
}
.xbox-modal h3 {
margin: 0 0 16px;
}
.xbox-modal h4 {
margin: 16px 0 8px;
}
.stores-list {
column-count: 2;
column-gap: 20px;
}
.xbox-modal-section {
margin-bottom: 16px;
}
.xbox-modal-section select {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.xbox-modal-actions {
text-align: right;
margin-top: 24px;
}
.xbox-modal-actions-links {
margin-bottom: 16px;
}
.xbox-modal-actions-links a {
margin-right: 12px;
cursor: pointer;
}
.xbox-modal-actions button:not(:last-child) {
margin-right: 8px;
}
.switch {
display: flex;
align-items: center;
margin: 6px 0;
cursor: pointer;
break-inside: avoid-column;
}
.switch input {
opacity: 0;
width: 1px;
height: 1px;
}
.switch .slider {
width: 36px;
height: 18px;
background: #ccc;
border-radius: 9px;
margin-right: 10px;
position: relative;
transition: background 0.2s;
}
.switch .slider::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
top: 1px;
left: 1px;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.switch input:checked + .slider {
background: #4caf50;
}
.switch input:checked + .slider::after {
transform: translateX(18px);
}
.switch input:focus-visible + .slider {
box-shadow: 0 0 0 2px #0078d4;
}
@media (max-width: 420px) {
.stores-list {
column-count: 1;
}
}
@media (prefers-color-scheme: dark) {
.xbox-banner {
background: #1e1e1e;
color: #ddd;
}
.xbox-row {
background: #2a2a2a;
}
.xbox-row.default-store-highlight {
background-color: #1a3d20;
border-left-color: #66bb6a;
}
.xbox-row.loading {
color: #666;
}
.xbox-row.error {
color: #ef5350;
}
.xbox-modal {
background: #2a2a2a;
color: #ccc;
}
.xbox-modal-section select {
background: #333;
color: #ccc;
border-color: #555;
}
.xbox-settings-btn {
color: #fff;
}
}
`;
document.head.appendChild(style);
}
// 3) Currency & Tax Definitions
const CURRENCIES = [
{
code: 'ar',
api: 'ars',
region: 'es-ar',
flag: '🇦🇷',
name: 'Argentina Store',
link: 'Argentina Store',
tax: 0.7,
decimal: ',',
fmt: x =>
`ARS${new Intl.NumberFormat('es-AR', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x).replace(/\s/g, '')}`,
},
{
code: 'au',
api: 'aud',
region: 'en-au',
flag: '🇦🇺',
name: 'Australia Store',
link: 'Australia Store',
tax: 0,
decimal: '.',
fmt: x =>
`AU$${new Intl.NumberFormat('en-AU', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'br',
api: 'brl',
region: 'pt-br',
flag: '🇧🇷',
name: 'Brazil Store',
link: 'Brazil Store',
tax: 0,
decimal: ',',
fmt: x =>
new Intl.NumberFormat('pt-BR', {
style: 'currency',
currency: 'BRL',
})
.format(x)
.replace(/\s/g, ''),
},
{
code: 'ca',
api: 'cad',
region: 'en-ca',
flag: '🇨🇦',
name: 'Canada Store',
link: 'Canada Store',
tax: 0,
decimal: '.',
fmt: x =>
`CAD ${new Intl.NumberFormat('en-CA', {style: 'currency', currency: 'CAD'}).format(x)}`,
showPlusTax: true,
},
{
code: 'ch',
api: 'chf',
region: 'de-ch',
flag: '🇨🇭',
name: 'Switzerland Store',
link: 'Switzerland Store',
tax: 0,
decimal: '.',
fmt: x =>
`CHF ${new Intl.NumberFormat('de-CH', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'cl',
api: 'clp',
region: 'es-cl',
flag: '🇨🇱',
name: 'Chile Store',
link: 'Chile Store',
tax: 0,
decimal: ',',
fmt: x => `$${new Intl.NumberFormat('es-CL').format(x)}`,
showPlusTax: true,
},
{
code: 'co',
api: 'cop',
region: 'es-co',
flag: '🇨🇴',
name: 'Colombia Store',
link: 'Colombia Store',
tax: 0,
decimal: ',',
fmt: x => `COP$${new Intl.NumberFormat('es-CO').format(x)}`,
showPlusTax: true,
},
{
code: 'cz',
api: 'czk',
region: 'cs-cz',
flag: '🇨🇿',
name: 'Czechia Store',
link: 'Czechia Store',
tax: 0,
decimal: ',',
fmt: x =>
`${new Intl.NumberFormat('cs-CZ', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)} Kč`,
},
{
code: 'gb',
api: 'gbp',
region: 'en-gb',
flag: '🇬🇧',
name: 'UK Store',
link: 'UK Store',
tax: 0,
decimal: '.',
fmt: x =>
new Intl.NumberFormat('en-GB', {
style: 'currency',
currency: 'GBP',
}).format(x),
},
{
code: 'hk',
api: 'hkd',
region: 'en-hk',
flag: '🇭🇰',
name: 'Hong Kong Store',
link: 'Hong Kong Store',
tax: 0,
decimal: '.',
fmt: x =>
`HK$${new Intl.NumberFormat('en-HK', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'hu',
api: 'huf',
region: 'hu-hu',
flag: '🇭🇺',
name: 'Hungary Store',
link: 'Hungary Store',
tax: 0,
decimal: ',',
fmt: x =>
`${new Intl.NumberFormat('hu-HU', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)} HUF`,
},
{
code: 'in',
api: 'inr',
region: 'en-in',
flag: '🇮🇳',
name: 'India Store',
link: 'India Store',
tax: 0.18,
decimal: '.',
fmt: x =>
new Intl.NumberFormat('en-IN', {
style: 'currency',
currency: 'INR',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
.format(x)
.replace(/\s/g, ''),
},
{
code: 'jp',
api: 'jpy',
region: 'ja-jp',
flag: '🇯🇵',
name: 'Japan Store',
link: 'Japan Store',
tax: 0,
decimal: '.',
fmt: x =>
new Intl.NumberFormat('ja-JP', {
style: 'currency',
currency: 'JPY',
}).format(x),
},
{
code: 'kr',
api: 'krw',
region: 'ko-kr',
flag: '🇰🇷',
name: 'South Korea Store',
link: 'South Korea Store',
tax: 0,
decimal: '.',
fmt: x =>
new Intl.NumberFormat('ko-KR', {
style: 'currency',
currency: 'KRW',
})
.format(x)
.replace(/\s/g, ''),
},
{
code: 'mx',
api: 'mxn',
region: 'es-mx',
flag: '🇲🇽',
name: 'Mexico Store',
link: 'Mexico Store',
tax: 0,
decimal: '.',
fmt: x =>
`MXN$${new Intl.NumberFormat('es-MX', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'no',
api: 'nok',
region: 'nb-no',
flag: '🇳🇴',
name: 'Norway Store',
link: 'Norway Store',
tax: 0,
decimal: ',',
fmt: x =>
`kr ${new Intl.NumberFormat('nb-NO', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'nz',
api: 'nzd',
region: 'en-nz',
flag: '🇳🇿',
name: 'New Zealand Store',
link: 'New Zealand Store',
tax: 0,
decimal: '.',
fmt: x =>
`NZ$${new Intl.NumberFormat('en-NZ', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'pl',
api: 'pln',
region: 'pl-pl',
flag: '🇵🇱',
name: 'Poland Store',
link: 'Poland Store',
tax: 0,
decimal: ',',
fmt: x =>
`${new Intl.NumberFormat('pl-PL', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)} zł`,
},
{
code: 'sa',
api: 'sar',
region: 'ar-sa',
flag: '🇸🇦',
name: 'Saudi Arabia Store',
link: 'Saudi Arabia Store',
tax: 0,
decimal: '.',
fmt: x =>
new Intl.NumberFormat('ar-SA', {
style: 'currency',
currency: 'SAR',
}).format(x),
preParse: str => str.replace(/ر\.س\./g, ''),
isRTL: true,
},
{
code: 'se',
api: 'sek',
region: 'sv-se',
flag: '🇸🇪',
name: 'Sweden Store',
link: 'Sweden Store',
tax: 0,
decimal: ',',
fmt: x =>
`${new Intl.NumberFormat('sv-SE', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)} kr`,
},
{
code: 'sg',
api: 'sgd',
region: 'en-sg',
flag: '🇸🇬',
name: 'Singapore Store',
link: 'Singapore Store',
tax: 0,
decimal: '.',
fmt: x =>
`S$${new Intl.NumberFormat('en-SG', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
{
code: 'tr',
api: 'try',
region: 'tr-TR',
flag: '🇹🇷',
name: 'Turkey Store',
link: 'Turkey Store',
tax: 0,
decimal: ',',
fmt: x =>
new Intl.NumberFormat('tr-TR', {
style: 'currency',
currency: 'TRY',
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
.format(x)
.replace(/\s/g, ''),
},
{
code: 'tw',
api: 'twd',
region: 'zh-tw',
flag: '🇹🇼',
name: 'Taiwan Store',
link: 'Taiwan Store',
tax: 0,
decimal: '.',
fmt: x => `NT$${new Intl.NumberFormat('zh-TW').format(x)}`,
},
{
code: 'us',
api: 'usd',
region: 'en-us',
flag: '🇺🇸',
name: 'US Store',
link: 'US Store',
tax: 0,
decimal: '.',
fmt: x =>
new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
}).format(x),
showPlusTax: true,
},
{
code: 'za',
api: 'zar',
region: 'en-za',
flag: '🇿🇦',
name: 'South Africa Store',
link: 'South Africa Store',
tax: 0,
decimal: ',',
fmt: x =>
`R ${new Intl.NumberFormat('en-ZA', {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(x)}`,
},
];
// 4) Preference Management Module
const Prefs = {
visible: {},
sortOrder: 'lowest',
defaultStore: 'us',
defaults: ['us', 'tr', 'in', 'ar'],
async load() {
this.visible = await GM_getValue('visibleCurrencies_v4.2', {});
this.sortOrder = await GM_getValue(
'currencySortOrder_v4.2',
'lowest',
);
this.defaultStore = await GM_getValue('defaultStore_v4.2', 'us');
let needsSave = false;
CURRENCIES.forEach(c => {
if (this.visible[c.code] === undefined) {
this.visible[c.code] = this.defaults.includes(c.code);
needsSave = true;
}
});
if (needsSave) await this.save();
},
async save() {
await GM_setValue('visibleCurrencies_v4.2', this.visible);
await GM_setValue('currencySortOrder_v4.2', this.sortOrder);
await GM_setValue('defaultStore_v4.2', this.defaultStore);
},
};
// 5) Data Fetching, Caching & Parsing
async function getRates(baseCurrencyApi) {
const now = Date.now();
const cacheKeyRates = `${CONFIG.CACHE.KEY_RATES_PREFIX}${baseCurrencyApi}`;
const cacheKeyTs = `${CONFIG.CACHE.KEY_TIMESTAMP_PREFIX}${baseCurrencyApi}`;
const ts = await GM_getValue(cacheKeyTs, 0);
const cachedRates = await GM_getValue(cacheKeyRates, null);
if (cachedRates && now - ts < CONFIG.CACHE.TTL) return cachedRates;
return new Promise(resolve => {
GM_xmlhttpRequest({
method: 'GET',
url: `${CONFIG.API_BASE_URL}${baseCurrencyApi}.json`,
onload: async r => {
if (r.status >= 200 && r.status < 300) {
try {
const data = JSON.parse(r.responseText)[
baseCurrencyApi
];
await GM_setValue(cacheKeyRates, data);
await GM_setValue(cacheKeyTs, now);
resolve(data);
} catch (e) {
console.error('API parse failed:', e);
resolve(null);
}
} else {
console.error('API request failed:', r.statusText);
resolve(null);
}
},
onerror: e => {
console.error('API network error:', e);
resolve(null);
},
});
});
}
function fetchWithRetry(currency, url, retries = 1) {
return new Promise(resolve => {
GM_xmlhttpRequest({
method: 'GET',
url: url,
onload: r => {
if (r.status >= 500 && retries > 0) {
setTimeout(
() =>
resolve(
fetchWithRetry(currency, url, retries - 1),
),
CONFIG.RETRY_DELAY,
);
return;
}
let priceStr = null,
error = null;
if (r.status >= 200 && r.status < 300) {
const doc = new DOMParser().parseFromString(
r.responseText,
'text/html',
);
priceStr =
doc
.querySelector(CONFIG.SELECTORS.priceText)
?.textContent.replace(/\+\s*$/, '')
.trim() || null;
if (!priceStr) error = 'Price not found';
} else {
error = `Request failed (${r.status})`;
}
resolve({
code: currency.code,
priceStr,
error,
});
},
onerror: () => {
if (retries > 0) {
setTimeout(
() =>
resolve(
fetchWithRetry(currency, url, retries - 1),
),
CONFIG.RETRY_DELAY,
);
} else {
resolve({
code: currency.code,
priceStr: null,
error: 'Network Error',
});
}
},
});
});
}
function fetchAllPrices(urls, currenciesToFetch) {
const promises = currenciesToFetch.map(c =>
fetchWithRetry(c, urls[c.code]),
);
return Promise.all(promises);
}
function parsePrice(priceString, separator = '.') {
const cleanRegex = new RegExp(`[^\\d\\${separator}]`, 'g');
const cleaned = priceString.replace(cleanRegex, '');
const normalized =
separator === '.' ? cleaned : cleaned.replace(separator, '.');
return parseFloat(normalized);
}
// 6) UI & DOM Manipulation
function createBanner() {
const banner = document.createElement('div');
banner.className = 'xbox-banner';
const rowsContainer = document.createElement('div');
rowsContainer.className = 'xbox-rows';
const settingsBtn = document.createElement('button');
settingsBtn.className = 'xbox-settings-btn';
settingsBtn.textContent = '⚙️';
settingsBtn.title = 'Settings';
settingsBtn.setAttribute('aria-label', 'Price Settings');
banner.append(rowsContainer, settingsBtn);
return {
banner,
rowsContainer,
settingsBtn,
};
}
function updateBannerDisplay(container, lines) {
const sorted = [...lines]
.filter(item => Prefs.visible[item.code])
.sort((a, b) => {
// avoid the “line break before ‘?’” warning by using an if/else
if (Prefs.sortOrder === 'alpha') {
return a.name.localeCompare(b.name);
}
return a.convertedPrice - b.convertedPrice;
});
container.innerHTML = '';
if (sorted.length === 0) {
container.innerHTML = `<div class="xbox-row">No stores selected.</div>`;
return;
}
sorted.forEach(item => {
const row = document.createElement('div');
row.className = 'xbox-row';
if (item.error) {
row.classList.add('error');
}
if (item.code === Prefs.defaultStore) {
row.classList.add('default-store-highlight');
}
row.innerHTML = item.html;
container.appendChild(row);
});
}
function showSettingsModal(lines, rowsContainer) {
let lastFocusedElement = document.activeElement;
const overlay = document.createElement('div');
overlay.className = 'xbox-overlay';
document.body.appendChild(overlay);
requestAnimationFrame(() => overlay.classList.add('show'));
const modal = document.createElement('div');
modal.className = 'xbox-modal';
modal.setAttribute('role', 'dialog');
modal.setAttribute('aria-modal', 'true');
modal.setAttribute('aria-labelledby', 'xbox-modal-title');
const defaultStoreOptions = CURRENCIES.map(
c =>
`<option value="${c.code}" ${Prefs.defaultStore === c.code ? 'selected' : ''}>${c.flag} ${c.name}</option>`,
).join('');
modal.innerHTML = `<h3 id="xbox-modal-title">Settings</h3>
<div class="xbox-modal-section">
<h4>Default Store (for Conversion)</h4>
<select id="default-store-select">${defaultStoreOptions}</select>
</div>
<div class="xbox-modal-section">
<h4>Visible Stores</h4>
<div class="stores-list"></div>
<div class="xbox-modal-actions-links">
<a href="#" data-action="default">Select Default</a>
<a href="#" data-action="all">Select All</a>
<a href="#" data-action="none">Select None</a>
</div>
</div>
<div class="xbox-modal-section">
<h4>Sort Order</h4>
<select id="sort-order-select">
<option value="lowest" ${Prefs.sortOrder === 'lowest' ? 'selected' : ''}>Lowest Price</option>
<option value="alpha" ${Prefs.sortOrder === 'alpha' ? 'selected' : ''}>Alphabetical</option>
</select>
</div>
<div class="xbox-modal-actions">
<button class="cancel">Cancel</button>
<button class="save">Save</button>
</div>`;
const storesList = modal.querySelector('.stores-list');
CURRENCIES.forEach(c => {
storesList.insertAdjacentHTML(
'beforeend',
`<label class="switch">
<input type="checkbox" value="${c.code}" ${Prefs.visible[c.code] ? 'checked' : ''}>
<span class="slider" role="presentation"></span><span>${c.flag} ${c.link}</span></label>`,
);
});
overlay.appendChild(modal);
const focusableElements = modal.querySelectorAll(
'button, [href], input, select',
);
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];
firstFocusable.focus();
const handleKeyDown = e => {
if (e.key === 'Escape') {
close();
return;
}
if (e.key === 'Tab') {
if (e.shiftKey) {
if (document.activeElement === firstFocusable) {
e.preventDefault();
lastFocusable.focus();
}
} else {
if (document.activeElement === lastFocusable) {
e.preventDefault();
firstFocusable.focus();
}
}
}
};
const close = () => {
overlay.classList.remove('show');
overlay.addEventListener(
'transitionend',
() => {
overlay.remove();
document.removeEventListener('keydown', handleKeyDown);
lastFocusedElement?.focus();
},
{
once: true,
},
);
};
document.addEventListener('keydown', handleKeyDown);
modal.querySelector('.cancel').addEventListener('click', close);
overlay.addEventListener('click', e => {
if (e.target === overlay) close();
});
modal.querySelector('.save').addEventListener('click', async () => {
modal.querySelectorAll('.stores-list input').forEach(cb => {
Prefs.visible[cb.value] = cb.checked;
});
Prefs.sortOrder = modal.querySelector('#sort-order-select').value;
Prefs.defaultStore = modal.querySelector(
'#default-store-select',
).value;
await Prefs.save();
runScript(true);
close();
});
modal
.querySelector('.xbox-modal-actions-links')
.addEventListener('click', e => {
e.preventDefault();
const action = e.target.dataset.action;
if (!action) return;
modal.querySelectorAll('.stores-list input').forEach(cb => {
if (action === 'all') cb.checked = true;
else if (action === 'none') cb.checked = false;
else if (action === 'default')
cb.checked = Prefs.defaults.includes(cb.value);
});
});
}
// 7) Main Execution Logic
async function main(sku) {
const anchor = document.querySelector(CONFIG.SELECTORS.insertionPoint);
if (!anchor) return;
const {banner, rowsContainer, settingsBtn} = createBanner();
banner.dataset.xboxSku = sku;
rowsContainer.innerHTML = `<div class="xbox-row loading">Loading prices...</div>`;
anchor.parentNode.insertBefore(banner, anchor.nextSibling);
const parts = location.pathname.split('/').filter(p => p);
const storeIdx = parts.indexOf('store');
const [, slug, prod] = parts.slice(storeIdx);
const currenciesToFetch = CURRENCIES.filter(c => Prefs.visible[c.code]);
if (currenciesToFetch.length === 0) {
updateBannerDisplay(rowsContainer, []);
settingsBtn.addEventListener('click', () =>
showSettingsModal([], rowsContainer),
);
return;
}
const urls = Object.fromEntries(
CURRENCIES.map(c => [
c.code,
`https://www.xbox.com/${c.region}/games/store/${slug}/${prod}/${sku}`,
]),
);
const priceResults = await fetchAllPrices(urls, currenciesToFetch);
const rawPrices = Object.fromEntries(
priceResults.map(r => [
r.code,
{
priceStr: r.priceStr,
error: r.error,
},
]),
);
const parsedValues = {};
currenciesToFetch.forEach(c => {
const raw = rawPrices[c.code];
if (raw && raw.priceStr) {
try {
let strToParse = raw.priceStr;
if (c.preParse) {
strToParse = c.preParse(strToParse);
}
parsedValues[c.code] = parsePrice(strToParse, c.decimal);
} catch (e) {
raw.error = 'Parse failed';
}
}
});
const defaultCurrency = CURRENCIES.find(
c => c.code === Prefs.defaultStore,
);
const rates = await getRates(defaultCurrency.api);
if (!rates || !defaultCurrency) {
rowsContainer.innerHTML = `<div class="xbox-row error">Could not load exchange rates for ${defaultCurrency?.name || 'default store'}.</div>`;
return;
}
const displayLines = CURRENCIES.map(c => {
if (!Prefs.visible[c.code]) {
return {
code: c.code,
html: '',
};
}
const value = parsedValues[c.code];
const raw = rawPrices[c.code];
let html,
convertedPrice = Infinity;
const linkHtml = `<a href="${urls[c.code]}" target="_blank" rel="noopener noreferrer">${c.name}</a>`;
const nameWithFlag = `${c.flag} ${linkHtml}`;
if (raw.error) {
console.warn(`Could not fetch price for ${c.name}:`, raw.error);
html = `${nameWithFlag}: <span class="error-text" title="${raw.error}">⚠️ Couldn’t load</span>`;
} else if (value != null) {
convertedPrice = value / rates[c.api];
html = `${nameWithFlag}: ${defaultCurrency.fmt(convertedPrice)}`;
if (c.code !== defaultCurrency.code) {
let formattedLocal = c.fmt(value);
if (c.isRTL) {
formattedLocal = `<span class="rtl-text">${formattedLocal}</span>`;
}
html += ` (${formattedLocal})`;
}
if (c.tax > 0) {
const totalConverted = convertedPrice * (1 + c.tax);
const totalLocalValue = value * (1 + c.tax);
let formattedTaxLocal = c.fmt(totalLocalValue);
if (c.isRTL) {
formattedTaxLocal = `<span class="rtl-text">${formattedTaxLocal}</span>`;
}
html += ` + Tax = ${defaultCurrency.fmt(totalConverted)}`;
if (c.code !== defaultCurrency.code) {
html += ` (${formattedTaxLocal})`;
}
convertedPrice = totalConverted;
} else if (c.showPlusTax) {
html += ` + Tax`;
}
} else {
html = `${nameWithFlag}: Not available`;
}
return {
code: c.code,
name: c.name,
html,
convertedPrice,
error: raw.error,
};
});
settingsBtn.addEventListener('click', () =>
showSettingsModal(displayLines, rowsContainer),
);
updateBannerDisplay(rowsContainer, displayLines);
}
function getCurrentSku() {
try {
const buyButton = document.querySelector(
CONFIG.SELECTORS.buyButton,
);
if (!buyButton) return null;
const mData = JSON.parse(buyButton.dataset.m || '{}');
return mData.sku || null;
} catch (e) {
return null;
}
}
// --- Script Initialization and SPA Navigation Handling ---
let debounceTimer;
async function runScript(forceRefresh = false) {
observer.disconnect();
try {
const currentSku = getCurrentSku();
const existingBanner = document.querySelector(
CONFIG.SELECTORS.banner,
);
if (!currentSku) {
existingBanner?.remove();
return;
}
if (
!forceRefresh &&
existingBanner &&
existingBanner.dataset.xboxSku === currentSku
) {
// re-observe even if we don't run
} else {
existingBanner?.remove();
const insertionPoint = document.querySelector(
CONFIG.SELECTORS.insertionPoint,
);
if (insertionPoint) {
await main(currentSku);
}
}
} catch (error) {
console.error('Error during script execution:', error);
} finally {
observer.observe(document.body, {
childList: true,
subtree: true,
});
}
}
const observer = new MutationObserver(() => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => runScript(false), 300);
});
injectStyles();
await Prefs.load();
await runScript(true);
})();