From 5a6bf176e76e4939699f3fa4b81bae000f837d83 Mon Sep 17 00:00:00 2001
From: Ellpeck <me@ellpeck.de>
Date: Wed, 23 Mar 2022 11:42:05 +0100
Subject: [PATCH] allow using the plugin on mobile (with limitations)

---
 README.md     |  2 --
 main.ts       | 29 +++++++++++++++--------------
 manifest.json |  2 +-
 3 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 508bf07..010e6c1 100644
--- a/README.md
+++ b/README.md
@@ -8,8 +8,6 @@ An Obsidian plugin that turns web apps into panes using iframes with custom styl
 ## 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 tab can be opened using the 'Custom Frames: Open' command.
 
-Note that this plugin only works on Desktop right now.
-
 ## Presets
 By default, Custom Frames comes with a few presets that allow you to get new tabs for popular sites up and running quickly.
 - Google Keep, optimized for a narrow side tab
diff --git a/main.ts b/main.ts
index bbd054f..6b63532 100644
--- a/main.ts
+++ b/main.ts
@@ -1,5 +1,4 @@
-import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf } from "obsidian";
-import { remote } from "electron";
+import { App, ButtonComponent, DropdownComponent, ItemView, Plugin, PluginSettingTab, Setting, WorkspaceLeaf, Platform } from "obsidian";
 
 const defaultSettings: CustomFramesSettings = {
 	frames: [],
@@ -93,22 +92,24 @@ class CustomFrameView extends ItemView {
 		frame.addClass("custom-frames-frame");
 		frame.setAttribute("style", `padding: ${this.settings.padding}px`);
 		frame.onload = () => {
-			for (let other of remote.getCurrentWebContents().mainFrame.frames) {
-				if (frame.src.contains(new URL(other.url).host)) {
-					other.executeJavaScript(`
+			if (Platform.isDesktopApp) {
+				for (let other of require("electron").remote.getCurrentWebContents().mainFrame.frames) {
+					if (frame.src.contains(new URL(other.url).host)) {
+						other.executeJavaScript(`
 						let style = document.createElement("style");
 						style.textContent = \`${this.frame.customCss}\`;
 						document.head.appendChild(style);
 					`);
+					}
 				}
-			}
 
-			if (this.frame.minimumWidth) {
-				let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
-				if (parent) {
-					let minWidth = `${this.frame.minimumWidth + 2 * this.settings.padding}px`;
-					if (parent.style.width < minWidth)
-						parent.style.width = minWidth;
+				if (this.frame.minimumWidth) {
+					let parent = this.contentEl.closest<HTMLElement>(".workspace-split.mod-horizontal");
+					if (parent) {
+						let minWidth = `${this.frame.minimumWidth + 2 * this.settings.padding}px`;
+						if (parent.style.width < minWidth)
+							parent.style.width = minWidth;
+					}
 				}
 			}
 		};
@@ -180,7 +181,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
 				});
 			new Setting(this.containerEl)
 				.setName("Minimum Width")
-				.setDesc("The width that this frame's tab should be adjusted to automatically if it is lower. Set to 0 to disable.")
+				.setDesc("The width that this frame's tab should be adjusted to automatically if it is lower. Set to 0 to disable. Note that this is only applied on Desktop devices.")
 				.addText(t => {
 					t.inputEl.type = "number";
 					t.setValue(String(frame.minimumWidth));
@@ -191,7 +192,7 @@ class CustomFramesSettingTab extends PluginSettingTab {
 				});
 			new Setting(this.containerEl)
 				.setName("Additional CSS")
-				.setDesc("A snippet of additional CSS that should be applied to this frame.")
+				.setDesc("A snippet of additional CSS that should be applied to this frame. Note that this is only applied on Desktop devices.")
 				.addTextArea(t => {
 					t.inputEl.rows = 5;
 					t.inputEl.cols = 50;
diff --git a/manifest.json b/manifest.json
index 3fc02fe..30b8f87 100644
--- a/manifest.json
+++ b/manifest.json
@@ -6,5 +6,5 @@
 	"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": true
+	"isDesktopOnly": false
 }