added discord to readme

* Improve preset styling for Google Keeps

* Remove pointer cursor from app logo

* Remove pointer cursor from app logo

---------

Co-authored-by: Ell <me@ellpeck.de>

.editorconfig

@@ -1,9 +1,9 @@
-# top-most EditorConfig file
-root = true
-
-[*]
-charset = utf-8
-insert_final_newline = true
-indent_style = tab
-indent_size = 4
-tab_width = 4
+# top-most EditorConfig file
+root = true
+
+[*]
+charset = utf-8
+insert_final_newline = true
+indent_style = space
+indent_size = 4
+tab_width = 4

.gitignore

@@ -1,22 +1,23 @@
-# vscode
-.vscode 
-
-# Intellij
-*.iml
-.idea
-
-# npm
-node_modules
-
-# Don't include the compiled main.js file in the repo.
-# They should be uploaded to GitHub releases instead.
-main.js
-
-# Exclude sourcemaps
-*.map
-
-# obsidian
-data.json
-
-# Exclude macOS Finder (System Explorer) View States
-.DS_Store
+# vscode
+.vscode
+
+# Intellij
+*.iml
+.idea
+
+# npm
+node_modules
+
+# Don't include the compiled main.js file in the repo.
+# They should be uploaded to GitHub releases instead.
+/main.js
+
+# Exclude sourcemaps
+*.map
+
+# obsidian
+workspace
+workspace.json
+
+# Exclude macOS Finder (System Explorer) View States
+.DS_Store

CONTRIBUTING.md

@@ -0,0 +1,5 @@
+Hi, thanks for contributing to Custom Frames!
+
+Before reporting an issue or suggesting a new feature, please check the [README](README.md)'s [Roadmap](README.md#%EF%B8%8F-roadmap) and [Known Issues](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/README.md#%EF%B8%8F-known-issues) sections. If your issue or suggestion is already listed there, you don't need to report it here.
+
+Thanks! ❤️

README.md

