调整目录

packages/message/extension.ts

@@ -0,0 +1,54 @@
+import EventEmitter from 'eventemitter3';
+import { Connect } from '.';
+
+export class ExtServer {
+  private EE: EventEmitter;
+
+  constructor() {
+    this.EE = new EventEmitter();
+    chrome.runtime.onConnect.addListener((port) => {
+      this.EE.emit('connect', new ExtConnect(port));
+    });
+  }
+
+  onConnect(callback: (con: Connect) => void) {
+    this.EE.on('connect', callback);
+  }
+}
+
+export function connect() {
+  return new ExtConnect(chrome.runtime.connect());
+}
+
+export class ExtConnect implements Connect {
+  private EE: EventEmitter;
+  private port: chrome.runtime.Port;
+
+  constructor(port: chrome.runtime.Port) {
+    this.EE = new EventEmitter();
+    this.port = port;
+    port.onMessage.addListener((message) => {
+      this.EE.emit('message', message);
+    });
+    port.onDisconnect.addListener(() => {
+      this.EE.emit('disconnect');
+      this.EE.removeAllListeners();
+    });
+  }
+
+  postMessage(message: unknown) {
+    this.port.postMessage(message);
+  }
+
+  onMessage(callback: (message: unknown) => void) {
+    this.EE.on('message', callback);
+  }
+
+  onDisconnect(callback: () => void) {
+    this.EE.on('disconnect', callback);
+  }
+
+  disconnect() {
+    this.port.disconnect();
+  }
+}

packages/message/index.ts

@@ -0,0 +1,63 @@
+import EventEmitter from 'eventemitter3';
+import { v4 as uuidv4 } from 'uuid';
+
+export interface Server {
+  onConnect: (callback: (con: Connect) => void) => void;
+}
+
+export interface Connect {
+  postMessage: (message: unknown) => void;
+  onMessage: (callback: (message: unknown) => void) => void;
+  onDisconnect: (callback: () => void) => void;
+  disconnect: () => void;
+}
+
+// 消息通道, 通过连接封装消息通道
+export class MessageChannel {
+  private EE: EventEmitter;
+  // 实例id
+  private id: string;
+
+  constructor(private connect: Connect) {
+    this.EE = new EventEmitter();
+    this.id = uuidv4();
+    connect.onMessage((message) => {
+      // 判断消息是否为连接消息
+      if (message && typeof message === 'object') {
+        const data = message as { type: string; id: string };
+        // 判断实例
+        if (data.id == this.id) {
+          switch (data.type) {
+            case 'connect':
+              // 建立连接
+              break;
+            case 'message':
+              // 发送消息
+              break;
+          }
+        }
+      }
+    });
+  }
+
+  // 发送一次消息并接收结果
+  async send(message: unknown) {
+    return new Promise((resolve) => {
+      const callback = (message: unknown) => {
+        this.connect.onMessage(callback);
+        resolve(message);
+      };
+      this.connect.onMessage(callback);
+      this.connect.postMessage(message);
+    });
+  }
+
+  // 发送消息
+  postMessage(message: unknown) {
+    this.connect.postMessage({
+      type: 'message',
+      id: this.id,
+      data: message,
+    });
+  }
+}

packages/messages/.gitignore

