feat: support embedded mode

package.json

@@ -14,7 +14,7 @@
   ],
   "scripts": {
     "ci": "npm run lint && npm run build && npm run es5",
-    "format": "npm run format:server && prettier 'src/**/*.ts' '*.{js,json}' 'bin/*.js' 'test/*.{html,json,js,css}' --write",
+    "format": "npm run format:server && lsla prettier 'src/**/*.ts' '*.{js,json}' 'bin/*.js' 'test/*.{html,json,js,css}' --write",
     "format:server": "lsla prettier 'server/**/*.js' --write",
     "build": "gulp clean && webpack --mode=production && npm run build:front_end",
     "build:front_end": "npm run dev:front_end && gulp uglify",

patches/devtools-frontend/.patches

@@ -3,3 +3,4 @@ elements.patch
 network.patch
 application.patch
 sources.patch
+embedded.patch

patches/devtools-frontend/embedded.patch

@@ -0,0 +1,51 @@
+From 0000000000000000000000000000000000000000 Mon Sep 17 00:00:00 2001
+From: redhoodsu <[email protected]>
+Date: Sun, 17 Jul 2022 12:28:39 +0800
+Subject: embedded
+
+
+diff --git a/front_end/core/sdk/Connections.ts b/front_end/core/sdk/Connections.ts
+index cfa1ca58f1d45d5034731cae037e91364be9de6e..619ae8cc56e2274a3fbd9b159a669333c37ba9f2 100644
+--- a/front_end/core/sdk/Connections.ts
++++ b/front_end/core/sdk/Connections.ts
+@@ -75,6 +75,29 @@ export class MainConnection implements ProtocolClient.InspectorBackend.Connectio
+   }
+ }
+
++export class EmbeddedConnection implements ProtocolClient.InspectorBackend.Connection {
++  onMessage: ((arg0: Object) => void) | null;
++  constructor() {
++    this.onMessage = null;
++    window.addEventListener('message', event => {
++      if (this.onMessage) {
++        this.onMessage(event.data);
++      }
++    })
++  }
++  setOnMessage(onMessage: (arg0: (Object|string)) => void): void {
++    this.onMessage = onMessage;
++  }
++  sendRawMessage(message: string): void {
++    window.parent.postMessage(message);
++  }
++  setOnDisconnect(onDisconnect: (arg0: string) => void): void {
++  }
++  disconnect(): Promise<void> {
++    return Promise.resolve();
++  }
++}
++
+ export class WebSocketConnection implements ProtocolClient.InspectorBackend.Connection {
+   #socket: WebSocket|null;
+   onMessage: ((arg0: (Object|string)) => void)|null;
+@@ -280,6 +303,10 @@ export async function initMainConnection(
+ function createMainConnection(websocketConnectionLost: () => void): ProtocolClient.InspectorBackend.Connection {
+   const wsParam = Root.Runtime.Runtime.queryParam('ws');
+   const wssParam = Root.Runtime.Runtime.queryParam('wss');
++  const embeddedParam = Root.Runtime.Runtime.queryParam('embedded');
++  if (embeddedParam === 'true') {
++    return new EmbeddedConnection()
++  }
+   if (wsParam || wssParam) {
+     const ws = wsParam ? `ws://${wsParam}` : `wss://${wssParam}`;
+     return new WebSocketConnection(ws, websocketConnectionLost);

server/lib/Channel.js

@@ -3,9 +3,7 @@ const each = require('licia/each');
 const some = require('licia/some');
 const remove = require('licia/remove');
 
-module.exports = class Channel extends (
-  Emitter
-) {
+module.exports = class Channel extends Emitter {
   constructor(ws) {
     super();
     this._ws = ws;

server/lib/ChannelManager.js

@@ -4,9 +4,7 @@ const truncate = require('licia/truncate');
 const ansiColor = require('licia/ansiColor');
 const util = require('./util');
 
-module.exports = class ChannelManager extends (
-  Emitter
-) {
+module.exports = class ChannelManager extends Emitter {
   constructor() {
     super();
 

src/target.ts

@@ -35,6 +35,14 @@ if ((window as any).ChiiServerUrl) {
   }
 }
 
+let embedded = false;
+const element = getTargetScriptEl();
+if (element) {
+  if (element.getAttribute('embedded') === 'true') {
+    embedded = true;
+  }
+}
+
 function getFavicon() {
   let favicon = location.origin + '/favicon.ico';
 
@@ -65,24 +73,51 @@ if (!id) {
   sessionStore.setItem('chii-id', id);
 }
 
-const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
-
-const ws = new Socket(
-  `${protocol}//${ChiiServerUrl}/target/${id}?${query.stringify({
-    url: location.href,
-    title: (window as any).ChiiTitle || document.title,
-    favicon: getFavicon(),
-  })}`
-);
+if (!embedded) {
+  const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+
+  const ws = new Socket(
+    `${protocol}//${ChiiServerUrl}/target/${id}?${query.stringify({
+      url: location.href,
+      title: (window as any).ChiiTitle || document.title,
+      favicon: getFavicon(),
+    })}`
+  );
+
+  ws.on('open', () => {
+    isInit = true;
+    ws.on('message', event => {
+      chobitsu.sendRawMessage(event.data);
+    });
+  });
 
-ws.on('open', () => {
-  isInit = true;
-  ws.on('message', event => {
+  chobitsu.setOnMessage((message: string) => {
+    if (!isInit) return;
+    ws.send(message);
+  });
+} else {
+  const protocol = location.protocol;
+  const frame = document.createElement('iframe');
+  const $frame = $(frame);
+  $frame.css({
+    border: 'none',
+    position: 'fixed',
+    left: 0,
+    bottom: 0,
+    width: '100%',
+    height: '50%',
+    zIndex: 5000,
+  });
+  frame.src = `${protocol}//${ChiiServerUrl}/front_end/chii_app.html?embedded=true`;
+  document.body.appendChild(frame);
+  const targetOrigin = `${protocol}//${ChiiServerUrl}`;
+  chobitsu.setOnMessage((message: string) => {
+    frame.contentWindow?.postMessage(message, targetOrigin);
+  });
+  window.addEventListener('message', event => {
+    if (event.origin !== targetOrigin) {
+      return;
+    }
     chobitsu.sendRawMessage(event.data);
   });
-});
-
-chobitsu.setOnMessage((message: string) => {
-  if (!isInit) return;
-  ws.send(message);
-});
+}

test/demo.js

@@ -159,14 +159,14 @@ function logXhr(xhr) {
 }
 
 function injectTarget() {
-  const href = location.href;
-  const host = href.replace('/test/demo.html', '').replace(location.protocol + '//', '');
-  const src = '//' + host + '/target.js';
   const script = document.createElement('script');
-  script.src = src;
+  script.src = '//' + location.host + '/target.js';
+  if (location.href.indexOf('embedded=true') > -1) {
+    script.setAttribute('embedded', 'true');
+  }
   document.head.appendChild(script);
 
-  window.ChiiServerUrl = host;
+  window.ChiiServerUrl = location.host;
 }
 
 injectTarget();