交互

2024-11-15 16:04:07 +08:00 · 2024-11-15 16:04:07 +08:00 · 6693de3f35
commit 6693de3f35
parent e9cdb48d30
9 changed files with 222 additions and 16 deletions
--- a/.gitignore
+++ b/.gitignore
@ -11,3 +11,5 @@ dist/
 .vscode/*
 !.vscode/extensions.json
 .idea
+
+coverage
--- a/package.json
+++ b/package.json
@ -32,6 +32,7 @@
    "@types/chrome": "^0.0.279",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
+    "@vitest/coverage-v8": "2.1.4",
    "cross-env": "^7.0.3",
    "eslint": "^9.12.0",
    "eslint-plugin-react": "^7.37.1",
--- a/packages/message/extension.ts
+++ b/packages/message/extension.ts
@ -7,7 +7,7 @@ export class ExtServer implements IServer {
  constructor() {
    this.EE = new EventEmitter();
    chrome.runtime.onConnect.addListener((port) => {
-      this.EE.emit("connect", port.name, new ExtConnect(port));
+      this.EE.emit("connect", new ExtConnect(port));
    });
  }

@ -16,7 +16,7 @@ export class ExtServer implements IServer {
  }
 }

-export function connect() {
+export function extConnect() {
  return new ExtConnect(chrome.runtime.connect());
 }

--- a/packages/message/message.test.ts
+++ b/packages/message/message.test.ts
@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 import { describe, expect, it, vi } from "vitest";
 import { Server, Connect } from ".";
-import { connect, WindowServer } from "./window";
+import { windowConnect, WindowServer } from "./window";

 describe("server", () => {
  it("hello", async () => {
@ -13,7 +13,7 @@ describe("server", () => {
        myFunc(message);
      });
    });
-    const client = connect(window, window);
+    const client = windowConnect(window, window);
    client.postMessage("hello");
    await new Promise((resolve) => setTimeout(resolve, 10));
    expect(myFunc).toHaveBeenCalledTimes(2);
@ -33,7 +33,7 @@ describe("connect", async () => {
        wrapCon.emit("world", "world");
      });
    });
-    const client = new Connect(connect(window, window));
+    const client = new Connect(windowConnect(window, window));
    client.on("world", (message) => {
      myFunc(message);
    });
@ -53,7 +53,7 @@ describe("connect", async () => {
        response("pong");
      });
    });
-    const client = new Connect(connect(window, window));
+    const client = new Connect(windowConnect(window, window));
    client.emit("ping", "ping", (message: string) => {
      myFunc(message);
    });
--- a/packages/message/window.ts
+++ b/packages/message/window.ts
@ -9,7 +9,7 @@ export class WindowServer implements IServer {
    this.EE = new EventEmitter();
    win.addEventListener("message", (event) => {
      if (event.data.type === "connect") {
-        this.EE.emit("connection", new WindowConnect(event.data.connectId, event.target as Window, win));
+        this.EE.emit("connection", new WindowConnect(event.data.connectId, win, event.source as Window));
      }
    });
  }
@ -19,7 +19,7 @@ export class WindowServer implements IServer {
  }
 }

-export function connect(source: Window, target: Window) {
+export function windowConnect(source: Window, target: Window) {
  const connectId = uuidv4();
  target.postMessage({ type: "connect", connectId }, "*");
  const con = new WindowConnect(connectId, source, target);
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -51,6 +51,9 @@ importers:
      '@types/react-dom':
        specifier: ^18.2.18
        version: 18.3.1
+      '@vitest/coverage-v8':
+        specifier: 2.1.4
+        version: 2.1.4(vitest@2.1.4(@types/node@22.8.1)(jsdom@25.0.1))
      cross-env:
        specifier: ^7.0.3
        version: 7.0.3
@ -197,10 +200,34 @@ importers:

 packages:

+  '@ampproject/remapping@2.3.0':
+    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
+    engines: {node: '>=6.0.0'}
+
+  '@babel/helper-string-parser@7.25.9':
+    resolution: {integrity: sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.25.9':
+    resolution: {integrity: sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.26.2':
+    resolution: {integrity: sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
  '@babel/runtime@7.26.0':
    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
    engines: {node: '>=6.9.0'}

+  '@babel/types@7.26.0':
+    resolution: {integrity: sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==}
+    engines: {node: '>=6.9.0'}
+
+  '@bcoe/v8-coverage@0.2.3':
+    resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==}
+
  '@cspotcode/source-map-support@0.8.1':
    resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
    engines: {node: '>=12'}
@ -410,13 +437,28 @@ packages:
    resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==}
    engines: {node: '>=12'}

+  '@istanbuljs/schema@0.1.3':
+    resolution: {integrity: sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA==}
+    engines: {node: '>=8'}
+
+  '@jridgewell/gen-mapping@0.3.5':
+    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
+    engines: {node: '>=6.0.0'}
+
  '@jridgewell/resolve-uri@3.1.2':
    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
    engines: {node: '>=6.0.0'}

+  '@jridgewell/set-array@1.2.1':
+    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
+    engines: {node: '>=6.0.0'}
+
  '@jridgewell/sourcemap-codec@1.5.0':
    resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==}

+  '@jridgewell/trace-mapping@0.3.25':
+    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
+
  '@jridgewell/trace-mapping@0.3.9':
    resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}

@ -827,6 +869,15 @@ packages:
    resolution: {integrity: sha512-EaewX6lxSjRJnc+99+dqzTeoDZUfyrA52d2/HRrkI830kgovWsmIiTfmr0NZorzqic7ga+1bS60lRBUgR3n/Bw==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}

+  '@vitest/coverage-v8@2.1.4':
+    resolution: {integrity: sha512-FPKQuJfR6VTfcNMcGpqInmtJuVXFSCd9HQltYncfR01AzXhLucMEtQ5SinPdZxsT5x/5BK7I5qFJ5/ApGCmyTQ==}
+    peerDependencies:
+      '@vitest/browser': 2.1.4
+      vitest: 2.1.4
+    peerDependenciesMeta:
+      '@vitest/browser':
+        optional: true
+
  '@vitest/expect@2.1.4':
    resolution: {integrity: sha512-DOETT0Oh1avie/D/o2sgMHGrzYUFFo3zqESB2Hn70z6QB1HrS2IQ9z5DfyTqU8sg4Bpu13zZe9V4+UTNQlUeQA==}

@ -1564,6 +1615,9 @@ packages:
  html-entities@2.5.2:
    resolution: {integrity: sha512-K//PSRMQk4FZ78Kyau+mZurHn3FH0Vwr+H36eE0rPbeYkRRi9YxceYPhuN60UwWorxyKHhqoAJl2OFKa4BVtaA==}

+  html-escaper@2.0.2:
+    resolution: {integrity: sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==}
+
  html-parse-stringify@3.0.1:
    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}

@ -1798,6 +1852,22 @@ packages:
  isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}

+  istanbul-lib-coverage@3.2.2:
+    resolution: {integrity: sha512-O8dpsF+r0WV/8MNRKfnmrtCWhuKjxrq2w+jpzBL5UZKTi2LeVWnWOmWRxFlesJONmc+wLAGvKQZEOanko0LFTg==}
+    engines: {node: '>=8'}
+
+  istanbul-lib-report@3.0.1:
+    resolution: {integrity: sha512-GCfE1mtsHGOELCU8e/Z7YWzpmybrx/+dSTfLrvY8qRmaY6zXTKWn6WQIjaAFw069icm6GVMNkgu0NzI4iPZUNw==}
+    engines: {node: '>=10'}
+
+  istanbul-lib-source-maps@5.0.6:
+    resolution: {integrity: sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==}
+    engines: {node: '>=10'}
+
+  istanbul-reports@3.1.7:
+    resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==}
+    engines: {node: '>=8'}
+
  iterator.prototype@1.1.3:
    resolution: {integrity: sha512-FW5iMbeQ6rBGm/oKgzq2aW4KvAGpxPzYES8N4g4xNXUKpL1mclMvOe+76AcLDTvD+Ze+sOpVhgdAQEKF4L9iGQ==}
    engines: {node: '>= 0.4'}
@ -1870,6 +1940,13 @@ packages:
  magic-string@0.30.12:
    resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==}

+  magicast@0.3.5:
+    resolution: {integrity: sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==}
+
+  make-dir@4.0.0:
+    resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==}
+    engines: {node: '>=10'}
+
  make-error@1.3.6:
    resolution: {integrity: sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==}

@ -2442,6 +2519,10 @@ packages:
  symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}

+  test-exclude@7.0.1:
+    resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
+    engines: {node: '>=18'}
+
  text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

@ -2818,10 +2899,30 @@ packages:

 snapshots:

+  '@ampproject/remapping@2.3.0':
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+
+  '@babel/helper-string-parser@7.25.9': {}
+
+  '@babel/helper-validator-identifier@7.25.9': {}
+
+  '@babel/parser@7.26.2':
+    dependencies:
+      '@babel/types': 7.26.0
+
  '@babel/runtime@7.26.0':
    dependencies:
      regenerator-runtime: 0.14.1

+  '@babel/types@7.26.0':
+    dependencies:
+      '@babel/helper-string-parser': 7.25.9
+      '@babel/helper-validator-identifier': 7.25.9
+
+  '@bcoe/v8-coverage@0.2.3': {}
+
  '@cspotcode/source-map-support@0.8.1':
    dependencies:
      '@jridgewell/trace-mapping': 0.3.9
@ -2960,10 +3061,25 @@ snapshots:
      wrap-ansi: 8.1.0
      wrap-ansi-cjs: wrap-ansi@7.0.0

+  '@istanbuljs/schema@0.1.3': {}
+
+  '@jridgewell/gen-mapping@0.3.5':
+    dependencies:
+      '@jridgewell/set-array': 1.2.1
+      '@jridgewell/sourcemap-codec': 1.5.0
+      '@jridgewell/trace-mapping': 0.3.25
+
  '@jridgewell/resolve-uri@3.1.2': {}

+  '@jridgewell/set-array@1.2.1': {}
+
  '@jridgewell/sourcemap-codec@1.5.0': {}

+  '@jridgewell/trace-mapping@0.3.25':
+    dependencies:
+      '@jridgewell/resolve-uri': 3.1.2
+      '@jridgewell/sourcemap-codec': 1.5.0
+
  '@jridgewell/trace-mapping@0.3.9':
    dependencies:
      '@jridgewell/resolve-uri': 3.1.2
@ -3390,6 +3506,24 @@ snapshots:
      '@typescript-eslint/types': 8.11.0
      eslint-visitor-keys: 3.4.3

+  '@vitest/coverage-v8@2.1.4(vitest@2.1.4(@types/node@22.8.1)(jsdom@25.0.1))':
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@bcoe/v8-coverage': 0.2.3
+      debug: 4.3.7
+      istanbul-lib-coverage: 3.2.2
+      istanbul-lib-report: 3.0.1
+      istanbul-lib-source-maps: 5.0.6
+      istanbul-reports: 3.1.7
+      magic-string: 0.30.12
+      magicast: 0.3.5
+      std-env: 3.7.0
+      test-exclude: 7.0.1
+      tinyrainbow: 1.2.0
+      vitest: 2.1.4(@types/node@22.8.1)(jsdom@25.0.1)
+    transitivePeerDependencies:
+      - supports-color
+
  '@vitest/expect@2.1.4':
    dependencies:
      '@vitest/spy': 2.1.4
@ -4288,6 +4422,8 @@ snapshots:

  html-entities@2.5.2: {}

+  html-escaper@2.0.2: {}
+
  html-parse-stringify@3.0.1:
    dependencies:
      void-elements: 3.1.0
@ -4506,6 +4642,27 @@ snapshots:

  isexe@2.0.0: {}

+  istanbul-lib-coverage@3.2.2: {}
+
+  istanbul-lib-report@3.0.1:
+    dependencies:
+      istanbul-lib-coverage: 3.2.2
+      make-dir: 4.0.0
+      supports-color: 7.2.0
+
+  istanbul-lib-source-maps@5.0.6:
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.25
+      debug: 4.3.7
+      istanbul-lib-coverage: 3.2.2
+    transitivePeerDependencies:
+      - supports-color
+
+  istanbul-reports@3.1.7:
+    dependencies:
+      html-escaper: 2.0.2
+      istanbul-lib-report: 3.0.1
+
  iterator.prototype@1.1.3:
    dependencies:
      define-properties: 1.2.1
@ -4603,6 +4760,16 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.0

+  magicast@0.3.5:
+    dependencies:
+      '@babel/parser': 7.26.2
+      '@babel/types': 7.26.0
+      source-map-js: 1.2.1
+
+  make-dir@4.0.0:
+    dependencies:
+      semver: 7.6.3
+
  make-error@1.3.6: {}

  media-typer@0.3.0: {}
@ -5216,6 +5383,12 @@ snapshots:

  symbol-tree@3.2.4: {}

+  test-exclude@7.0.1:
+    dependencies:
+      '@istanbuljs/schema': 0.1.3
+      glob: 10.4.5
+      minimatch: 9.0.5
+
  text-table@0.2.0: {}

  thingies@1.21.0(tslib@2.8.0):
--- a/src/offscreen.ts
+++ b/src/offscreen.ts
@ -0,0 +1,17 @@
+import { Connect, Server } from "@Packages/message";
+import { extConnect } from "@Packages/message/extension";
+import { WindowServer } from "@Packages/message/window";
+
+function main() {
+  // 与sandbox建立连接
+  const extClient = new Connect(extConnect());
+  const server = new Server(new WindowServer(window));
+  server.on("connection", (con) => {
+    const wrapCon = new Connect(con);
+    wrapCon.on("forward", (data, resp) => {
+      console.log(data);
+    });
+  });
+}
+
+main();
--- a/src/sandbox.ts
+++ b/src/sandbox.ts
@ -1 +1,11 @@
-eval('console.log("Hello from sandbox!");');
+import { Connect } from "@Packages/message";
+import { windowConnect } from "@Packages/message/window";
+
+function main() {
+  const client = new Connect(windowConnect(window, window.parent));
+  client.emit("recv", "123", (resp: string) => {
+    console.log("sandbox", resp);
+  });
+}
+
+main();
--- a/src/service_worker.ts
+++ b/src/service_worker.ts
@ -1,5 +1,5 @@
 import { ExtServer } from "@Packages/message/extension";
-import { Server } from "@Packages/message";
+import { Connect, Server } from "@Packages/message";

 async function setupOffscreenDocument() {
  // 创建运行后台脚本的沙盒环境
@ -18,14 +18,17 @@ async function setupOffscreenDocument() {
 }

 async function main() {
+  // 监听消息
+  const server = new Server(new ExtServer());
+  server.on("connection", (con) => {
+    const wrapCon = new Connect(con);
+    wrapCon.on("recv", (data,resp) => {
+      console.log(data);
+      resp("service_wwww");
+    });
+  });
  // 初始化沙盒环境
  await setupOffscreenDocument();
-  // 监听消息
-  const extServer = new ExtServer();
-  const server = new Server(extServer);
-  server.on("", (con) => {
-    
-  });
 }

 main();