feat: support default user agent

nguyenvanduocit · Jun 13, 2023 · f0ae971 · f0ae971
1 parent 2a9b105
commit f0ae971
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 40 deletions.
diff --git a/env.d.ts b/env.d.ts
@@ -12,4 +12,5 @@ declare type GateFrameOption = {
     position?: GateFrameOptionType
     userAgent?: string
     zoomFactor?: number
+    css?: string
 }
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "obsidian-open-gate",
-    "version": "1.8.3",
+    "version": "1.8.4",
     "description": "Embedding any website to Obsidian, from now all, you have anything you need in one place.",
     "main": "main.js",
     "scripts": {

diff --git a/src/fns/createEmptyGateOption.ts b/src/fns/createEmptyGateOption.ts
@@ -1,3 +1,5 @@
+import getDefaultUserAgent from './getDefaultUserAgent'
+
 export const createEmptyGateOption = (): GateFrameOption => {
     return {
         id: '',
@@ -8,6 +10,6 @@ export const createEmptyGateOption = (): GateFrameOption => {
         profileKey: 'open-gate',
         url: '',
         zoomFactor: 1.0,
-        userAgent: ''
+        userAgent: getDefaultUserAgent()
     }
 }
diff --git a/src/fns/createIframe.ts b/src/fns/createIframe.ts
@@ -1,15 +1,11 @@
-export const createIframe = (
-    params: Partial<GateFrameOption>
-): HTMLIFrameElement => {
+export const createIframe = (params: Partial<GateFrameOption>): HTMLIFrameElement => {
     const iframe = document.createElement('iframe')
 
     iframe.setAttribute('allowpopups', '')
     iframe.setAttribute('credentialless', 'true')
     iframe.setAttribute('src', params.url ?? 'about:blank')
-    iframe.setAttribute(
-        'sandbox',
-        'allow-scripts allow-same-origin allow-popups allow-forms'
-    )
+    iframe.setAttribute('sandbox', 'allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation')
+    iframe.setAttribute('allow', 'encrypted-media; fullscreen; oversized-images; picture-in-picture; sync-xhr; geolocation')
     iframe.addClass('open-gate-iframe')
 
     return iframe

diff --git a/src/fns/createWebviewTag.ts b/src/fns/createWebviewTag.ts
@@ -1,11 +1,7 @@
 import WebviewTag = Electron.WebviewTag
 
-export const createWebviewTag = (
-    params: Partial<GateFrameOption>
-): WebviewTag => {
-    const webviewTag = document.createElement(
-        'webview'
-    ) as unknown as WebviewTag
+export const createWebviewTag = (params: Partial<GateFrameOption>): WebviewTag => {
+    const webviewTag = document.createElement('webview') as unknown as WebviewTag
     webviewTag.setAttribute('allowpopups', 'true')
     webviewTag.setAttribute('partition', 'persist:' + params.profileKey)
     webviewTag.setAttribute('src', params.url ?? 'about:blank')
@@ -15,7 +11,11 @@ export const createWebviewTag = (
         webviewTag.setAttribute('useragent', params.userAgent)
     }
 
-    webviewTag.addEventListener('did-attach', () => {
+    webviewTag.addEventListener('dom-ready', async () => {
+        if (params.css) {
+            await webviewTag.insertCSS(params.css)
+        }
+
         if (params.zoomFactor) {
             webviewTag.setZoomFactor(params.zoomFactor)
         }

diff --git a/src/fns/registerCodeBlockProcessor.ts b/src/fns/registerCodeBlockProcessor.ts
@@ -3,6 +3,7 @@ import { createIframe } from './createIframe'
 import { createWebviewTag } from './createWebviewTag'
 import WebviewTag = Electron.WebviewTag
 import getDefaultUserAgent from './getDefaultUserAgent'
+import { createEmptyGateOption } from './createEmptyGateOption'
 
 export function registerCodeBlockProcessor(plugin: Plugin) {
     plugin.registerMarkdownCodeBlockProcessor('gate', (sourceCode, el, ctx) => {
@@ -16,37 +17,26 @@ export function registerCodeBlockProcessor(plugin: Plugin) {
             return
         }
 
-        let src = ''
-        let height = 'fit-content'
-        let profileKey = 'open-gate'
-        let userAgent = getDefaultUserAgent()
-        let zoomFactor = 1
-
+        const options = createEmptyGateOption()
+        let height = '300px'
         for (const line of lines) {
             if (line.startsWith('http')) {
-                src = line.trim()
+                options.url = line.trim()
             } else if (line.startsWith('height:')) {
                 height = line.replace('height:', '').trim()
-                // if height is a number, add px
                 if (!isNaN(Number(height))) {
                     height = height + 'px'
                 }
             } else if (line.startsWith('profile:')) {
-                profileKey = line.replace('profile:', '').trim()
+                options.profileKey = line.replace('profile:', '').trim()
             } else if (line.startsWith('useragent:')) {
-                userAgent = line.replace('useragent:', '').trim()
+                options.userAgent = line.replace('useragent:', '').trim()
             } else if (line.startsWith('zoom:')) {
-                zoomFactor = parseFloat(line.replace('zoom:', '').trim())
+                options.zoomFactor = parseFloat(line.replace('zoom:', '').trim())
             }
         }
 
         let frame: HTMLIFrameElement | WebviewTag
-        const options = {
-            profileKey: profileKey,
-            url: src,
-            userAgent: userAgent,
-            zoomFactor: zoomFactor
-        }
 
         if (Platform.isMobileApp) {
             frame = createIframe(options)

diff --git a/src/fns/registerLinkProcessor.ts b/src/fns/registerLinkProcessor.ts
@@ -21,20 +21,16 @@ export const registerLinkProcessor = (plugin: Plugin) => {
                 height = height + 'px'
             }
 
-            const profileKey = altArr ? altArr[1]?.replace('profile:', '') : 'open-gate'
-            const useragent = altArr ? altArr[2]?.replace('useragent:', '') : getDefaultUserAgent()
-            const zoomFactor = altArr ? parseFloat(altArr[3]?.replace('zoom:', '') ?? '1') : 1
-
             if (!src || isImageExt(src)) {
                 return
             }
 
             let frame: HTMLIFrameElement | WebviewTag
             const options = {
-                profileKey: profileKey,
+                profileKey: altArr ? altArr[1]?.replace('profile:', '') : 'open-gate',
                 url: src,
-                userAgent: useragent,
-                zoomFactor: zoomFactor
+                userAgent: altArr ? altArr[2]?.replace('useragent:', '') : getDefaultUserAgent(),
+                zoomFactor: altArr ? parseFloat(altArr[3]?.replace('zoom:', '') ?? '1') : 1
             }
 
             if (Platform.isMobileApp) {