added a way to change a site's zoom level

Closes #13

src/settings-tab.ts

@@ -76,6 +76,17 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         await this.plugin.saveSettings();
                     });
                 });
+            new Setting(this.containerEl)
+                .setName("Page Zoom")
+                .setDesc("The zoom that this frame's page should be displayed with, as a percentage.")
+                .addText(t => {
+                    t.inputEl.type = "number";
+                    t.setValue(String(frame.zoomLevel * 100));
+                    t.onChange(async v => {
+                        frame.zoomLevel = v.length ? Number(v) / 100 : 1;
+                        await this.plugin.saveSettings();
+                    });
+                });
             new Setting(this.containerEl)
                 .setName("Additional CSS")
                 .setDesc(createFragment(f => {
@@ -122,7 +133,7 @@ export class CustomFramesSettingTab extends PluginSettingTab {
                         url: "",
                         displayName: "New Frame",
                         icon: "",
-                        minimumWidth: 0,
+                        zoomLevel: 1,
                         customCss: "",
                         hideOnMobile: true
                     });

src/settings.ts

@@ -8,6 +8,7 @@ export const presets: Record<string, CustomFrame> = {
         displayName: "Obsidian Forum",
         icon: "edit",
         hideOnMobile: true,
+        zoomLevel: 1,
         customCss: ""
     },
     "calendar": {
@@ -15,6 +16,7 @@ export const presets: Record<string, CustomFrame> = {
         displayName: "Google Calendar",
         icon: "calendar",
         hideOnMobile: true,
+        zoomLevel: 1,
         customCss: `/* hide right-side menu, and some buttons */
 div.d6McF,
 div.pw6cBb,
@@ -31,6 +33,7 @@ div.dwlvNd {
         displayName: "Google Keep",
         icon: "files",
         hideOnMobile: true,
+        zoomLevel: 1,
         customCss: `/* hide the menu bar and the "Keep" text */
 .PvRhvb-qAWA2, .gb_2d.gb_Zc { 
 	display: none !important; 
@@ -41,6 +44,7 @@ div.dwlvNd {
         displayName: "Notion",
         icon: "box",
         hideOnMobile: true,
+        zoomLevel: 1,
         customCss: ""
     },
     "twitter": {
@@ -48,6 +52,7 @@ div.dwlvNd {
         displayName: "Twitter",
         icon: "twitter",
         hideOnMobile: true,
+        zoomLevel: 1,
         customCss: ""
     }
 };
@@ -62,5 +67,6 @@ export interface CustomFrame {
     displayName: string;
     icon: string;
     hideOnMobile: boolean;
+    zoomLevel: number;
     customCss: string;
 }

src/view.ts

@@ -50,10 +50,12 @@ export class CustomFrameView extends ItemView {
         this.contentEl.empty();
         this.contentEl.addClass("custom-frames-view");
 
+        let style = `padding: ${this.settings.padding}px;`;
         if (Platform.isDesktopApp) {
             this.frame = document.createElement("webview");
             this.frame.setAttribute("allowpopups", "");
             this.frame.addEventListener("dom-ready", () => {
+                this.frame.setZoomFactor(this.data.zoomLevel);
                 this.frame.insertCSS(this.data.customCss);
             });
         }
@@ -61,9 +63,10 @@ export class CustomFrameView extends ItemView {
             this.frame = document.createElement("iframe");
             this.frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation");
             this.frame.setAttribute("allow", "encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation;");
+            style += `transform: scale(${this.data.zoomLevel}); transform-origin: 0 0;`;
         }
         this.frame.addClass("custom-frames-frame");
-        this.frame.setAttribute("style", `padding: ${this.settings.padding}px`);
+        this.frame.setAttribute("style", style);
         this.frame.setAttribute("src", this.data.url);
         this.contentEl.appendChild(this.frame);
     }