diff --git a/src/frame.ts b/src/frame.ts index 56e8c76..8a727e3 100644 --- a/src/frame.ts +++ b/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 diff --git a/src/settings-tab.ts b/src/settings-tab.ts index 7601c5c..8a17a76 100644 --- a/src/settings-tab.ts +++ b/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 () => { diff --git a/src/settings.ts b/src/settings.ts index 5010534..4ae402b 100644 --- a/src/settings.ts +++ b/src/settings.ts @@ -12,7 +12,8 @@ export const presets: Record = { 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 = { #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) {