capture messages from @opensumi/ide-connection and show them in a demo

src/capturer/index.js

@@ -0,0 +1,54 @@
+import evalInWindow from '../utils/eval';
+
+const startCapturing = () => {
+  return evalInWindow(() => {
+    // Return if messages are already being listened to prevent duplicates
+    // when reloading the extension
+    if (window.__opensumi_devtools.messages != null) {
+      window.__opensumi_devtools.messages = [];
+      return;
+    }
+
+    window.__opensumi_devtools.messages = [];
+
+    window.__opensumi_devtools.capture = (msg) => {
+      if (window.__opensumi_devtools.evaling) return;
+
+      try {
+        msg = JSON.stringify(msg);
+      } catch (error) {
+        msg = `Failed to serialize args to JSON: ${error.message || error}`;
+      }
+
+      window.__opensumi_devtools.messages.push({
+        time: new Date().toLocaleString(),
+        msg: msg,
+      });
+    };
+  });
+};
+
+const stopCapturing = () => {
+  return evalInWindow(() => {
+    if (window.__opensumi_devtools.messages)
+      delete window.__opensumi_devtools.messages;
+    if (window.__opensumi_devtools.capture)
+      delete window.__opensumi_devtools.capture;
+  });
+};
+
+const getMessages = () => {
+  return evalInWindow(() => {
+    const messages = window.__opensumi_devtools.messages;
+    if (messages) window.__opensumi_devtools.messages = [];
+    return messages;
+  }).then((messages) => {
+    if (messages) return messages;
+
+    // Start listening for messages if array is missing meaning
+    // the window was reloaded
+    return startCapturing().then(() => []);
+  });
+};
+
+export { startCapturing, stopCapturing, getMessages };

src/pages/Devtools/index.js

@@ -1,18 +1,3 @@
-chrome.devtools.inspectedWindow.eval(`console.log('你好牛你好牛')`);
-
-chrome.devtools.inspectedWindow
-  .eval(`window.__OPENSUMI_DEVTOOL_EVENT_SOURCE_TOKEN__ = {
-    traffic: {
-      send: (msg) => {
-          console.log('[send] ', msg)
-      },
-      receive: (msg) => {
-          console.log('[receive] ', msg)
-      },
-    },
-  };
-`);
-
 chrome.devtools.panels.create(
   'OpenSumi DevTools',
   'logo.png',

src/pages/Panel/Panel.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import './Panel.css';
+import { startCapturing, stopCapturing, getMessages } from '../../capturer';
+
+const INTERVAL = 333;
+
+const Panel = () => {
+  const [capturing, setCapturing] = useState(false);
+  const [messages, setMessages] = useState([]);
+  const [timer, setTimer] = useState(null);
+
+  const addMessages = () => {
+    getMessages()
+      .then((messages) => {
+        setMessages((oldMessages) => [...oldMessages, ...messages]);
+      })
+      .catch((error) => {
+        console.error('Getting messages failed!');
+        console.error(error.stack || error);
+      });
+  };
+
+  const start = () => {
+    startCapturing()
+      .then(() => {
+        setCapturing(true);
+        setTimer(setInterval(() => addMessages(), INTERVAL));
+      })
+      .catch((error) => {
+        console.error('Starting capturing failed!');
+        console.error(error.stack || error);
+      });
+  };
+
+  const stop = () => {
+    stopCapturing()
+      .then(() => {
+        setCapturing(false);
+        clearInterval(timer);
+        setTimer(null);
+      })
+      .catch((error) => {
+        console.error('Stoping capturing failed!');
+        console.error(error.stack || error);
+      });
+  };
+
+  return (
+    <div className="container">
+      <button onClick={start}>startCapturing</button>
+      <button onClick={stop}>stopCapturing</button>
+      <p>{capturing ? 'capturing' : 'not capturing'}</p>
+
+      <table>
+        <tbody>
+          {messages.map((msg, index) => {
+            return (
+              <tr key={`msg_${index}`}>
+                <td>{index}</td>
+                <td>{msg.time}</td>
+                <td>{msg.msg}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Panel;

src/utils/eval.js

@@ -0,0 +1,41 @@
+const evalInWindow = (expression, ...rest) => {
+  if (typeof expression === 'function') {
+    expression = `(${expression})`;
+    if (rest.length > 0) {
+      let expressionArgs = JSON.stringify(rest);
+      expression += `.apply(this, ${expressionArgs})`;
+    } else {
+      expression += '()';
+    }
+  }
+
+  expression = `
+      (function () {
+        window.__opensumi_devtools = window.__opensumi_devtools || {}
+        window.__opensumi_devtools.evaling = true
+
+        try {
+          return ${expression}
+        } finally {
+          window.__opensumi_devtools.evaling = false
+        }
+      })()
+    `;
+
+  return new Promise((resolve, reject) => {
+    window.chrome.devtools.inspectedWindow.eval(expression, (result, error) => {
+      if (error) {
+        if (error.isException && error.value) {
+          let stack = error.value;
+          error = new Error(stack.split('\n')[0]);
+          error.stack = stack;
+        }
+        reject(error);
+      } else {
+        resolve(result);
+      }
+    });
+  });
+};
+
+export default evalInWindow;