Skip to content

Commit 2cd897d

Browse files
xPawxPaw
committed
Add action popup
1 parent 80b0ee0 commit 2cd897d

File tree

5 files changed

+169
-0
lines changed

5 files changed

+169
-0
lines changed

‎_locales/en/messages.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -368,6 +368,22 @@
368368
"description": "A button or checkbox that reveals spoilers when toggled"
369369
},
370370

371+
"popup_charts": {
372+
"message": "Charts"
373+
},
374+
"popup_sales": {
375+
"message": "Sales"
376+
},
377+
"popup_calendar": {
378+
"message": "Calendar"
379+
},
380+
"popup_patches": {
381+
"message": "Patches"
382+
},
383+
"popup_calculator": {
384+
"message": "Calculator"
385+
},
386+
371387
"options": {
372388
"message": "Options"
373389
},

‎manifest.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@
3131
"https://steamcommunity.com/*",
3232
"https://*.steampowered.com/*"
3333
],
34+
"action":
35+
{
36+
"default_popup": "options/popup.html"
37+
},
3438
"background":
3539
{
3640
"scripts":

‎options/popup.css

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
*,
2+
*::before,
3+
*::after {
4+
box-sizing: border-box;
5+
}
6+
7+
:root {
8+
--bg-color: #000;
9+
--link-color: #fff;
10+
--link-color-hover: #34c8fe;
11+
}
12+
13+
body {
14+
min-width: min-content;
15+
margin: 0;
16+
padding: 0;
17+
background: var(--bg-color);
18+
color: var(--link-color);
19+
font:
20+
1rem/1.5 -apple-system,
21+
BlinkMacSystemFont,
22+
"Segoe UI",
23+
Roboto,
24+
Helvetica,
25+
Arial,
26+
sans-serif;
27+
}
28+
29+
.links {
30+
display: flex;
31+
flex-direction: column;
32+
}
33+
34+
.link {
35+
display: flex;
36+
align-items: center;
37+
padding: 0.5em 1em;
38+
gap: 0.7em;
39+
text-decoration: none;
40+
color: inherit;
41+
42+
> svg {
43+
width: 1em;
44+
height: 1em;
45+
flex-shrink: 0;
46+
}
47+
48+
&:hover {
49+
color: var(--link-color-hover);
50+
background-color: rgba(0 100 255 / 20%);
51+
52+
> b,
53+
> span {
54+
text-decoration: underline;
55+
}
56+
}
57+
58+
&.options-link {
59+
color: var(--link-color-hover);
60+
}
61+
}
62+
63+
.separator {
64+
height: 1px;
65+
background: rgba(255 255 255 / 30%);
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
--bg-color: #fff;
71+
--link-color: #000;
72+
--link-color-hover: #00f;
73+
}
74+
75+
.separator {
76+
background: rgba(0 0 0 / 30%);
77+
}
78+
}

‎options/popup.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>SteamDB</title>
6+
<meta name="color-scheme" content="light dark">
7+
<link rel="stylesheet" href="popup.css">
8+
<script src="popup.js" defer></script>
9+
</head>
10+
<body>
11+
<div class="links">
12+
<a href="https://steamdb.info/" target="_blank" class="link">
13+
<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>
14+
<b>SteamDB</b>
15+
</a>
16+
17+
<div class="separator"></div>
18+
19+
<a href="https://steamdb.info/charts/" target="_blank" class="link">
20+
<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>
21+
<span data-msg="popup_charts"></span>
22+
</a>
23+
<a href="https://steamdb.info/sales/" target="_blank" class="link">
24+
<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>
25+
<span data-msg="popup_sales"></span>
26+
</a>
27+
<a href="https://steamdb.info/calendar/" target="_blank" class="link">
28+
<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>
29+
<span data-msg="popup_calendar"></span>
30+
</a>
31+
<a href="https://steamdb.info/patchnotes/" target="_blank" class="link">
32+
<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>
33+
<span data-msg="popup_patches"></span>
34+
</a>
35+
<a href="https://steamdb.info/calculator/" target="_blank" class="link">
36+
<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>
37+
<span data-msg="popup_calculator"></span>
38+
</a>
39+
40+
<div class="separator"></div>
41+
42+
<a href="#" id="options-link" class="link options-link">
43+
<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>
44+
<span data-msg="options"></span>
45+
</a>
46+
</div>
47+
</body>
48+
</html>

‎options/popup.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
'use strict';
2+
3+
( () =>
4+
{
5+
const browserApi = typeof browser !== 'undefined' ? browser : chrome;
6+
7+
document.body.dir = browserApi.i18n.getMessage( '@@bidi_dir' );
8+
9+
/** @type {NodeListOf<HTMLElement>} */
10+
const localizable = document.querySelectorAll( '[data-msg]' );
11+
12+
for( const element of localizable )
13+
{
14+
element.innerHTML = browserApi.i18n.getMessage( element.dataset.msg );
15+
}
16+
17+
document.getElementById( 'options-link' ).addEventListener( 'click', function( ev )
18+
{
19+
ev.preventDefault();
20+
21+
browserApi.runtime.openOptionsPage();
22+
} );
23+
} )();

0 commit comments

Comments
 (0)