A rewrite of Poly+, my quality-of-life browser extension for Polytoria. Built entirely fresh using the WXT extension framework, Typescript, and with added better overall code quality.
indexx.dev
extension
1<!doctype html>
2<html>
3 <head>
4 <!-- META TAGS -->
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8 <!-- PUBLIC -->
9 <title>Poly+ Preferences</title>
10
11 <!-- RESOURCES -->
12 <link rel="stylesheet" href="chrome-extension://eibbilkmpnkmdacjlfbcjodnkmgmggbc/css/polytoria.css" type="text/css" />
13 <link rel="stylesheet" href="chrome-extension://eibbilkmpnkmdacjlfbcjodnkmgmggbc/css/settings.css" type="text/css" />
14 </head>
15 <body data-bs-theme="dark">
16 <dialog class="w-50" id="ResetDefaults-Modal">
17 <div class="modal-header">
18 <p>Are you sure?</p>
19 </div>
20 <div class="modal-body">
21 <p>Are you sure you'd like to reset all settings to their defaults? (this action is irreversible)</p>
22 <button id="ResetDefaults-Modal-Yes" class="btn btn-danger">Yes</button>
23 <button id="ResetDefaults-Modal-No" class="btn btn-primary">No</button>
24 </div>
25 </dialog>
26 <dialog class="w-50" id="ThemeCreator-Modal" data-setting="ThemeCreator">
27 <div class="modal-header">
28 <p>Theme Creator</p>
29 </div>
30 <div class="modal-body">
31 <p>Let out your creativity and turn it into a reality on Polytoria's website!</p>
32 <hr class="mt-3 mb-3" />
33
34 <label>Save Theme to JSON</label>
35 <div class="input-group mb-3">
36 <input id="SaveThemeToJSONInput" type="text" class="form-control bg-dark ignore" placeholder="JSON String..." disabled />
37 <button id="CopyThemeJSONBtn" class="btn btn-warning">Copy</button>
38 </div>
39
40 <label>Load Theme from JSON</label>
41 <div class="input-group">
42 <input type="text" class="form-control bg-dark ignore" placeholder="JSON..." />
43 <button id="LoadThemeFromJSONBtn" class="btn btn-success ignore">Load</button>
44 </div>
45
46 <hr class="mt-2 mb-3" />
47
48 <div class="card mb-2">
49 <div class="card-header">Navigation</div>
50 <div class="card-body">
51 <label>Navbar Background Color</label>
52 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="NavBGColor" />
53
54 <label>Navbar Border Color</label>
55 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="NavBorderColor" />
56
57 <label>Sidebar Background Color</label>
58 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideBGColor" />
59
60 <label>Sidebar Border Color</label>
61 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideBorderColor" />
62
63 <hr class="navbar-divider" />
64
65 <label>Navbar Item Color</label>
66 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="NavItemColor" />
67
68 <label>Sidebar Item Background Color</label>
69 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemBGColor" />
70
71 <label>Sidebar Item Border Color</label>
72 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemBorderColor" />
73
74 <label>Sidebar Item Color</label>
75 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemColor" />
76
77 <label>Sidebar Item Label Color</label>
78 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SideItemLabelColor" />
79 </div>
80 </div>
81
82 <div class="card mb-2">
83 <div class="card-header">Background</div>
84 <div class="card-body">
85 <label>Background Color</label>
86 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="BGColor" />
87
88 <label>Background Image (URL)</label>
89 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="BGImage" />
90
91 <label>Background Image Size (if there is a background image)</label>
92 <select class="form-select bg-dark mb-2" data-setting="BGImageSize">
93 <option value="fit" selected>Fit (default)</option>
94 <option value="cover">Cover</option>
95 <option value="contain">Contain</option>
96 </select>
97 </div>
98 </div>
99
100 <div class="card mb-2">
101 <div class="card-header">Text</div>
102 <div class="card-body">
103 <label>Primary Text Color</label>
104 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="PrimaryTextColor" />
105
106 <label>Secondary Text Color</label>
107 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="SecondaryTextColor" />
108
109 <div class="row">
110 <div class="col">
111 <label>Link (state: default) Text Color</label>
112 </div>
113 <div class="col">
114 <label>Link (state: hovered) Text Color</label>
115 </div>
116 <div class="col">
117 <label>Link (state: focused) Text Color</label>
118 </div>
119 </div>
120
121 <div class="input-group">
122 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="LinkTextColor" />
123 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="LinkHoveredTextColor" />
124 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="LinkFocusedTextColor" />
125 </div>
126 </div>
127 </div>
128
129 <div class="card mb-2">
130 <div class="card-header">Cards</div>
131 <div class="card-body">
132 <label>Card (Header) Background Color</label>
133 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="CardHeadBGColor" />
134
135 <label>Card (Body) Background Color</label>
136 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="CardBodyBGColor" />
137
138 <label>Card Border Color</label>
139 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="CardBorderColor" />
140 </div>
141 </div>
142
143 <div class="card mb-2">
144 <div class="card-header">Branding</div>
145 <div class="card-body">
146 <label>Website Logo (URL)</label>
147 <input class="form-control bg-dark mb-2" placeholder="..." data-setting="WebsiteLogo" />
148 </div>
149 </div>
150
151 <div role="group" class="btn-group w-100">
152 <button class="btn btn-success w-25" data-setting="[save]">Save</button>
153 <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
154 <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
155 </div>
156 </div>
157 </dialog>
158 <dialog class="w-50" id="ModifyNav-Modal" data-setting="ModifyNav">
159 <div class="modal-header">
160 <p>Modify Navbar</p>
161 </div>
162 <div class="modal-body">
163 <p>Customize the navbar to your liking!</p>
164 <hr class="mt-2 mb-3" />
165 <div class="card mb-2">
166 <div class="card-header">#1 Navbar Item</div>
167 <div class="card-body">
168 <label>Label</label>
169 <input class="form-control bg-dark mb-2" placeholder="Play" data-parent="0" data-setting="Label" />
170
171 <label>Link</label>
172 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/places/" data-parent="0" data-setting="Link" />
173 </div>
174 </div>
175 <div class="card mb-2">
176 <div class="card-header">#2 Navbar Item</div>
177 <div class="card-body">
178 <label>Label</label>
179 <input class="form-control bg-dark mb-2" placeholder="Store" data-parent="1" data-setting="Label" />
180
181 <label>Link</label>
182 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/store/" data-parent="1" data-setting="Link" />
183 </div>
184 </div>
185 <div class="card mb-2">
186 <div class="card-header">#3 Navbar Item</div>
187 <div class="card-body">
188 <label>Label</label>
189 <input class="form-control bg-dark mb-2" placeholder="Guilds" data-parent="2" data-setting="Label" />
190
191 <label>Link</label>
192 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/guilds/" data-parent="2" data-setting="Link" />
193 </div>
194 </div>
195 <div class="card mb-2">
196 <div class="card-header">#4 Navbar Item</div>
197 <div class="card-body">
198 <label>Label</label>
199 <input class="form-control bg-dark mb-2" placeholder="People" data-parent="3" data-setting="Label" />
200
201 <label>Link</label>
202 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/users/" data-parent="3" data-setting="Link" />
203 </div>
204 </div>
205 <div class="card mb-2">
206 <div class="card-header">#5 Navbar Item</div>
207 <div class="card-body">
208 <label>Label</label>
209 <input class="form-control bg-dark mb-2" placeholder="Forum" data-parent="4" data-setting="Label" />
210
211 <label>Link</label>
212 <input class="form-control bg-dark mb-2" placeholder="https://polytoria.com/forum" data-parent="4" data-setting="Link" />
213 </div>
214 </div>
215
216 <div role="group" class="btn-group w-100">
217 <button class="btn btn-success w-25" data-setting="[save]">Save</button>
218 <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
219 <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
220 </div>
221 </div>
222 </dialog>
223 <dialog class="w-75" id="AutoAdBidding-Modal" data-setting="AutoAdBidding">
224 <div class="modal-header">
225 <p>Automatic Ad Bidding</p>
226 </div>
227 <div class="modal-body">
228 <p>description (max 10 ads)</p>
229 <hr class="mt-2 mb-3" />
230 <div class="input-group mb-2">
231 <input type="text" class="form-control ignore" placeholder="Ad ID..">
232 <button class="btn btn-primary" id="auto-ad-bidding-add">Add</button>
233 </div>
234 <table class="table">
235 <thead>
236 <tr>
237 <th scope="col">#</th>
238 <th scope="col">Ad Name</th>
239 <th scope="col">Bid</th>
240 <th scope="col">Automation</th>
241 <th scope="col">Actions</th>
242 </tr>
243 </thead>
244 <tbody>
245 <tr>
246 <th scope="row">1</th>
247 <td><a href="https://polytoria.com/create/ad/632">"everdayi m shuffling"</a></td>
248 <td class="text-success"><span class="pi">$</span> 150</td>
249 <td>
250 <select class="form-select ignore">
251 <option value="daily" selected>Daily</option>
252 <option value="weekly">Weekly</option>
253 <option value="monthly">Monthly</option>
254 </select>
255 </td>
256 <td>
257 <div role="group" class="btn-group w-100">
258 <button class="btn btn-success w-25">
259 BID
260 </button>
261 <button class="btn btn-orange w-25">
262 EDIT
263 </button>
264 <button class="btn btn-danger w-25">
265 DELETE
266 </button>
267 </div>
268 </td>
269 </tr>
270 </tbody>
271 </table>
272
273 <div role="group" class="btn-group w-100">
274 <button class="btn btn-success w-25" data-setting="[save]">Save</button>
275 <button class="btn btn-warning w-25" data-setting="[reset-default]">Reset to Defaults</button>
276 <button class="btn btn-secondary w-25" data-setting="[cancel]">Cancel</button>
277 </div>
278 </div>
279 </dialog>
280 <div id="page">
281 <h1
282 class="text-center title-popup-bg"
283 style="
284 text-shadow: 0px 0px 5px orange;
285 padding-bottom: 5px;
286 margin-bottom: 10px;
287 display: flex;
288 align-items: center;
289 justify-content: center;
290 "
291 >
292 <span>Poly+</span>
293 </h1>
294 <div id="settings"></div>
295 <hr />
296 <div class="btn-group w-100">
297 <button id="save" class="btn btn-primary w-50" disabled="true">Save</button>
298 <button id="reset" class="btn btn-warning w-50">Reset to Default Settings</button>
299 </div>
300 <p id="footer-text" class="text-center text-muted mt-2" style="font-size: 0.8rem;">
301 <span></span>
302 |
303 <a id="check-for-updates"><b>Check for Updates</b></a>
304 <br />
305 made by <a href="https://polytoria.com/u/Index" target="_blank">Index</a> with the help of several contributors <3
306 </p>
307 </div>
308 <script src="preferences-handler.js"></script>
309 </body>
310</html>