schoolbox web extension :)
fix: plugin injection and popup
+34
-25
+15
-7
src/entrypoints/plugins.content.ts
+15
-7
src/entrypoints/plugins.content.ts
···
1
1
import { defineContentScript } from "#imports";
2
2
import { EXCLUDE_MATCHES } from "@/utils/constants";
3
+
import type { Plugin } from "@/utils/plugin";
4
+
3
5
import homepageSwitcher from "./plugins/homepageSwitcher";
4
6
import modernIcons from "./plugins/modernIcons";
5
7
import progressBar from "./plugins/progressBar";
···
8
10
import subheader from "./plugins/subheader";
9
11
import tabTitle from "./plugins/tabTitle";
10
12
13
+
export const plugins: Plugin<any>[] = [
14
+
homepageSwitcher,
15
+
modernIcons,
16
+
progressBar,
17
+
scrollPeriod,
18
+
scrollSegments,
19
+
subheader,
20
+
tabTitle,
21
+
];
22
+
11
23
export default defineContentScript({
12
24
matches: ["<all_urls>"],
13
25
runAt: "document_start",
14
26
excludeMatches: EXCLUDE_MATCHES,
15
27
async main() {
16
28
document.addEventListener("DOMContentLoaded", () => {
17
-
subheader.init();
18
-
scrollSegments.init();
19
-
scrollPeriod.init();
20
-
progressBar.init();
21
-
modernIcons.init();
22
-
tabTitle.init();
23
-
homepageSwitcher.init();
29
+
for (const plugin of plugins) {
30
+
plugin.init();
31
+
}
24
32
});
25
33
},
26
34
});
+2
-2
src/entrypoints/plugins/homepageSwitcher.ts
+2
-2
src/entrypoints/plugins/homepageSwitcher.ts
···
1
1
import { browser } from "#imports";
2
2
import { Plugin } from "@/utils/plugin";
3
-
import { Toggle } from "@/utils/storage";
4
-
import { StorageState } from "@/utils/storage/state.svelte";
3
+
import type { Toggle } from "@/utils/storage";
4
+
import type { StorageState } from "@/utils/storage/state.svelte";
5
5
6
6
let logos: HTMLAnchorElement[] | null = null;
7
7
let controller: AbortController | null = null;
+2
-2
src/entrypoints/plugins/modernIcons/index.ts
+2
-2
src/entrypoints/plugins/modernIcons/index.ts
···
8
8
} from "@/utils";
9
9
import { Plugin } from "@/utils/plugin";
10
10
import styleText from "./styles.css?inline";
11
-
import { Toggle } from "@/utils/storage";
12
-
import { StorageState } from "@/utils/storage/state.svelte";
11
+
import type { Toggle } from "@/utils/storage";
12
+
import type { StorageState } from "@/utils/storage/state.svelte";
13
13
14
14
const ID = "modernIcons";
15
15
const PLUGIN_ID = `plugin-${ID}`;
+2
-2
src/entrypoints/plugins/scrollPeriod.ts
+2
-2
src/entrypoints/plugins/scrollPeriod.ts
···
1
1
import { getCurrentPeriod } from "@/utils/periodUtils";
2
2
import { Plugin } from "@/utils/plugin";
3
-
import { Slider, Toggle } from "@/utils/storage";
4
-
import { StorageState } from "@/utils/storage/state.svelte";
3
+
import type { Slider, Toggle } from "@/utils/storage";
4
+
import type { StorageState } from "@/utils/storage/state.svelte";
5
5
6
6
let interval: NodeJS.Timeout | null = null;
7
7
let controller: AbortController | null = null;
+2
-2
src/entrypoints/plugins/subheader/index.ts
+2
-2
src/entrypoints/plugins/subheader/index.ts
···
2
2
import { Plugin } from "@/utils/plugin";
3
3
import styleText from "./styles.css?inline";
4
4
import { dataAttr, injectInlineStyles, setDataAttr, uninjectInlineStyles } from "@/utils";
5
-
import { StorageState } from "@/utils/storage/state.svelte";
6
-
import { Toggle } from "@/utils/storage";
5
+
import type { StorageState } from "@/utils/storage/state.svelte";
6
+
import type { Toggle } from "@/utils/storage";
7
7
8
8
const ID = "subheader";
9
9
const PLUGIN_ID = `plugin-${ID}`;
+2
-2
src/entrypoints/plugins/tabTitle.ts
+2
-2
src/entrypoints/plugins/tabTitle.ts
···
1
1
import { Plugin } from "@/utils/plugin";
2
-
import { Toggle } from "@/utils/storage";
3
-
import { StorageState } from "@/utils/storage/state.svelte";
2
+
import type { Toggle } from "@/utils/storage";
3
+
import type { StorageState } from "@/utils/storage/state.svelte";
4
4
5
5
const ID = "tabTitle";
6
6
let originalTitle: string | null = null;
+8
-7
src/entrypoints/popup/routes/Plugins.svelte
+8
-7
src/entrypoints/popup/routes/Plugins.svelte
···
6
6
import Modal from "../components/Modal.svelte";
7
7
import Toggle from "../components/inputs/Toggle.svelte";
8
8
import Slider from "../components/inputs/Slider.svelte";
9
+
import { plugins } from "@/entrypoints/plugins.content";
9
10
10
11
let showModal = $state(false);
11
12
// let selectedPluginId: PluginId | undefined = $state();
···
25
26
}} />
26
27
27
28
<div class="plugins-container">
28
-
{#each Object.entries(plugins) as [id, plugin] (id)}
29
+
{#each plugins as plugin (plugin.meta.id)}
29
30
<div class="group my-4">
30
31
<Toggle
31
-
{id}
32
+
id={plugin.meta.id}
33
+
text={plugin.meta.name}
34
+
description={plugin.meta.description}
32
35
checked={plugin.toggle.state.toggle}
33
36
update={(toggled: boolean) => {
34
37
plugin.toggle.set({ toggle: toggled });
35
38
}}
36
-
text={plugin.name}
37
-
description={plugin.description}
38
39
size="small">
39
40
{#if plugin.settings !== undefined}
40
41
<Button
41
-
title={plugin.name + " Settings"}
42
-
{id}
42
+
title={plugin.meta.name + " Settings"}
43
+
id={plugin.meta.id}
43
44
onclick={() => {
44
-
selectedPluginId = id as PluginId;
45
+
// selectedPluginId = id as PluginId; TODO
45
46
showModal = true;
46
47
}}><Settings size={22} /></Button>
47
48
{/if}
+1
-1
src/utils/plugin.ts
+1
-1
src/utils/plugin.ts
···
79
79
globalSettings.watch((newValue, oldValue) => {
80
80
if (hasChanged(newValue, oldValue, ["global", "plugins"])) this.reload();
81
81
});
82
-
this.toggle.watch(this.reload);
82
+
this.toggle.watch(this.reload.bind(this));
83
83
if (this.settings) {
84
84
for (const setting of Object.values(this.settings)) {
85
85
setting.watch(this.reload);