@@ -1,13 +0,0 @@
-# Local
-.DS_Store
-*.local
-*.log*
-
-# Dist
-node_modules
-dist/
-
-# IDE
-.vscode/*
-!.vscode/extensions.json
-.idea

packages/messages/.prettierignore

@@ -1,4 +0,0 @@
-# Lock files
-package-lock.json
-pnpm-lock.yaml
-yarn.lock

packages/messages/.prettierrc

@@ -1,3 +0,0 @@
-{
-  "singleQuote": true
-}

packages/messages/README.md

@@ -1,23 +0,0 @@
-# Rslib Project
-
-## Setup
-
-Install the dependencies:
-
-```bash
-pnpm install
-```
-
-## Get Started
-
-Build the library:
-
-```bash
-pnpm build
-```
-
-Build the library in watch mode:
-
-```bash
-pnpm dev
-```

packages/messages/eslint.config.mjs

@@ -1,10 +0,0 @@
-import js from '@eslint/js';
-import globals from 'globals';
-import ts from 'typescript-eslint';
-
-export default [
-  { languageOptions: { globals: globals.browser } },
-  js.configs.recommended,
-  ...ts.configs.recommended,
-  { ignores: ['dist/'] },
-];

packages/messages/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "messages",
-  "version": "1.0.0",
-  "type": "module",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
-    }
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "rslib build",
-    "dev": "rslib build --watch",
-    "format": "prettier --write .",
-    "lint": "eslint .",
-    "test": "vitest run"
-  },
-  "dependencies": {
-    "eventemitter3": "~5.0.1"
-  },
-  "devDependencies": {
-    "@eslint/js": "^9.12.0",
-    "@rslib/core": "^0.0.16",
-    "@types/node": "^22.8.1",
-    "eslint": "^9.12.0",
-    "globals": "^15.11.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5.6.3",
-    "typescript-eslint": "^8.8.1",
-    "vitest": "^2.1.4"
-  },
-  "private": true
-}

packages/messages/rslib.config.ts

@@ -1,16 +0,0 @@
-import { defineConfig } from '@rslib/core';
-
-export default defineConfig({
-  lib: [
-    {
-      format: 'esm',
-      syntax: 'es2021',
-      dts: true,
-    },
-    {
-      format: 'cjs',
-      syntax: 'es2021',
-    },
-  ],
-  output: { target: 'node' },
-});

packages/messages/src/index.ts

@@ -1,3 +0,0 @@
-
-
-

packages/messages/src/server.ts

@@ -1,37 +0,0 @@
-import EventEmitter from 'eventemitter3';
-
-export class Server {
-  private EE: EventEmitter;
-
-  constructor() {
-    this.EE = new EventEmitter();
-  }
-
-  onConnect(callback: (con: Connect) => void) {
-    this.EE.on('connect', callback);
-  }
-}
-
-export interface Connect {
-  postMessage: (message: unknown) => void;
-  onMessage: (callback: (message: unknown) => void) => void;
-}
-
-export class ChromeServer {
-
-  private EE: EventEmitter;
-
-  constructor() {
-    chrome.runtime.onConnect.addListener((port) => {
-      this.EE.emit('connect', {
-        postMessage: (message: unknown) => port.postMessage(message),
-        onMessage: (callback: (message: unknown) => void) =>
-          port.onMessage.addListener(callback),
-      });
-    });
-  }
-
-  onConnect(callback: (con: Connect) => void) {
-    this.EE.on('connect', callback);
-  }
-}

packages/messages/tests/index.test.ts

@@ -1,5 +0,0 @@
-import { expect, test } from 'vitest';
-
-test('squared', () => {
-  expect(4).toBe(4);
-});

packages/messages/tsconfig.json

@@ -1,15 +0,0 @@
-{
-  "compilerOptions": {
-    "lib": ["ES2021"],
-    "module": "ESNext",
-    "noEmit": true,
-    "strict": true,
-    "skipLibCheck": true,
-    "isolatedModules": true,
-    "resolveJsonModule": true,
-    "moduleResolution": "bundler",
-    "useDefineForClassFields": true,
-    "allowImportingTsExtensions": true
-  },
-  "include": ["src"]
-}

packages/messages/vitest.config.ts

@@ -1,6 +0,0 @@
-import { defineConfig } from 'vitest/config';
-
-export default defineConfig({
-  // Configure Vitest (https://vitest.dev/config/)
-  test: {},
-});

pnpm-lock.yaml

@@ -73,11 +73,14 @@ importers:
         specifier: ^8.8.1
         version: 8.11.0(eslint@9.13.0)(typescript@5.6.3)
 
-  packages/messages:
+  packages/message:
     dependencies:
       eventemitter3:
         specifier: ~5.0.1
         version: 5.0.1
+      uuid:
+        specifier: ^11.0.3
+        version: 11.0.3
     devDependencies:
       '@eslint/js':
         specifier: ^9.12.0
@@ -85,6 +88,9 @@ importers:
       '@rslib/core':
         specifier: ^0.0.16
         version: 0.0.16(typescript@5.6.3)
+      '@types/chrome':
+        specifier: ^0.0.279
+        version: 0.0.279
       '@types/node':
         specifier: ^22.8.1
         version: 22.8.1
@@ -107,6 +113,76 @@ importers:
         specifier: ^2.1.4
         version: 2.1.4(@types/node@22.8.1)
 
+  packages/scriptcat:
+    dependencies:
+      '@scriptcat/message':
+        specifier: workspace:*
+        version: link:../message
+      dayjs:
+        specifier: ^1.11.13
+        version: 1.11.13
+      i18next:
+        specifier: ^23.16.4
+        version: 23.16.4
+      react:
+        specifier: ^18.2.0
+        version: 18.3.1
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.3.1(react@18.3.1)
+      react-i18next:
+        specifier: ^15.1.0
+        version: 15.1.0(i18next@23.16.4)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+    devDependencies:
+      '@eslint/compat':
+        specifier: ^1.2.0
+        version: 1.2.1(eslint@9.13.0)
+      '@eslint/js':
+        specifier: ^9.12.0
+        version: 9.13.0
+      '@rspack/cli':
+        specifier: ^1.0.14
+        version: 1.0.14(@rspack/core@1.0.14(@swc/helpers@0.5.13))(@types/express@4.17.21)
+      '@rspack/core':
+        specifier: ^1.0.14
+        version: 1.0.14(@swc/helpers@0.5.13)
+      '@types/chrome':
+        specifier: ^0.0.279
+        version: 0.0.279
+      '@types/react':
+        specifier: ^18.2.48
+        version: 18.3.12
+      '@types/react-dom':
+        specifier: ^18.2.18
+        version: 18.3.1
+      cross-env:
+        specifier: ^7.0.3
+        version: 7.0.3
+      eslint:
+        specifier: ^9.12.0
+        version: 9.13.0
+      eslint-plugin-react:
+        specifier: ^7.37.1
+        version: 7.37.2(eslint@9.13.0)
+      eslint-plugin-react-hooks:
+        specifier: ^5.0.0
+        version: 5.0.0(eslint@9.13.0)
+      globals:
+        specifier: ^15.11.0
+        version: 15.11.0
+      prettier:
+        specifier: ^3.3.3
+        version: 3.3.3
+      ts-node:
+        specifier: ^10.9.2
+        version: 10.9.2(@types/node@22.8.1)(typescript@5.6.3)
+      typescript:
+        specifier: ^5.6.3
+        version: 5.6.3
+      typescript-eslint:
+        specifier: ^8.8.1
+        version: 8.11.0(eslint@9.13.0)(typescript@5.6.3)
+
 packages:
 
   '@babel/runtime@7.26.0':
@@ -2409,6 +2485,10 @@ packages:
     resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
     engines: {node: '>= 0.4.0'}
 
+  uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+
   uuid@8.3.2:
     resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==}
     hasBin: true
@@ -5037,6 +5117,8 @@ snapshots:
 
   utils-merge@1.0.1: {}
 
+  uuid@11.0.3: {}
+
   uuid@8.3.2: {}
 
   v8-compile-cache-lib@3.0.1: {}

pnpm-workspace.yaml

@@ -1,2 +0,0 @@
-packages:
-  - "packages/*"

rspack.config.ts

@@ -37,7 +37,7 @@ export default defineConfig({
     extensions: ["...", ".ts", ".tsx", ".jsx"],
     alias: {
       "@App": path.resolve(__dirname, "src/"),
-      "@Pkg": path.resolve(__dirname, "pkg/"),
+      "@Packages": path.resolve(__dirname, "packages/"),
     },
   },
   module: {

src/service_worker.ts

@@ -1,6 +1,4 @@
-chrome.runtime.onConnect.addListener((port) => {
+import { ExtServer } from "@Packages/message/extension";
-  console.log("service worker connected", port);
-});
 
 async function setupOffscreenDocument() {
   // 创建运行后台脚本的沙盒环境
@@ -18,4 +16,11 @@ async function setupOffscreenDocument() {
   });
 }
 
-setupOffscreenDocument();
+async function main() {
+  // 初始化沙盒环境
+  await setupOffscreenDocument();
+  // 监听消息
+  new ExtServer();
+}
+
+main();

tsconfig.json

@@ -20,13 +20,14 @@
       "@App/*": [
         "src/*"
       ],
-      "@Pkg/*": [
+      "@Packages/*": [
-        "pkg/*"
+        "packages/*"
       ]
     },
   },
   "include": [
-    "src"
+    "src",
+    "packages"
   ],
   "ts-node": {
     "compilerOptions": {