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.
extension
1import config from "@/utils/config.json";
2import { cache, preferences } from "@/utils/storage";
3browser.devtools.panels.create("Poly+", "icon/128.png", "devtools.html");
4
5for (
6 const src of [
7 "/css/polytoria.css",
8 "/css/preferences.css",
9 ]
10) {
11 const css = browser.runtime.getURL(src as any);
12 const link = document.createElement("link");
13 link.rel = "stylesheet";
14 link.href = css;
15 document.head.appendChild(link);
16}
17
18const modal: HTMLDialogElement = document.getElementsByTagName("dialog")[0]!;
19const openModal = (
20 title: string,
21 description: string,
22 body: any,
23 json: boolean,
24) => {
25 if (json) {
26 body = `
27 <div style="padding: 10px; background: #171717; font-family: monospace; color: orange; font-size: 0.8rem; border-radius: 10px; position: relative;">
28 ${
29 JSON.stringify(body || [], null, 2)
30 .replaceAll("\n", "<br>")
31 .replaceAll(" ", " ")
32 .replaceAll("\t", " ")
33 }
34 </div>
35 `;
36 }
37
38 modal.getElementsByTagName("h5")[0]!.textContent = title;
39 modal.getElementsByTagName("span")[0]!.textContent = description;
40 modal.getElementsByClassName("modal-body")[0]!.innerHTML = body;
41
42 modal.showModal();
43};
44
45document.getElementById("view-preferences")!.addEventListener(
46 "click",
47 async () => {
48 openModal(
49 "Preferences",
50 "The following values are the user's preferences.",
51 await preferences.getPreferences(),
52 true,
53 );
54 },
55);
56
57document.getElementById("view-cache")!.addEventListener("click", async () => {
58 openModal(
59 "Cache",
60 'The following values are saved for a certain period of time, before being "replenished" when next requested.',
61 await cache.getValue(),
62 true,
63 );
64});
65
66document.getElementById("expose-config")!.addEventListener(
67 "click",
68 () =>
69 openModal(
70 "Configuration",
71 "The defining values for several features of the extension.",
72 config,
73 true,
74 ),
75);
76
77document.getElementById("modal-close")!.addEventListener(
78 "click",
79 () => modal.close(),
80);