@@ -1,32 +1,75 @@
-# Obsidian Custom Frames
-An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.
-
-⚠️⚠️⚠️ **For header-heavy sites like Google Keep to work, this plugin requires Obsidian 0.14.3.** ⚠️⚠️⚠️
-
-![A screenshot of the plugin in action](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot.png)
-
-![A screenshot of the plugin's settings](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/settings.png)
-
-## Usage
-To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the 'Custom Frames: Open' command.
-
-## Presets
-By default, Custom Frames comes with a few presets that allow you to get new panes for popular sites up and running quickly.
-- [Obsidian Forum](https://forum.obsidian.md/)
-- [Google Keep](https://keep.google.com), optimized for a narrow pane on the side
-- [Notion](https://www.notion.so/) (it's recommended to close Notion's sidebar if used as a side pane)
-
-If you create a frame that you think other people would like, don't hesitate to create a pull request with [a new preset](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/main.ts#L7).
-
-## Roadmap
-- ~~Allow setting a custom icon for each pane~~
-- Allow displaying custom frames in Markdown code blocks
-- Allow creating links that open in a custom frame rather than the browser
-- Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored)
-
-## Acknowledgements
-Thanks to [lishid](https://github.com/lishid) for their help with making iframes work in Obsidian for a purpose like this. Also thanks to them for *motivating* me to turn Obsidian Keep into a more versatile plugin, which is how Custom Frames was born.
-
-If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!
-
-[![Support me (if you want), via Patreon, Ko-fi or GitHub Sponsors](https://ellpeck.de/res/generalsupport.png)](https://ellpeck.de/support)
+# Obsidian Custom Frames
+An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.
+
+![A screenshot of the plugin in action, where you can see Google Keep attached as a narrow side pane on the right](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot.png)
+
+![A screenshot of the plugin in action, where you can see Google Calendar opened in the center, and the mouse hovering over the corresponding ribbon button](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/screenshot-big.png)
+
+![A screenshot of the plugin's settings](https://raw.githubusercontent.com/Ellpeck/ObsidianCustomFrames/master/settings.png)
+
+## 🤔 Usage
+To use this plugin, simply go into its settings and add a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself.
+
+### 🪟 Pane Mode
+To open a Custom Frame as a pane, you can use the "Custom Frames: Open" command.
+
+There are also plenty of settings to customize your frame further, including adding custom CSS to the site, adding a ribbon icon, displaying the frame in the center of the editor, and more.
+
+### 🗒️ Markdown Mode
+You can also display your custom frames in your Markdown documents. Custom Frames adds a special code block syntax that transforms the code block into a custom frame in Live Preview and Reading mode. Your code block should look like this:
+~~~
+```custom-frames
+frame: YOUR FRAME'S NAME
+```
+~~~
+
+Optionally, you can also pass custom style settings to the embed, which allows you to change things like the embed's height, as well as an additional suffix that will be appended to the frame's regular URL, which can be useful for things like displaying a specific note in Google Keep.
+
+Here's an example using the [Google Keep preset](#-presets):
+~~~
+```custom-frames
+frame: Google Keep
+style: height: 1000px;
+urlSuffix: #reminders
+```
+~~~
+
+### 📱 On Obsidian Mobile
+Unfortunately, Obsidian Mobile does not run on [Electron](https://www.electronjs.org/), which is what allows iframes and [webviews](https://www.electronjs.org/docs/latest/api/webview-tag) to be displayed with very few restrictions related to cookies, cross-origin resource sharing, and so on. This means that a lot of sites won't work there, especially ones that you have to log in to. However, when you create a frame, you can toggle the "Disable on Mobile" option to hide a Desktop-only frame in Obsidian mobile.
+
+Need help using the plugin? Feel free to join the Discord server!
+
+[![Join the Discord server](https://ellpeck.de/res/discord-wide.png)](https://link.ellpeck.de/discordweb)
+
+## 📦 Presets
+By default, Custom Frames comes with a few presets that allow you to get new panes for popular sites up and running quickly.
+- [Obsidian Forum](https://forum.obsidian.md/)
+- [Google Keep](https://keep.google.com), optimized for a narrow pane on the side
+- [Google Calendar](https://calendar.google.com/calendar/u/0/r/day), optimized by removing some buttons. Close side panel with top-left button.
+- [Todoist](https://todoist.com), optimized for a narrow (half-height) side panel by removing some buttons and slimming margins.
+- [Notion](https://www.notion.so/) (it's recommended to close Notion's sidebar if used as a side pane)
+- [Twitter](https://twitter.com)
+
+If you create a frame that you think other people would like, don't hesitate to create a pull request with [a new preset](https://github.com/Ellpeck/ObsidianCustomFrames/blob/master/src/settings.ts#L5).
+
+## 🛣️ Roadmap
+- ~~Allow setting a custom icon for each pane~~
+- ~~Allow displaying custom frames in Markdown code blocks~~
+- ~~Add the ability to add a ribbon button for a frame that opens it in the main view~~
+- Allow creating links outside of Obsidian that open in a custom frame
+- Possibly allow executing custom JavaScript in iframes (though security implications still need to be explored)
+- Add a global setting that causes popups to be opened in a new Obsidian window rather than the default browser
+- Add more options to Markdown mode, like allowing for back and forward buttons
+- Possibly allow extracting selected text into a note similar to how the Note composer plugin works, and potentially allow using a note template that includes the link to the site extracted from
+
+## ⚠️ Known Issues
+There are a few known issues with Custom Frames. If you encounter any of these, please **don't** report it on the issue tracker.
+- Popups and new tabs are currently opened in the default browser rather than the custom frame. You can find more info, including workarounds for logging in to certain sites, in [this issue](https://github.com/Ellpeck/ObsidianCustomFrames/issues/40).
+- Some links refuse to open from within custom frames, especially before Obsidian 1.3.7. You can find more info in [this issue](https://github.com/Ellpeck/ObsidianCustomFrames/issues/76).
+
+## 🙏 Acknowledgements
+Thanks to [lishid](https://github.com/lishid) for their help with making iframes work in Obsidian for a purpose like this. Also thanks to them for *motivating* me to turn Obsidian Keep into a more versatile plugin, which is how Custom Frames was born.
+
+If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!
+
+[![Support me (if you want), via Patreon, Ko-fi or GitHub Sponsors](https://ellpeck.de/res/generalsupport-wide.png)](https://ellpeck.de/support)

esbuild.config.mjs

@@ -1,52 +1,60 @@
 import esbuild from "esbuild";
 import process from "process";
-import builtins from 'builtin-modules'
+import builtins from 'builtin-modules';
+import {copy} from 'esbuild-plugin-copy';
 
-const banner =
-`/*
+const banner = `/*
 THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
 if you want to view the source, please visit the github repository of this plugin
-*/
-`;
+*/`;
 
 const prod = (process.argv[2] === 'production');
 
 esbuild.build({
-	banner: {
-		js: banner,
-	},
-	entryPoints: ['main.ts'],
-	bundle: true,
-	external: [
-		'obsidian',
-		'electron',
-		'@codemirror/autocomplete',
-		'@codemirror/closebrackets',
-		'@codemirror/collab',
-		'@codemirror/commands',
-		'@codemirror/comment',
-		'@codemirror/fold',
-		'@codemirror/gutter',
-		'@codemirror/highlight',
-		'@codemirror/history',
-		'@codemirror/language',
-		'@codemirror/lint',
-		'@codemirror/matchbrackets',
-		'@codemirror/panel',
-		'@codemirror/rangeset',
-		'@codemirror/rectangular-selection',
-		'@codemirror/search',
-		'@codemirror/state',
-		'@codemirror/stream-parser',
-		'@codemirror/text',
-		'@codemirror/tooltip',
-		'@codemirror/view',
-		...builtins],
-	format: 'cjs',
-	watch: !prod,
-	target: 'es2016',
-	logLevel: "info",
-	sourcemap: prod ? false : 'inline',
-	treeShaking: true,
-	outfile: 'main.js',
+    banner: {
+        js: banner,
+    },
+    entryPoints: ['src/main.ts'],
+    bundle: true,
+    external: [
+        'obsidian',
+        'electron',
+        '@codemirror/autocomplete',
+        '@codemirror/closebrackets',
+        '@codemirror/collab',
+        '@codemirror/commands',
+        '@codemirror/comment',
+        '@codemirror/fold',
+        '@codemirror/gutter',
+        '@codemirror/highlight',
+        '@codemirror/history',
+        '@codemirror/language',
+        '@codemirror/lint',
+        '@codemirror/matchbrackets',
+        '@codemirror/panel',
+        '@codemirror/rangeset',
+        '@codemirror/rectangular-selection',
+        '@codemirror/search',
+        '@codemirror/state',
+        '@codemirror/stream-parser',
+        '@codemirror/text',
+        '@codemirror/tooltip',
+        '@codemirror/view',
+        ...builtins
+    ],
+    plugins: [
+        copy({
+            assets: [{
+                from: ["./manifest.json", "./main.js", "./styles.css"],
+                to: ["./test-vault/.obsidian/plugins/obsidian-custom-frames/."]
+            }]
+        }),
+    ],
+    format: 'cjs',
+    watch: !prod,
+    target: 'es2016',
+    logLevel: "info",
+    sourcemap: prod ? false : 'inline',
+    treeShaking: true,
+    outfile: 'main.js',
 }).catch(() => process.exit(1));

main.ts

@@ -1,341 +0,0 @@
-import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf, Platform, Menu } from "obsidian";
-
-const defaultSettings: CustomFramesSettings = {
-	frames: [],
-	padding: 5
-};
-const presets: Record<string, CustomFrame> = {
-	"obsidian": {
-		url: "https://forum.obsidian.md/",
-		displayName: "Obsidian Forum",
-		icon: "edit",
-		hideOnMobile: true,
-		minimumWidth: 367,
-		customCss: ""
-	},
-	"keep": {
-		url: "https://keep.google.com",
-		displayName: "Google Keep",
-		icon: "files",
-		hideOnMobile: true,
-		minimumWidth: 370,
-		customCss: `/* hide the menu bar and the "Keep" text */
-.PvRhvb-qAWA2, .gb_2d.gb_Zc { 
-	display: none !important; 
-}`
-	},
-	"notion": {
-		url: "https://www.notion.so/",
-		displayName: "Notion",
-		icon: "box",
-		hideOnMobile: true,
-		minimumWidth: 400,
-		customCss: ""
-	}
-};
-
-interface CustomFramesSettings {
-	frames: CustomFrame[];
-	padding: number;
-}
-
-interface CustomFrame {
-	url: string;
-	displayName: string;
-	icon: string;
-	hideOnMobile: boolean;
-	minimumWidth: number;
-	customCss: string;
-}
-
-export default class CustomFramesPlugin extends Plugin {
-
-	settings: CustomFramesSettings;
-
-	async onload(): Promise<void> {
-		await this.loadSettings();
-
-		for (let frame of this.settings.frames) {
-			if (!frame.url || !frame.displayName)
-				continue;
-			let name = `custom-frames-${frame.displayName.toLowerCase().replace(/\s/g, "-")}`;
-			if (Platform.isMobileApp && frame.hideOnMobile) {
-				console.log(`Skipping frame ${name} which is hidden on mobile`);
-				continue;
-			}
-			try {
-				console.log(`Registering frame ${name} for URL ${frame.url}`);
-
-				this.registerView(name, l => new CustomFrameView(l, this.settings, frame, name));
-				this.addCommand({
-					id: `open-${name}`,
-					name: `Open ${frame.displayName}`,
-					callback: () => this.openLeaf(name),
-				});
-			} catch {
-				console.error(`Couldn't register frame ${name}, is there already one with the same name?`);
-			}
-		}
-
-		this.addSettingTab(new CustomFramesSettingTab(this.app, this));
-	}
-
-	async loadSettings() {
-		this.settings = Object.assign({}, defaultSettings, await this.loadData());
-	}
-
-	async saveSettings() {
-		await this.saveData(this.settings);
-	}
-
-	private async openLeaf(name: string): Promise<void> {
-		if (!this.app.workspace.getLeavesOfType(name).length)
-			await this.app.workspace.getRightLeaf(false).setViewState({ type: name });
-		this.app.workspace.revealLeaf(this.app.workspace.getLeavesOfType(name)[0]);
-	}
-}
-
-class CustomFrameView extends ItemView {
-
-	private readonly settings: CustomFramesSettings;
-	private readonly data: CustomFrame;
-	private readonly name: string;
-	private frame: HTMLIFrameElement | any;
-
-	constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, data: CustomFrame, name: string) {
-		super(leaf);
-		this.settings = settings;
-		this.data = data;
-		this.name = name;
-
-		this.addAction("refresh-cw", "Refresh", () => this.refresh());
-		this.addAction("home", "Return to original page", () => this.return());
-	}
-
-	onload(): void {
-		this.contentEl.empty();
-		this.contentEl.addClass("custom-frames-view");
-
-		if (Platform.isDesktopApp) {
-			this.frame = document.createElement("webview");
-			this.frame.setAttribute("allowpopups", "");
-			this.frame.addEventListener("dom-ready", () => {
-				this.frame.insertCSS(this.data.customCss);
-
-				if (this.data.minimumWidth) {
-					let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
-					if (parent) {
-						let minWidth = `${this.data.minimumWidth + 2 * this.settings.padding}px`;
-						if (parent.style.width < minWidth)
-							parent.style.width = minWidth;
-					}
-				}
-			});
-		}
-		else {
-			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;");
-		}
-		this.frame.addClass("custom-frames-frame");
-		this.frame.setAttribute("style", `padding: ${this.settings.padding}px`);
-		this.frame.setAttribute("src", this.data.url);
-		this.contentEl.appendChild(this.frame);
-	}
-
-	onHeaderMenu(menu: Menu): void {
-		super.onHeaderMenu(menu);
-		menu.addItem(i => {
-			i.setTitle("Refresh");
-			i.setIcon("refresh-cw");
-			i.onClick(() => this.refresh());
-		});
-		menu.addItem(i => {
-			i.setTitle("Return to original page");
-			i.setIcon("home");
-			i.onClick(() => this.return());
-		});
-	}
-
-	getViewType(): string {
-		return this.name;
-	}
-
-	getDisplayText(): string {
-		return this.data.displayName;
-	}
-
-	getIcon(): string {
-		return this.data.icon ? `lucide-${this.data.icon}` : "documents";
-	}
-
-	private refresh(): void {
-		if (this.frame instanceof HTMLIFrameElement) {
-			this.frame.contentWindow.location.reload();
-		} else {
-			this.frame.reload();
-		}
-	}
-
-	private return(): void {
-		if (this.frame instanceof HTMLIFrameElement) {
-			this.frame.contentWindow.open(this.data.url);
-		} else {
-			this.frame.loadURL(this.data.url);
-		}
-	}
-}
-
-class CustomFramesSettingTab extends PluginSettingTab {
-
-	plugin: CustomFramesPlugin;
-
-	constructor(app: App, plugin: CustomFramesPlugin) {
-		super(app, plugin);
-		this.plugin = plugin;
-	}
-
-	display(): void {
-		this.containerEl.empty();
-		this.containerEl.createEl("h2", { text: "Custom Frames Settings" });
-		this.containerEl.createEl("p", { text: "Note that Obsidian has to be restarted or reloaded for most of these settings to take effect.", cls: "mod-warning" });
-
-		new Setting(this.containerEl)
-			.setName("Frame Padding")
-			.setDesc("The padding that should be left around the inside of custom frame panes, in pixels.")
-			.addText(t => {
-				t.inputEl.type = "number";
-				t.setValue(String(this.plugin.settings.padding));
-				t.onChange(async v => {
-					this.plugin.settings.padding = v.length ? Number(v) : defaultSettings.padding;
-					await this.plugin.saveSettings();
-				});
-			});
-
-		for (let frame of this.plugin.settings.frames) {
-			let heading = this.containerEl.createEl("h3", { text: frame.displayName || "Unnamed Frame" });
-
-			new Setting(this.containerEl)
-				.setName("Display Name")
-				.setDesc("The display name that this frame should have.")
-				.addText(t => {
-					t.setValue(frame.displayName);
-					t.onChange(async v => {
-						frame.displayName = v;
-						heading.setText(frame.displayName || "Unnamed Frame");
-						await this.plugin.saveSettings();
-					});
-				});
-			new Setting(this.containerEl)
-				.setName("Icon")
-				.setDesc(createFragment(f => {
-					f.createSpan({ text: "The icon that this frame's pane should have. The names of any " });
-					f.createEl("a", { text: "Lucide icons", href: "https://lucide.dev/" });
-					f.createSpan({ text: " can be used." });
-				}))
-				.addText(t => {
-					t.setValue(frame.icon);
-					t.onChange(async v => {
-						frame.icon = v;
-						await this.plugin.saveSettings();
-					});
-				});
-			new Setting(this.containerEl)
-				.setName("URL")
-				.setDesc("The URL that should be opened in this frame.")
-				.addText(t => {
-					t.setValue(frame.url);
-					t.onChange(async v => {
-						frame.url = v;
-						await this.plugin.saveSettings();
-					});
-				});
-			new Setting(this.containerEl)
-				.setName("Disable on Mobile")
-				.setDesc("Custom Frames is a lot more restricted on mobile devices and doesn't allow for the same types of content to be displayed. If a frame doesn't work as expected on mobile, it can be disabled.")
-				.addToggle(t => {
-					t.setValue(frame.hideOnMobile);
-					t.onChange(async v => {
-						frame.hideOnMobile = v;
-						await this.plugin.saveSettings();
-					});
-				});
-			new Setting(this.containerEl)
-				.setName("Minimum Width")
-				.setDesc(createFragment(f => {
-					f.createSpan({ text: "The width that this frame's pane should be adjusted to automatically if it is lower. Set to 0 to disable." });
-					f.createEl("br");
-					f.createEl("em", { text: "Note that this is only applied on Desktop." });
-				}))
-				.addText(t => {
-					t.inputEl.type = "number";
-					t.setValue(String(frame.minimumWidth));
-					t.onChange(async v => {
-						frame.minimumWidth = v.length ? Number(v) : 0;
-						await this.plugin.saveSettings();
-					});
-				});
-			new Setting(this.containerEl)
-				.setName("Additional CSS")
-				.setDesc(createFragment(f => {
-					f.createSpan({ text: "A snippet of additional CSS 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.customCss);
-					t.onChange(async v => {
-						frame.customCss = v;
-						await this.plugin.saveSettings();
-					});
-				});
-
-			new ButtonComponent(this.containerEl)
-				.setButtonText("Remove Frame")
-				.onClick(async () => {
-					this.plugin.settings.frames.remove(frame);
-					await this.plugin.saveSettings();
-					this.display();
-				});
-		}
-
-		this.containerEl.createEl("hr");
-		let info = this.containerEl.createEl("p", { text: "Create a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the \"Custom Frames: Open\" command." });
-		info.createEl("br");
-		info.createSpan({ text: "Note that Obsidian has to be restarted or reloaded to activate a newly added frame.", cls: "mod-warning" });
-
-		let addDiv = this.containerEl.createDiv();
-		addDiv.addClass("custom-frames-add");
-		let dropdown = new DropdownComponent(addDiv);
-		dropdown.addOption("new", "Custom");
-		for (let key of Object.keys(presets))
-			dropdown.addOption(key, presets[key].displayName);
-		new ButtonComponent(addDiv)
-			.setButtonText("Add Frame")
-			.onClick(async () => {
-				let option = dropdown.getValue();
-				if (option == "new") {
-					this.plugin.settings.frames.push({
-						url: "",
-						displayName: "New Frame",
-						icon: "",
-						minimumWidth: 0,
-						customCss: "",
-						hideOnMobile: true
-					});
-				}
-				else {
-					this.plugin.settings.frames.push(presets[option]);
-				}
-				await this.plugin.saveSettings();
-				this.display();
-			});
-
-		this.containerEl.createEl("hr");
-		this.containerEl.createEl("p", { text: "If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!" });
-		this.containerEl.createEl("a", { href: "https://ellpeck.de/support" })
-			.createEl("img", { attr: { src: "https://ellpeck.de/res/generalsupport.png" }, cls: "custom-frames-support" });
-	}
-}

manifest.json

@@ -1,10 +1,10 @@
-{
-	"id": "obsidian-custom-frames",
-	"name": "Custom Frames",
-	"version": "2.2.0",
-	"minAppVersion": "0.14.3",
-	"description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.",
-	"author": "Ellpeck",
-	"authorUrl": "https://ellpeck.de",
-	"isDesktopOnly": false
-}
+{
+    "id": "obsidian-custom-frames",
+    "name": "Custom Frames",
+    "version": "2.4.7",
+    "minAppVersion": "1.2.0",
+    "description": "A plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.",
+    "author": "Ellpeck",
+    "authorUrl": "https://ellpeck.de",
+    "isDesktopOnly": false
+}

package.json

@@ -1,23 +1,24 @@
 {
-	"name": "obsidian-custom-frames",
-	"version": "2.2.0",
-	"description": "An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep and more.",
-	"main": "main.js",
-	"scripts": {
-		"dev": "node esbuild.config.mjs",
-		"build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
-		"version": "node version-bump.mjs && git add manifest.json versions.json"
-	},
-	"keywords": [],
-	"author": "Ellpeck",
-	"license": "MIT",
-	"devDependencies": {
-		"@types/node": "^16.11.6",
-		"builtin-modules": "^3.2.0",
-		"electron": "^13.6.2",
-		"esbuild": "0.13.12",
-		"obsidian": "latest",
-		"tslib": "2.3.1",
-		"typescript": "4.4.4"
-	}
+    "name": "obsidian-custom-frames",
+    "version": "2.4.7",
+    "description": "An Obsidian plugin that turns web apps into panes using iframes with custom styling. Also comes with presets for Google Keep, Todoist and more.",
+    "main": "main.js",
+    "scripts": {
+        "dev": "node esbuild.config.mjs",
+        "build": "tsc -noEmit -skipLibCheck && node esbuild.config.mjs production",
+        "version": "node version-bump.mjs && git add manifest.json versions.json"
+    },
+    "keywords": [],
+    "author": "Ellpeck",
+    "license": "MIT",
+    "devDependencies": {
+        "@types/node": "^16.11.6",
+        "builtin-modules": "^3.2.0",
+        "electron": "^20.3.9",
+        "esbuild": "0.14.0",
+        "esbuild-plugin-copy": "^1.3.0",
+        "obsidian": "latest",
+        "tslib": "2.3.1",
+        "typescript": "4.4.4"
+    }
 }

src/frame.ts

@@ -0,0 +1,109 @@
+import { Platform } from "obsidian";
+import { CustomFrameSettings, CustomFramesSettings, getId } from "./settings";
+
+export class CustomFrame {
+
+    private readonly settings: CustomFramesSettings;
+    private readonly data: CustomFrameSettings;
+    private frame: HTMLIFrameElement | any;
+
+    constructor(settings: CustomFramesSettings, data: CustomFrameSettings) {
+        this.settings = settings;
+        this.data = data;
+    }
+
+    create(parent: HTMLElement, additionalStyle: string = undefined, urlSuffix: string = undefined): void {
+        let style = `padding: ${this.settings.padding}px;`;
+        if (additionalStyle)
+            style += additionalStyle;
+        if (Platform.isDesktopApp && !this.data.forceIframe) {
+            let frameDoc = parent.doc;
+            this.frame = frameDoc.createElement("webview");
+            parent.appendChild(this.frame);
+            this.frame.setAttribute("allowpopups", "");
+            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
+                if (frameDoc != parent.doc) {
+                    this.frame.detach();
+                    this.create(parent, additionalStyle, urlSuffix);
+                }
+            });
+        } else {
+            this.frame = parent.doc.createElement("iframe");
+            parent.appendChild(this.frame);
+            this.frame.setAttribute("sandbox", "allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads");
+            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.addClass(`custom-frames-${getId(this.data)}`);
+        this.frame.setAttribute("style", style);
+
+        let src = this.data.url;
+        if (urlSuffix) {
+            if (!urlSuffix.startsWith("/"))
+                src += "/";
+            src += urlSuffix;
+        }
+        this.frame.setAttribute("src", src);
+    }
+
+    refresh(): void {
+        if (this.frame instanceof HTMLIFrameElement) {
+            this.frame.contentWindow.location.reload();
+        } else {
+            this.frame.reload();
+        }
+    }
+
+    return(): void {
+        if (this.frame instanceof HTMLIFrameElement) {
+            this.frame.contentWindow.open(this.data.url);
+        } else {
+            this.frame.loadURL(this.data.url);
+        }
+    }
+
+    goBack(): void {
+        if (this.frame instanceof HTMLIFrameElement) {
+            this.frame.contentWindow.history.back();
+        } else {
+            this.frame.goBack();
+        }
+    }
+
+    goForward(): void {
+        if (this.frame instanceof HTMLIFrameElement) {
+            this.frame.contentWindow.history.forward();
+        } else {
+            this.frame.goForward();
+        }
+    }
+
+    toggleDevTools(): void {
+        if (!(this.frame instanceof HTMLIFrameElement)) {
+            if (!this.frame.isDevToolsOpened()) {
+                this.frame.openDevTools();
+            } else {
+                this.frame.closeDevTools();
+            }
+        }
+    }
+
+    getCurrentUrl(): string {
+        return this.frame instanceof HTMLIFrameElement ? this.frame.contentWindow.location.href : this.frame.getURL();
+    }
+
+    focus(): void {
+        if (this.frame instanceof HTMLIFrameElement) {
+            this.frame.contentWindow.focus();
+        } else {
+            this.frame.focus();
+        }
+    }
+}

src/main.ts

@@ -0,0 +1,97 @@
+import { Plugin, Platform, WorkspaceLeaf } from "obsidian";
+import { CustomFrame } from "./frame";
+import { CustomFramesSettings, defaultSettings, getIcon, getId } from "./settings";
+import { CustomFramesSettingTab } from "./settings-tab";
+import { CustomFrameView } from "./view";
+
+export default class CustomFramesPlugin extends Plugin {
+
+    settings: CustomFramesSettings;
+
+    async onload(): Promise<void> {
+        await this.loadSettings();
+
+        for (let frame of this.settings.frames) {
+            if (!frame.url || !frame.displayName)
+                continue;
+            let name = `custom-frames-${getId(frame)}`;
+            if (Platform.isMobileApp && frame.hideOnMobile) {
+                console.log(`Skipping frame ${name} which is hidden on mobile`);
+                continue;
+            }
+            try {
+                console.log(`Registering frame ${name} for URL ${frame.url}`);
+
+                this.registerView(name, l => new CustomFrameView(l, this.settings, frame, name));
+                this.addCommand({
+                    id: `open-${name}`,
+                    name: `Open ${frame.displayName}`,
+                    callback: () => this.openLeaf(name, frame.openInCenter, false),
+                });
+
+                if (frame.addRibbonIcon)
+                    this.addRibbonIcon(getIcon(frame), `Open ${frame.displayName}`,
+                        e => this.openLeaf(name, frame.openInCenter, Platform.isMacOS ? e.metaKey : e.ctrlKey));
+            } catch {
+                console.error(`Couldn't register frame ${name}, is there already one with the same name?`);
+            }
+        }
+
+        this.addSettingTab(new CustomFramesSettingTab(this.app, this));
+
+        this.registerMarkdownCodeBlockProcessor("custom-frames", (s, e) => {
+            e.empty();
+            e.addClass("custom-frames-view-file");
+
+            let frameMatch = /frame:([^\n]+)/gi.exec(s);
+            let frameName = frameMatch && frameMatch[1].trim();
+            if (!frameName) {
+                e.createSpan({ text: "Couldn't parse frame name" });
+                return;
+            }
+            let data = this.settings.frames.find(f => f.displayName == frameName);
+            if (!data) {
+                e.createSpan({ text: `Couldn't find a frame with name ${frameName}` });
+                return;
+            }
+            if (Platform.isMobileApp && data.hideOnMobile) {
+                e.createSpan({ text: `${frameName} is hidden on mobile` });
+                return;
+            }
+
+            let styleMatch = /style:([^\n]+)/gi.exec(s);
+            let style = styleMatch && styleMatch[1].trim();
+            style ||= "height: 600px;";
+
+            let urlSuffixMatch = /urlsuffix:([^\n]+)/gi.exec(s);
+            let urlSuffix = urlSuffixMatch && urlSuffixMatch[1].trim();
+            urlSuffix ||= "";
+
+            let frame = new CustomFrame(this.settings, data);
+            frame.create(e, style, urlSuffix);
+        });
+    }
+
+    async loadSettings() {
+        this.settings = Object.assign({}, defaultSettings, await this.loadData());
+    }
+
+    async saveSettings() {
+        await this.saveData(this.settings);
+    }
+
+    private async openLeaf(name: string, center: boolean, split: boolean): Promise<void> {
+        let leaf: WorkspaceLeaf;
+        if (center) {
+            leaf = this.app.workspace.getLeaf(split);
+            await leaf.setViewState({ type: name, active: true });
+        } else {
+            if (!this.app.workspace.getLeavesOfType(name).length)
+                await this.app.workspace.getRightLeaf(false).setViewState({ type: name, active: true });
+            leaf = this.app.workspace.getLeavesOfType(name)[0];
+            this.app.workspace.revealLeaf(leaf);
+        }
+        if (leaf.view instanceof CustomFrameView)
+            leaf.view.focus();
+    }
+}

src/settings-tab.ts

@@ -0,0 +1,226 @@
+import { App, ButtonComponent, DropdownComponent, PluginSettingTab, Setting } from "obsidian";
+import { defaultSettings, presets } from "./settings";
+import CustomFramesPlugin from "./main";
+
+export class CustomFramesSettingTab extends PluginSettingTab {
+
+    plugin: CustomFramesPlugin;
+
+    constructor(app: App, plugin: CustomFramesPlugin) {
+        super(app, plugin);
+        this.plugin = plugin;
+    }
+
+    display(): void {
+        this.containerEl.empty();
+        this.containerEl.createEl("h2", { text: "Custom Frames Settings" });
+        this.containerEl.createEl("p", {
+            text: "Please note that Obsidian has to be restarted or reloaded for most of these settings to take effect.",
+            cls: "mod-warning"
+        });
+
+        new Setting(this.containerEl)
+            .setName("Frame Padding")
+            .setDesc("The padding that should be left around the inside of custom frame panes, in pixels.")
+            .addText(t => {
+                t.inputEl.type = "number";
+                t.setValue(String(this.plugin.settings.padding));
+                t.onChange(async v => {
+                    this.plugin.settings.padding = v.length ? Number(v) : defaultSettings.padding;
+                    await this.plugin.saveSettings();
+                });
+            });
+
+        for (let frame of this.plugin.settings.frames) {
+            let heading = this.containerEl.createEl("h3", { text: frame.displayName || "Unnamed Frame" });
+            let toggle = new ButtonComponent(this.containerEl)
+                .setButtonText("Show Settings")
+                .setClass("custom-frames-show")
+                .onClick(async () => {
+                    content.hidden = !content.hidden;
+                    toggle.setButtonText(content.hidden ? "Show Settings" : "Hide Settings");
+                });
+            let content = this.containerEl.createDiv();
+            content.hidden = true;
+
+            new Setting(content)
+                .setName("Display Name")
+                .setDesc("The display name that this frame should have.")
+                .addText(t => {
+                    t.setValue(frame.displayName);
+                    t.onChange(async v => {
+                        frame.displayName = v;
+                        heading.setText(frame.displayName || "Unnamed Frame");
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .setName("Icon")
+                .setDesc(createFragment(f => {
+                    f.createSpan({ text: "The icon that this frame's pane should have. The names of any " });
+                    f.createEl("a", { text: "Lucide icons", href: "https://lucide.dev/" });
+                    f.createSpan({ text: " can be used." });
+                }))
+                .addText(t => {
+                    t.setValue(frame.icon);
+                    t.onChange(async v => {
+                        frame.icon = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .setName("URL")
+                .setDesc("The URL that should be opened in this frame.")
+                .addText(t => {
+                    t.setValue(frame.url);
+                    t.onChange(async v => {
+                        frame.url = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .setName("Disable on Mobile")
+                .setDesc("Custom Frames is a lot more restricted on mobile devices and doesn't allow for the same types of content to be displayed. If a frame doesn't work as expected on mobile, it can be disabled.")
+                .addToggle(t => {
+                    t.setValue(frame.hideOnMobile);
+                    t.onChange(async v => {
+                        frame.hideOnMobile = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .setName("Add Ribbon Icon")
+                .setDesc("Whether a button to open this frame should be added to the ribbon.")
+                .addToggle(t => {
+                    t.setValue(frame.addRibbonIcon);
+                    t.onChange(async v => {
+                        frame.addRibbonIcon = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .setName("Open in Center")
+                .setDesc("Whether this frame should be opened in the unpinned center editor rather than one of the panes on the side. This is useful for sites that don't work well in a narrow view, or sites that don't require a note to be open when viewed.")
+                .addToggle(t => {
+                    t.setValue(frame.openInCenter);
+                    t.onChange(async v => {
+                        frame.openInCenter = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .setName("Force iframe")
+                .setDesc(createFragment(f => {
+                    f.createSpan({ text: "Whether this frame should use iframes on desktop as opposed to Electron webviews." });
+                    f.createEl("br");
+                    f.createEl("em", { text: "Only enable this setting if the frame is causing issues or frequent crashes. This setting causes all Desktop-only settings to be ignored." });
+                }))
+                .addToggle(t => {
+                    t.setValue(frame.forceIframe);
+                    t.onChange(async v => {
+                        frame.forceIframe = v;
+                        await this.plugin.saveSettings();
+                    });
+                });
+            new Setting(content)
+                .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(content)
+                .setName("Additional CSS")
+                .setDesc(createFragment(f => {
+                    f.createSpan({ text: "A snippet of additional CSS 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.customCss);
+                    t.onChange(async v => {
+                        frame.customCss = v;
+                        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 () => {
+                    this.plugin.settings.frames.remove(frame);
+                    await this.plugin.saveSettings();
+                    this.display();
+                });
+        }
+
+        this.containerEl.createEl("hr");
+        this.containerEl.createEl("p", { text: "Create a new frame, either from a preset shipped with the plugin, or a custom one that you can edit yourself. Each frame's pane can be opened using the \"Custom Frames: Open\" command." });
+
+        let addDiv = this.containerEl.createDiv();
+        let dropdown = new DropdownComponent(addDiv);
+        dropdown.addOption("new", "Custom");
+        for (let key of Object.keys(presets))
+            dropdown.addOption(key, presets[key].displayName);
+        new ButtonComponent(addDiv)
+            .setButtonText("Add Frame")
+            .setClass("custom-frames-add")
+            .onClick(async () => {
+                let option = dropdown.getValue();
+                if (option == "new") {
+                    this.plugin.settings.frames.push({
+                        url: "",
+                        displayName: "New Frame",
+                        icon: "",
+                        hideOnMobile: true,
+                        addRibbonIcon: false,
+                        openInCenter: false,
+                        zoomLevel: 1,
+                        forceIframe: false,
+                        customCss: "",
+                        customJs: ""
+                    });
+                } else {
+                    this.plugin.settings.frames.push(presets[option]);
+                }
+                await this.plugin.saveSettings();
+                this.display();
+            });
+
+        let disclaimer = this.containerEl.createEl("p", { cls: "mod-warning" });
+        disclaimer.createSpan({ text: "Please be advised that, when adding a site as a custom frame, you potentially expose personal information you enter to other plugins you have installed. For more information, see " });
+        disclaimer.createEl("a", {
+            text: "this discussion",
+            href: "https://github.com/Ellpeck/ObsidianCustomFrames/issues/54#issuecomment-1210879685",
+            cls: "mod-warning"
+        });
+        disclaimer.createSpan({ text: "." });
+
+        this.containerEl.createEl("hr");
+        this.containerEl.createEl("p", { text: "If you like this plugin and want to support its development, you can do so through my website by clicking this fancy image!" });
+        this.containerEl.createEl("a", { href: "https://ellpeck.de/support" }).createEl("img", {
+            attr: { src: "https://ellpeck.de/res/generalsupport.png" },
+            cls: "custom-frames-support"
+        });
+    }
+}

src/settings.ts

@@ -0,0 +1,164 @@
+export const defaultSettings: CustomFramesSettings = {
+    frames: [],
+    padding: 5
+};
+export const presets: Record<string, CustomFrameSettings> = {
+    "obsidian": {
+        url: "https://forum.obsidian.md/",
+        displayName: "Obsidian Forum",
+        icon: "edit",
+        hideOnMobile: true,
+        addRibbonIcon: true,
+        openInCenter: true,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: "",
+        customJs: ""
+    },
+    "detexify": {
+        url: "https://detexify.kirelabs.org/classify.html",
+        displayName: "Detexify",
+        icon: "type",
+        hideOnMobile: true,
+        addRibbonIcon: true,
+        openInCenter: false,
+        zoomLevel: .95,
+        forceIframe: false,
+        customCss: `/* hide info clutter and ad banner */
+#classify--info-area,
+.adsbygoogle {
+	display: none !important
+}`,
+        customJs: ""
+    },
+    "calendar": {
+        url: "https://calendar.google.com/calendar",
+        displayName: "Google Calendar",
+        icon: "calendar",
+        hideOnMobile: true,
+        addRibbonIcon: true,
+        openInCenter: true,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: `/* hide the menu bar "Calendar" text and remove minimum width */
+div[style*="min-width: 238px"] {
+    min-width: 0 !important;
+    padding-right: 0 !important;
+}
+div[style*="min-width: 238px"] span[role*="heading"] {
+    display: none !important;
+}`,
+        customJs: ""
+    },
+    "keep": {
+        url: "https://keep.google.com",
+        displayName: "Google Keep",
+        icon: "files",
+        hideOnMobile: true,
+        addRibbonIcon: false,
+        openInCenter: false,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: `/* hide the menu bar, the "Keep" text and the Google Apps button */
+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,
+html > body > div:first-child > header:first-child > div:nth-child(2) > div:first-child > div:first-child,
+html > body > div:first-child > header:first-child > div:nth-child(2) > div:nth-child(3) > div:first-child > div:first-child > div:first-child {
+	display: none !important;
+}
+html > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child > a:first-child {
+	cursor: default;
+}`,
+        customJs: ""
+    },
+    "todoist": {
+        url: "https://todoist.com",
+        displayName: "Todoist",
+        icon: "list-checks",
+        hideOnMobile: true,
+        addRibbonIcon: false,
+        openInCenter: false,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: `/* hide the help, home, search, and productivity overview buttons, create extra space, and prevent toast pop-up from acting weird */
+[aria-label="Go to Home view"], #quick_find, [aria-label="Productivity"], [aria-label="Help & Feedback"] {
+	display: none !important;
+}
+
+.view_content {
+	padding-left: 15px;
+}
+
+.view_header {
+	padding-left: 15px;
+	padding-top: 10px;
+}
+
+.undo_toast {
+	width: 95%;
+}`,
+        customJs: ""
+    },
+    "notion": {
+        url: "https://www.notion.so/",
+        displayName: "Notion",
+        icon: "box",
+        hideOnMobile: true,
+        addRibbonIcon: true,
+        openInCenter: true,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: "",
+        customJs: ""
+    },
+    "twitter": {
+        url: "https://twitter.com",
+        displayName: "Twitter",
+        icon: "twitter",
+        hideOnMobile: true,
+        addRibbonIcon: false,
+        openInCenter: false,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: "",
+        customJs: ""
+    },
+    "tasks": {
+        url: "https://tasks.google.com/embed/?origin=https://calendar.google.com&fullWidth=1",
+        displayName: "Google Tasks",
+        icon: "list-checks",
+        hideOnMobile: true,
+        addRibbonIcon: false,
+        openInCenter: false,
+        zoomLevel: 1,
+        forceIframe: false,
+        customCss: "",
+        customJs: ""
+    }
+};
+
+export interface CustomFramesSettings {
+    frames: CustomFrameSettings[];
+    padding: number;
+}
+
+export interface CustomFrameSettings {
+    url: string;
+    displayName: string;
+    icon: string;
+    hideOnMobile: boolean;
+    addRibbonIcon: boolean;
+    openInCenter: boolean;
+    zoomLevel: number;
+    forceIframe: boolean;
+    customCss: string;
+    customJs: string;
+}
+
+export function getIcon(settings: CustomFrameSettings) {
+    return settings.icon ? `lucide-${settings.icon}` : "documents";
+}
+
+export function getId(settings: CustomFrameSettings) {
+    return settings.displayName.toLowerCase().replace(/\s/g, "-");
+}

src/view.ts

@@ -0,0 +1,92 @@
+import { ItemView, WorkspaceLeaf, Menu } from "obsidian";
+import { CustomFrame } from "./frame";
+import { CustomFrameSettings, CustomFramesSettings, getIcon } from "./settings";
+
+export class CustomFrameView extends ItemView {
+
+    private static readonly actions: Action[] = [
+        {
+            name: "Return to original page",
+            icon: "home",
+            action: v => v.frame.return()
+        }, {
+            name: "Open dev tools",
+            icon: "binary",
+            action: v => v.frame.toggleDevTools()
+        }, {
+            name: "Copy link",
+            icon: "link",
+            action: v => navigator.clipboard.writeText(v.frame.getCurrentUrl())
+        }, {
+            name: "Open in browser",
+            icon: "globe",
+            action: v => open(v.frame.getCurrentUrl())
+        }, {
+            name: "Refresh",
+            icon: "refresh-cw",
+            action: v => v.frame.refresh()
+        }, {
+            name: "Go back",
+            icon: "arrow-left",
+            action: v => v.frame.goBack()
+        }, {
+            name: "Go forward",
+            icon: "arrow-right",
+            action: v => v.frame.goForward()
+        }
+    ];
+
+    private readonly data: CustomFrameSettings;
+    private readonly name: string;
+    private frame: CustomFrame;
+
+    constructor(leaf: WorkspaceLeaf, settings: CustomFramesSettings, data: CustomFrameSettings, name: string) {
+        super(leaf);
+        this.data = data;
+        this.name = name;
+        this.frame = new CustomFrame(settings, data);
+        this.navigation = data.openInCenter;
+
+        for (let action of CustomFrameView.actions)
+            this.addAction(action.icon, action.name, () => action.action(this));
+    }
+
+    onload(): void {
+        this.contentEl.empty();
+        this.contentEl.addClass("custom-frames-view");
+        this.frame.create(this.contentEl);
+    }
+
+    onPaneMenu(menu: Menu, source: string): void {
+        super.onPaneMenu(menu, source);
+        for (let action of CustomFrameView.actions) {
+            menu.addItem(i => {
+                i.setTitle(action.name);
+                i.setIcon(action.icon);
+                i.onClick(() => action.action(this));
+            });
+        }
+    }
+
+    getViewType(): string {
+        return this.name;
+    }
+
+    getDisplayText(): string {
+        return this.data.displayName;
+    }
+
+    getIcon(): string {
+        return getIcon(this.data);
+    }
+
+    focus(): void {
+        this.frame.focus();
+    }
+}
+
+interface Action {
+    name: string;
+    icon: string;
+    action: (view: CustomFrameView) => any;
+}

styles.css

@@ -1,22 +1,31 @@
 .custom-frames-view {
-	padding: 0 !important;
-	overflow: hidden !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+}
+
+.custom-frames-view-file {
+    padding: 0;
+    overflow: auto;
 }
 
 .custom-frames-frame {
-	width: 100%;
-	height: 100%;
-	border: none;
-	background-color: white;
-	background-clip: content-box;
+    width: 100%;
+    height: 100%;
+    border: none;
+    background-color: white;
+    background-clip: content-box;
 }
 
-.custom-frames-add button {
-	margin-left: 10px;
+.custom-frames-add {
+    margin-left: 10px;
+}
+
+.custom-frames-show {
+    margin-bottom: 18px;
 }
 
 .custom-frames-support {
-	max-width: 50%;
-	width: 400px;
-	height: auto;
+    max-width: 50%;
+    width: 400px;
+    height: auto;
 }

test-vault/.obsidian/app.json

@@ -0,0 +1,3 @@
+{
+  "promptDelete": false
+}

test-vault/.obsidian/appearance.json

@@ -0,0 +1,3 @@
+{
+  "accentColor": ""
+}

test-vault/.obsidian/community-plugins.json

@@ -0,0 +1,3 @@
+[
+  "obsidian-custom-frames"
+]

test-vault/.obsidian/core-plugins-migration.json

@@ -0,0 +1,30 @@
+{
+  "file-explorer": true,
+  "global-search": true,
+  "switcher": true,
+  "graph": true,
+  "backlink": true,
+  "outgoing-link": true,
+  "tag-pane": true,
+  "page-preview": true,
+  "daily-notes": true,
+  "templates": true,
+  "note-composer": true,
+  "command-palette": true,
+  "slash-command": false,
+  "editor-status": true,
+  "starred": true,
+  "markdown-importer": false,
+  "zk-prefixer": false,
+  "random-note": false,
+  "outline": true,
+  "word-count": true,
+  "slides": false,
+  "audio-recorder": false,
+  "workspaces": false,
+  "file-recovery": true,
+  "publish": false,
+  "sync": false,
+  "canvas": true,
+  "bookmarks": true
+}

test-vault/.obsidian/core-plugins.json

@@ -0,0 +1,20 @@
+[
+  "file-explorer",
+  "global-search",
+  "switcher",
+  "graph",
+  "backlink",
+  "canvas",
+  "outgoing-link",
+  "tag-pane",
+  "page-preview",
+  "daily-notes",
+  "templates",
+  "note-composer",
+  "command-palette",
+  "editor-status",
+  "bookmarks",
+  "outline",
+  "word-count",
+  "file-recovery"
+]

test-vault/.obsidian/graph.json

@@ -0,0 +1,22 @@
+{
+  "collapse-filter": true,
+  "search": "",
+  "showTags": false,
+  "showAttachments": false,
+  "hideUnresolved": false,
+  "showOrphans": true,
+  "collapse-color-groups": true,
+  "colorGroups": [],
+  "collapse-display": true,
+  "showArrow": false,
+  "textFadeMultiplier": 0,
+  "nodeSizeMultiplier": 1,
+  "lineSizeMultiplier": 1,
+  "collapse-forces": true,
+  "centerStrength": 0.518713248970312,
+  "repelStrength": 10,
+  "linkStrength": 1,
+  "linkDistance": 250,
+  "scale": 1,
+  "close": false
+}

test-vault/.obsidian/hotkeys.json

@@ -0,0 +1,11 @@
+{
+  "app:reload": [
+    {
+      "modifiers": [
+        "Mod",
+        "Shift"
+      ],
+      "key": "R"
+    }
+  ]
+}

test-vault/.obsidian/plugins/obsidian-custom-frames/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!data.json

test-vault/.obsidian/plugins/obsidian-custom-frames/data.json

@@ -0,0 +1,49 @@
+{
+  "frames": [
+    {
+      "url": "https://forum.obsidian.md/",
+      "displayName": "Obsidian Forum",
+      "icon": "edit",
+      "hideOnMobile": true,
+      "addRibbonIcon": true,
+      "openInCenter": true,
+      "zoomLevel": 1,
+      "forceIframe": false,
+      "customCss": ""
+    },
+    {
+      "url": "https://keep.google.com",
+      "displayName": "Google Keep",
+      "icon": "files",
+      "hideOnMobile": true,
+      "addRibbonIcon": false,
+      "openInCenter": false,
+      "zoomLevel": 1,
+      "forceIframe": false,
+      "customCss": "/* hide the menu bar, the \"Keep\" text and the Google Apps button */\nhtml > body > div:nth-child(2) > div:nth-child(2) > div:first-child, \nhtml > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child > a:first-child > span, \nhtml > body > div:first-child > header:first-child > div:nth-child(2) > div:first-child > div:first-child, \nhtml > body > div:first-child > header:first-child > div:nth-child(2) > div:nth-child(3) > div:first-child > div:first-child > div:first-child { \n\tdisplay: none !important; \n}\nhtml > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child > a:first-child {\n\tcursor: default; \n}"
+    },
+    {
+      "url": "https://calendar.google.com/calendar",
+      "displayName": "Google Calendar",
+      "icon": "calendar",
+      "hideOnMobile": true,
+      "addRibbonIcon": true,
+      "openInCenter": true,
+      "zoomLevel": 1,
+      "forceIframe": false,
+      "customCss": "/* hide the menu bar, \"Keep\" text, and logo */\nhtml > body > div:nth-child(2) > div:nth-child(2) > div:first-child[class*=\" \"],\nhtml > body > div:first-child > header:first-child > div > div:first-child > div > div:first-child,\nhtml > body > div:nth-child(2) > div:nth-child(2) > div:first-child > div:first-child {\ndisplay: none !important;\n}"
+    },
+    {
+      "url": "https://scholar.google.com",
+      "displayName": "Scholar",
+      "icon": "book",
+      "hideOnMobile": false,
+      "addRibbonIcon": true,
+      "openInCenter": false,
+      "zoomLevel": 1,
+      "forceIframe": false,
+      "customCss": ""
+    }
+  ],
+  "padding": 5
+}

test-vault/Untitled.canvas

@@ -0,0 +1,6 @@
+{
+	"nodes":[
+		{"id":"98d23d47aafe2b68","x":-480,"y":-360,"width":795,"height":535,"type":"link","url":"https://calendar.google.com"}
+	],
+	"edges":[]
+}

tsconfig.json

@@ -1,23 +1,23 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "inlineSourceMap": true,
-    "inlineSources": true,
-    "module": "ESNext",
-    "target": "ES6",
-    "allowJs": true,
-    "noImplicitAny": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "isolatedModules": true,
-    "lib": [
-      "DOM",
-      "ES5",
-      "ES6",
-      "ES7"
-    ]
-  },
-  "include": [
-    "**/*.ts"
-  ]
-}
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "inlineSourceMap": true,
+        "inlineSources": true,
+        "module": "ESNext",
+        "target": "ES6",
+        "allowJs": true,
+        "noImplicitAny": true,
+        "moduleResolution": "node",
+        "importHelpers": true,
+        "isolatedModules": true,
+        "lib": [
+            "DOM",
+            "ES5",
+            "ES6",
+            "ES7"
+        ]
+    },
+    "include": [
+        "**/*.ts"
+    ]
+}

versions.json

@@ -1,6 +1,17 @@
-{
-	"2.0.0": "0.13.33",
-	"2.0.1": "0.13.33",
-	"2.1.0": "0.13.33",
-	"2.2.0": "0.14.3"
-}
+{
+    "2.0.0": "0.13.33",
+    "2.0.1": "0.13.33",
+    "2.1.0": "0.13.33",
+    "2.2.0": "0.14.3",
+    "2.2.1": "0.14.3",
+    "2.2.2": "0.14.3",
+    "2.3.0": "0.14.5",
+    "2.4.0": "0.14.5",
+    "2.4.1": "0.14.5",
+    "2.4.2": "0.14.5",
+    "2.4.3": "0.15.5",
+    "2.4.4": "0.16.0",
+    "2.4.5": "1.1.0",
+    "2.4.6": "1.2.0",
+    "2.4.7": "1.2.0"
+}