Use CustomEvent instead of postMessage

to avoid conflicts with websites

src/extension/content_script.js

@@ -12,7 +12,7 @@ const port = new MessagePort("webgpu-inspector-page", 0, (message) => {
   }
 
   if (action === PanelActions.RequestTexture || action === PanelActions.CompileShader || action === PanelActions.RevertShader) {
-    window.postMessage(message, "*");
+    window.dispatchEvent(new CustomEvent("__WebGPUInspector", { detail: message }))
     return;
   }
 
@@ -36,8 +36,9 @@ const port = new MessagePort("webgpu-inspector-page", 0, (message) => {
       inspectMessage = messageString;
     } else {
       sessionStorage.setItem(webgpuInspectorCaptureFrameKey, messageString);
-      window.postMessage({ __webgpuInspector: true, __webgpuInspectorPanel: true, action: PanelActions.Capture,
-        data: messageString }, "*");
+      const message = { __webgpuInspector: true, __webgpuInspectorPanel: true, action: PanelActions.Capture,
+        data: messageString };
+      window.dispatchEvent(new CustomEvent("__WebGPUInspector", { detail: message }))
     }
   }
 
@@ -59,11 +60,8 @@ window.addEventListener('pageshow', (event) => {
 });
 
 // Listen for messages from the page
-window.addEventListener('message', (event) => {
-  if (event.source !== window) {
-    return;
-  }
-  const message = event.data;
+window.addEventListener("__WebGPUInspector", (event) => {
+  const message = event.detail;
   if (typeof message !== 'object' || message === null) {
     return;
   }
@@ -119,7 +117,6 @@ if (recordMessage) {
     removeUnusedResources: 1,
     messageRecording: 1
   });
-
 }
 
 port.postMessage({action: "PageLoaded"});

src/webgpu_inspector.js

@@ -15,6 +15,7 @@ export let webgpuInspector = null;
   const _document = self.document;
   const _sessionStorage = self.sessionStorage;
   const _postMessage = self.postMessage;
+  const _dispatchEvent = self.dispatchEvent;
 
   const webgpuInspectorCaptureFrameKey = "WEBGPU_INSPECTOR_CAPTURE_FRAME";
 
@@ -181,18 +182,16 @@ export let webgpuInspector = null;
       };
 
       // Listen for messages from the content-script.
-      _self.addEventListener("message", (event) => {
-        if (_window && event.source !== _window) {
-          return;
-        }
-        const message = event.data;
+
+      function eventCallback(event) {
+        const message = event.detail || event.data;
         if (typeof message !== "object" || !message.__webgpuInspector) {
           return;
         }
 
         if (message.action === Actions.DeltaTime) {
           if (message.__webgpuInspectorWorker) {
-            this._updateFrameRate(message.deltaTime);
+            self._updateFrameRate(message.deltaTime);
           }
         } else if (message.action === PanelActions.RequestTexture) {
           const textureId = message.id;
@@ -212,7 +211,13 @@ export let webgpuInspector = null;
             self._captureData = message.data;
           }
         }
-      });
+      }
+
+      if (!_window) {
+        _self.addEventListener("message", eventCallback);
+      } else {
+        _self.addEventListener("__WebGPUInspector", eventCallback);
+      }
     }
 
     captureWorker(canvas) {
@@ -231,7 +236,11 @@ export let webgpuInspector = null;
       message.__webgpuInspector = true;
       message.__webgpuInspectorPage = true;
       message.__webgpuInspectorWorker = !_window;
-      _postMessage(message);
+      if (!_window) {
+        _postMessage(message);
+      } else {
+        _dispatchEvent(new CustomEvent("__WebGPUInspector", { detail: message }));
+      }
     }
 
     _updateCanvasAttachment(attachment) {

src/webgpu_inspector_worker.js

@@ -18,16 +18,16 @@ export function webgpuInspectorWorker(worker) {
 
   worker.addEventListener("message", (event) => {
     if (event.data.__webgpuInspector) {
-      window.postMessage(event.data, "*");
+      window.dispatchEvent(new CustomEvent("__WebGPUInspector", { detail: event.data }));
     }
   });
 
-  window.addEventListener("message", (event) => {
+  window.addEventListener("__WebGPUInspector", (event) => {
     // Forward messages from the page to the worker, if the worker hasn't been terminated,
     // the message is from the inspector, and the message is not from the worker.
-    if (worker.__webgpuInspector && event.data.__webgpuInspector &&
-      !event.data.__webgpuInspectorPage) {
-      worker.postMessage(event.data);
+    if (worker.__webgpuInspector && event.detail.__webgpuInspector &&
+      !event.detail.__webgpuInspectorPage) {
+      worker.postMessage(event.detail);
     }
   });
 }

test/webgpu_worker.js

@@ -1,4 +1,5 @@
 import { webgpuInspector } from 'https://cdn.jsdelivr.net/gh/brendan-duncan/[email protected]/src/webgpu_inspector.js';
+//import { webgpuInspector } from '../src/webgpu_inspector.js';
 
 self.addEventListener('message', (ev) => {
   switch (ev.data.type) {