schoolbox web extension :)
feat: plugin injection
+42
-40
+9
-7
src/entrypoints/plugins.content.ts
+9
-7
src/entrypoints/plugins.content.ts
···
13
13
runAt: "document_start",
14
14
excludeMatches: EXCLUDE_MATCHES,
15
15
async main() {
16
-
subheader();
17
-
scrollSegments();
18
-
scrollPeriod();
19
-
progressBar();
20
-
modernIcons();
21
-
tabTitle();
22
-
homepageSwitcher();
16
+
document.addEventListener("DOMContentLoaded", () => {
17
+
subheader.init();
18
+
scrollSegments.init();
19
+
scrollPeriod.init();
20
+
progressBar.init();
21
+
modernIcons.init();
22
+
tabTitle.init();
23
+
homepageSwitcher.init();
24
+
});
23
25
},
24
26
});
+9
-8
src/entrypoints/popup/routes/Plugins.svelte
+9
-8
src/entrypoints/popup/routes/Plugins.svelte
···
1
1
<script lang="ts">
2
-
import type { PluginId } from "@/utils/storage";
3
-
import { globalSettings, plugins } from "@/utils/storage";
2
+
import { globalSettings } from "@/utils/storage";
4
3
import { Settings } from "@lucide/svelte";
5
4
import Title from "../components/Title.svelte";
6
5
import Button from "../components/inputs/Button.svelte";
···
9
8
import Slider from "../components/inputs/Slider.svelte";
10
9
11
10
let showModal = $state(false);
12
-
let selectedPluginId: PluginId | undefined = $state();
13
-
let selectedPlugin = $derived.by(() => {
14
-
if (selectedPluginId !== undefined) {
15
-
return plugins[selectedPluginId];
16
-
}
17
-
});
11
+
// let selectedPluginId: PluginId | undefined = $state();
12
+
// let selectedPlugin = $derived.by(() => {
13
+
// if (selectedPluginId !== undefined) {
14
+
// return plugins[selectedPluginId];
15
+
// }
16
+
// });
18
17
</script>
19
18
20
19
<div id="card">
···
52
51
</div>
53
52
</div>
54
53
54
+
<!--
55
55
{#if selectedPlugin}
56
56
<Modal bind:showModal>
57
57
{#snippet header()}
···
81
81
{/if}
82
82
</Modal>
83
83
{/if}
84
+
-->
+24
-25
src/utils/plugin.ts
+24
-25
src/utils/plugin.ts
···
50
50
}
51
51
52
52
async init() {
53
-
if (await this.isEnabled()) this.initObserver();
53
+
logger.info(`init plugin: ${this.meta.name}`);
54
+
55
+
if (await this.isEnabled()) {
56
+
// wait for elements to be loaded
57
+
if (this.elementsToWaitFor.length > 0) {
58
+
// create an observer to wait for all elements to be loaded
59
+
const observer = new MutationObserver((_mutations, observer) => {
60
+
if (this.allElementsPresent()) {
61
+
observer.disconnect();
62
+
this.inject();
63
+
}
64
+
});
65
+
observer.observe(document.body, { childList: true, subtree: true });
66
+
67
+
// check if elements are already present
68
+
if (this.allElementsPresent()) {
69
+
observer.disconnect();
70
+
this.inject();
71
+
}
72
+
} else {
73
+
// no elements to wait for
74
+
this.inject();
75
+
}
76
+
}
54
77
55
78
// init watchers
56
79
globalSettings.watch((newValue, oldValue) => {
···
69
92
if (await this.isEnabled()) this.inject();
70
93
}
71
94
72
-
private initObserver() {
73
-
// wait for elements to be loaded
74
-
if (this.elementsToWaitFor.length > 0) {
75
-
// create an observer to wait for all elements to be loaded
76
-
const observer = new MutationObserver((_mutations, observer) => {
77
-
if (this.allElementsPresent()) {
78
-
observer.disconnect();
79
-
this.inject();
80
-
}
81
-
});
82
-
observer.observe(document.body, { childList: true, subtree: true });
83
-
84
-
// check if elements are already present
85
-
if (this.allElementsPresent()) {
86
-
observer.disconnect();
87
-
this.inject();
88
-
}
89
-
} else {
90
-
// no elements to wait for
91
-
this.inject();
92
-
}
93
-
}
94
-
95
95
private inject() {
96
96
if (this.injected) return;
97
-
if (!this.allElementsPresent()) return;
98
97
logger.info(`injecting plugin: ${this.meta.name}`);
99
98
this.injectCallback(this.settings);
100
99
this.injected = true;