add support for get/put of connected pages

components/file-group-page.js

@@ -29,7 +29,10 @@ addEventListener('message', event => {
     frame !== undefined && event.source == frame.contentWindow
   )
   if (isChild) {
-    parent.postMessage(event.data, '*')
+    const transferArg = (
+      event.ports?.length ? [[...event.ports]] : []
+    )
+    parent.postMessage(event.data, '*', ...transferArg)
   } else {
     let isNew = false
     const d = event.data
@@ -44,7 +47,12 @@ addEventListener('message', event => {
         document.body.appendChild(frame)
       }
     } else if (frame !== undefined) {
-      frame.contentWindow.postMessage(event.data, '*')
+      const transferArg = (
+        event.ports?.length ? [[...event.ports]] : []
+      )
+      frame.contentWindow.postMessage(
+        event.data, '*', ...transferArg
+      )
     }
   }
 })
@@ -184,6 +192,11 @@ export class FileGroupPage extends HTMLElement {
   }
 
   async handleViewMessage(event) {
+    if (Array.isArray(event.data)) {
+      if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('view', event)
+      }
+    }
   }
 
   async handleEditMessage(event) {
@@ -198,8 +211,71 @@ export class FileGroupPage extends HTMLElement {
       } else if (event.data[0] === 'save') {
         const doc = event.data[1]
         this.body = doc
+      } else if (['get', 'put'].includes(event.data[0])) {
+        await this.handleRequestMessage('edit', event)
+      }
+    }
+  }
+
+  async handleRequestMessage(frame, event) {
+    if (event.ports.length === 1) {
+      const port = event.ports[0]
+      const method = event.data[0]
+      const path = event.data[1]
+      const access = this.getAccess(path)
+      if (method === 'get') {
+        if (['read', 'readWrite'].includes(access)) {
+          port.postMessage({
+            status: 200,
+            body: this.getPage(path),
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
+      } else if (method === 'put') {
+        const body = event.data[2]
+        if (access === 'readWrite') {
+          this.setPage(path, body)
+          port.postMessage({
+            status: 200,
+          })
+        } else {
+          port.postMessage({
+            status: 401,
+          })
+        }
       }
+      port.close()
+    } else {
+      throw new Error('request message without port')
+    }
+  }
+
+  getAccess(path) {
+    const settings = this.settings
+    const outbound = settings.connections?.outbound
+    if (outbound && outbound[path]) {
+      return outbound[path]
+    }
+  }
+
+  getPage(path) {
+    const body = localStorage.getItem(path)
+    try {
+      return JSON.parse(body)
+    } catch (err) {
+      return body
+    }
+  }
+
+  setPage(path, body) {
+    let value = body
+    if (typeof value !== 'string') {
+      value = JSON.stringify(value)
     }
+    localStorage.setItem(path, value)
   }
 
   set body(value) {