feat: Add Custom JS (#104)

* Add Custom JS

* Resolve requested changes

src/frame.ts

@@ -24,6 +24,7 @@ export class CustomFrame {
             this.frame.addEventListener("dom-ready", () => {
                 this.frame.setZoomFactor(this.data.zoomLevel);
                 this.frame.insertCSS(this.data.customCss);
+                this.frame.executeJavaScript(this.data.customJs)
             });
             this.frame.addEventListener("destroyed", () => {
                 // recreate the webview if it was moved to a new window

src/settings-tab.ts

@@ -149,6 +149,22 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
+            new Setting(content)
+                .setName("Additional JavaScript")
+                .setDesc(createFragment(f => {
+                    f.createSpan({ text: "A snippet of additional JavaScript that should be applied to this frame." });
+                    f.createEl("br");
+                    f.createEl("em", { text: "Note that this is only applied on Desktop." });
+                }))
+                .addTextArea(t => {
+                    t.inputEl.rows = 5;
+                    t.inputEl.cols = 50;
+                    t.setValue(frame.customJs);
+                    t.onChange(async v => {
+                        frame.customJs = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
             new ButtonComponent(content)
                 .setButtonText("Remove Frame")
                 .onClick(async () => {

src/settings.ts

@@ -12,7 +12,8 @@ export const presets: Record<string, CustomFrameSettings> = {
         openInCenter: true,
         zoomLevel: 1,
         forceIframe: false,
-        customCss: ""
+        customCss: "",
+        customJs: ""
     },
     "detexify": {
         url: "https://detexify.kirelabs.org/classify.html",
@@ -27,7 +28,8 @@ export const presets: Record<string, CustomFrameSettings> = {
 #classify--info-area,
 .adsbygoogle {
 	display: none !important
-}`
+}`,
+        customJs: ""
     },
     "calendar": {
         url: "https://calendar.google.com/calendar",
@@ -45,7 +47,8 @@ div[style*="min-width: 238px"] {
 }
 div[style*="min-width: 238px"] span[role*="heading"] {
     display: none !important;
-}`
+}`,
+        customJs: ""
     },
     "keep": {
         url: "https://keep.google.com",
@@ -60,7 +63,8 @@ div[style*="min-width: 238px"] span[role*="heading"] {
 html > body > div:nth-child(2) > div:nth-child(2) > div:first-child,
 html > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child > a:first-child > span {
 	display: none !important;
-}`
+}`,
+        customJs: ""
     },
     "todoist": {
         url: "https://todoist.com",
@@ -87,7 +91,8 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
 
 .undo_toast {
 	width: 95%;
-}`
+}`,
+        customJs: ""
     },
     "notion": {
         url: "https://www.notion.so/",
@@ -98,7 +103,8 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
         openInCenter: true,
         zoomLevel: 1,
         forceIframe: false,
-        customCss: ""
+        customCss: "",
+        customJs: ""
     },
     "twitter": {
         url: "https://twitter.com",
@@ -109,7 +115,8 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
         openInCenter: false,
         zoomLevel: 1,
         forceIframe: false,
-        customCss: ""
+        customCss: "",
+        customJs: ""
     },
     "tasks": {
         url: "https://tasks.google.com/embed/?origin=https://calendar.google.com&fullWidth=1",
@@ -120,7 +127,8 @@ html > body > div:first-child > header:first-child > div > div:first-child > div
         openInCenter: false,
         zoomLevel: 1,
         forceIframe: false,
-        customCss: ""
+        customCss: "",
+        customJs: ""
     }
 };
 
@@ -139,6 +147,7 @@ export interface CustomFrameSettings {
     zoomLevel: number;
     forceIframe: boolean;
     customCss: string;
+    customJs: string;
 }
 
 export function getIcon(settings: CustomFrameSettings) {