refactor: prefer using chrome.runtime extension messages

dsngiem · Jul 1, 2020 · c10005d · c10005d
1 parent 79fdc45
commit c10005d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 16 deletions.
diff --git a/packages/metastream-app/src/components/Webview.tsx b/packages/metastream-app/src/components/Webview.tsx
@@ -4,6 +4,7 @@ import { EventEmitter } from 'events'
 import { PopupWindow } from './Popup'
 import { WebviewError } from './lobby/overlays/WebviewError'
 import styles from './Webview.css'
+import { dispatchExtensionMessage } from 'utils/extension'
 
 const INITIALIZE_TIMEOUT_DURATION = 1000
 const NAVIGATION_TIMEOUT_DURATION = 5000
@@ -290,14 +291,11 @@ export class Webview extends Component<Props, State> {
 
   dispatchRemoteEvent<T>(type: string, payload?: T, options: { allFrames?: boolean } = {}): void {
     if (this.tabId === -1 || this.frameId === -1) return
-    window.postMessage(
-      {
-        type: 'metastream-webview-event',
-        payload: { type, payload },
-        tabId: this.tabId,
-        frameId: options.allFrames ? undefined : this.frameId
-      },
-      location.origin
+
+    dispatchExtensionMessage(
+      'metastream-webview-event',
+      { type, payload },
+      { tabId: this.tabId, frameId: options.allFrames ? undefined : this.frameId }
     )
   }
 

diff --git a/packages/metastream-app/src/utils/extension.ts b/packages/metastream-app/src/utils/extension.ts
@@ -2,18 +2,20 @@ export const getIsInstalled = (): boolean =>
   typeof document !== 'undefined' &&
   typeof document.documentElement.dataset.extensionInstalled !== 'undefined'
 
-export const dispatchExtensionMessage = (type: string, payload?: any) => {
+export const dispatchExtensionMessage = (type: string, payload?: any, extra?: any) => {
   if (!type.startsWith('metastream-')) {
     throw new Error('Extension messages must start with metastream-')
   }
 
-  const message = { type, payload }
+  const message = { type, payload, ...extra }
 
   const chrome = (window as any).chrome
   if (typeof chrome === 'object' && typeof chrome.runtime === 'object') {
     const extensionId = document.documentElement.dataset.extensionId
-    chrome.runtime.sendMessage(extensionId, message)
-    return
+    if (extensionId) {
+      chrome.runtime.sendMessage(extensionId, message)
+      return
+    }
   }
 
   window.postMessage(message, location.origin)

diff --git a/packages/metastream-app/src/utils/http.ts b/packages/metastream-app/src/utils/http.ts
@@ -1,4 +1,5 @@
 import { CoreOptions, RequestResponse } from 'request'
+import { dispatchExtensionMessage } from './extension'
 
 type FetchResponse = Response & {
   body: any
@@ -63,10 +64,7 @@ const mainFetch = (url: string, options: FetchOptions = {}): Promise<FetchRespon
     }
 
     window.addEventListener('message', handler, false)
-    window.postMessage(
-      { type: 'metastream-fetch', payload: { requestId, url, options } },
-      location.origin
-    )
+    dispatchExtensionMessage('metastream-fetch', { requestId, url, options })
   })
 }