crx-rpc 1.0.2 → 1.0.4

package/README.md

@@ -211,13 +211,15 @@ interface RpcErrorDetails {
 
 ## Observable Support
 
-The framework includes built-in support for reactive data streams using `RemoteSubject` and `Observable` patterns.
+The framework includes built-in support for reactive data streams using `RemoteSubject` and `Observable` patterns with a centralized message management system.
 
-### Remote Subject (Background Script)
+### Remote Subject Manager & Remote Subject (Background Script)
+
+The `RemoteSubjectManager` acts as a centralized message hub that handles all subscription management and message routing, while `RemoteSubject` focuses purely on state management.
 
 ```typescript
 // background.ts
-import { BackgroundRPC, RemoteSubject, createIdentifier } from 'crx-rpc';
+import { BackgroundRPC, RemoteSubjectManager, createIdentifier } from 'crx-rpc';
 
 interface ICounterObservable {
     value: number;
@@ -227,8 +229,15 @@ const ICounterObservable = createIdentifier<ICounterObservable>('Counter');
 
 const rpc = new BackgroundRPC();
 
-// Create a remote subject that can broadcast to multiple subscribers
-const counterSubject = new RemoteSubject(ICounterObservable, 'main', { value: 0 });
+// Create a centralized subject manager
+const subjectManager = new RemoteSubjectManager();
+
+// Create a remote subject through the manager
+const counterSubject = subjectManager.createSubject(
+    ICounterObservable, 
+    'main', 
+    { value: 0 }
+);
 
 // Update value and broadcast to all subscribers
 setInterval(() => {
@@ -236,8 +245,43 @@ setInterval(() => {
     counterSubject.next(newValue);
 }, 1000);
 
+// The manager handles:
+// - Message routing and subscription management
+// - Queuing subscriptions that arrive before subjects are created
+// - Automatic cleanup when tabs are closed
+// - Broadcasting to multiple subscribers
+
 // Cleanup
-// counterSubject.dispose();
+// subjectManager.dispose(); // This will dispose all subjects
+```
+
+### Key Features of RemoteSubjectManager
+
+- **Centralized Message Hub**: All observable-related messages are handled by the manager
+- **Queue Management**: Subscriptions received before subject creation are queued and processed later
+- **Resource Management**: Automatic cleanup of subscriptions when tabs are closed
+- **Type Safety**: Full TypeScript support with proper typing throughout
+
+### Architecture
+
+```
+┌─────────────────┐    ┌──────────────────────────────────────┐    ┌─────────────────┐
+│   Web Page      │    │         Background Script            │    │ Content Script  │
+├─────────────────┤    ├──────────────────────────────────────┤    ├─────────────────┤
+│ WebObservable   │    │       RemoteSubjectManager           │    │ContentObservable│
+│                 │    │  ┌─────────────────────────────────┐ │    │                 │
+│ subscribe() ────┼───▶│  │ Message Routing & Queue Mgmt    │ │◄───┤ subscribe()     │
+│                 │◄───│  │                                 │ │    │                 │
+└─────────────────┘    │  └─────────────────────────────────┘ │    └─────────────────┘
+                       │                │                     │
+                       │  ┌─────────────▼─────────────────┐   │
+                       │  │        RemoteSubject          │   │
+                       │  │  (Pure State Management)      │   │
+                       │  │                               │   │
+                       │  │ next() ─────────────────────▶ │   │
+                       │  │ complete() ─────────────────▶ │   │
+                       │  └───────────────────────────────┘   │
+                       └──────────────────────────────────────┘
 ```
 
 ### Subscribing from Web Page
@@ -294,21 +338,27 @@ const observable = new ContentObservable(
 
 ### Observable Communication Patterns
 
-The Observable system supports multiple communication patterns:
+The Observable system supports multiple communication patterns with centralized management:
 
 ```typescript
 // Pattern 1: Background → Web Page (via Content Script bridge)
-// Background: RemoteSubject.next()
+// Background: RemoteSubjectManager creates and manages RemoteSubject
+// Background: RemoteSubject.next() → Manager routes to subscribers
 // Web Page: WebObservable.subscribe()
 
 // Pattern 2: Background → Content Script (direct)
-// Background: RemoteSubject.next()
+// Background: RemoteSubject.next() → Manager routes directly
 // Content Script: ContentObservable.subscribe()
 
 // Pattern 3: Background → Both Web Page and Content Script
-// Background: RemoteSubject.next() (broadcasts to all subscribers)
+// Background: RemoteSubject.next() → Manager broadcasts to all subscribers
 // Web Page: WebObservable.subscribe()
 // Content Script: ContentObservable.subscribe()
+
+// Pattern 4: Subscription before Subject Creation (Queue Management)
+// Subscriber: WebObservable.subscribe() → Manager queues subscription
+// Background: Later creates RemoteSubject → Manager processes queued subscriptions
+// Result: No missed initial values, proper subscription ordering
 ```
 
 ## Advanced Usage
@@ -364,10 +414,12 @@ if (!client.isDisposed()) {
 - **`ContentRPC`**: Message bridge between web pages and background scripts
 - **`WebRPCClient`**: RPC client for web pages
 - **`ContentRPCClient`**: Direct RPC client for content scripts
+- **`RemoteSubjectManager`**: Centralized observable message management system
 
 ### Observable Classes
 
-- **`RemoteSubject<T>`**: Observable subject that can broadcast to multiple subscribers
+- **`RemoteSubjectManager`**: Centralized message hub that manages subscriptions and message routing for all observables
+- **`RemoteSubject<T>`**: Pure state management observable that works with the manager to broadcast updates
 - **`WebObservable<T>`**: Observable subscriber for web pages
 - **`ContentObservable<T>`**: Observable subscriber for content scripts
 
@@ -404,8 +456,9 @@ if (!client.isDisposed()) {
 4. **Performance Optimization**
    - Avoid frequent small data transfers
    - Consider batching operations when possible
-   - Use Observable pattern for real-time data updates
+   - Use Observable pattern for real-time data updates with `RemoteSubjectManager` for efficient message routing
    - Implement caching strategies where appropriate
+   - The manager automatically handles subscription queuing to prevent race conditions
 
 5. **Security Considerations**
    - Validate input parameters in service implementations

package/README.zh-CN.md

@@ -227,13 +227,15 @@ interface RpcErrorDetails {
 
 ## Observable支持
 
-框架包含使用 `RemoteSubject` 和 `Observable` 模式的内置响应式数据流支持。
+框架包含使用 `RemoteSubject` 和 `Observable` 模式的内置响应式数据流支持，采用集中式消息管理系统。
 
-### 远程Subject（背景脚本）
+### RemoteSubjectManager 和 RemoteSubject（背景脚本）
+
+`RemoteSubjectManager` 作为集中式消息中心处理所有订阅管理和消息路由，而 `RemoteSubject` 专注于纯状态管理。
 
 ```typescript
 // background.ts
-import { BackgroundRPC, RemoteSubject, createIdentifier } from 'crx-rpc';
+import { BackgroundRPC, RemoteSubjectManager, createIdentifier } from 'crx-rpc';
 
 interface ICounterObservable {
     value: number;
@@ -243,8 +245,15 @@ const ICounterObservable = createIdentifier<ICounterObservable>('Counter');
 
 const rpc = new BackgroundRPC();
 
-// 创建可以向多个订阅者广播的远程subject
-const counterSubject = new RemoteSubject(ICounterObservable, 'main', { value: 0 });
+// 创建集中式subject管理器
+const subjectManager = new RemoteSubjectManager();
+
+// 通过管理器创建远程subject
+const counterSubject = subjectManager.createSubject(
+    ICounterObservable, 
+    'main', 
+    { value: 0 }
+);
 
 // 更新值并广播给所有订阅者
 setInterval(() => {
@@ -252,8 +261,43 @@ setInterval(() => {
     counterSubject.next(newValue);
 }, 1000);
 
+// 管理器处理：
+// - 消息路由和订阅管理
+// - 在subject创建前到达的订阅排队
+// - tab关闭时自动清理
+// - 向多个订阅者广播
+
 // 清理
-// counterSubject.dispose();
+// subjectManager.dispose(); // 这将处理所有subject
+```
+
+### RemoteSubjectManager 的核心特性
+
+- **集中式消息中心**: 所有observable相关的消息都由管理器处理
+- **队列管理**: 在subject创建前收到的订阅会被排队并稍后处理
+- **资源管理**: tab关闭时自动清理订阅
+- **类型安全**: 完整的TypeScript支持和恰当的类型检查
+
+### 架构
+
+```
+┌─────────────────┐    ┌─────────────────────────────────────┐    ┌─────────────────┐
+│      网页        │    │             背景脚本                 │    │    内容脚本       │
+├─────────────────┤    ├─────────────────────────────────────┤    ├─────────────────┤
+│ WebObservable   │    │       RemoteSubjectManager          │    │ContentObservable│
+│                 │    │  ┌─────────────────────────────────┐│    │                 │
+│ subscribe() ────┼───▶│  │   消息路由和队列管理               │ │◄──┤ subscribe()     │
+│                 │◄───│  │                                 │ │   │                 │
+└─────────────────┘    │  └─────────────────────────────────┘ │   └─────────────────┘
+                       │               │                      │
+                       │  ┌─────────────▼─────────────────┐   │
+                       │  │        RemoteSubject          │   │
+                       │  │      (纯状态管理)               │   │
+                       │  │                               │   │
+                       │  │ next() ─────────────────────▶ │   │
+                       │  │ complete() ─────────────────▶ │   │
+                       │  └───────────────────────────────┘   │
+                       └──────────────────────────────────────┘
 ```
 
 ### 从网页订阅
@@ -310,21 +354,27 @@ const observable = new ContentObservable(
 
 ### Observable通信模式
 
-Observable系统支持多种通信模式：
+Observable系统支持多种具有集中式管理的通信模式：
 
 ```typescript
 // 模式1: 背景脚本 → 网页 (通过内容脚本桥接器)
-// 背景脚本: RemoteSubject.next()
+// 背景脚本: RemoteSubjectManager创建和管理RemoteSubject
+// 背景脚本: RemoteSubject.next() → Manager路由到订阅者
 // 网页: WebObservable.subscribe()
 
 // 模式2: 背景脚本 → 内容脚本 (直接)
-// 背景脚本: RemoteSubject.next()
+// 背景脚本: RemoteSubject.next() → Manager直接路由
 // 内容脚本: ContentObservable.subscribe()
 
 // 模式3: 背景脚本 → 网页和内容脚本同时
-// 背景脚本: RemoteSubject.next() (广播给所有订阅者)
+// 背景脚本: RemoteSubject.next() → Manager广播给所有订阅者
 // 网页: WebObservable.subscribe()
 // 内容脚本: ContentObservable.subscribe()
+
+// 模式4: Subject创建前的订阅 (队列管理)
+// 订阅者: WebObservable.subscribe() → Manager将订阅排队
+// 背景脚本: 稍后创建RemoteSubject → Manager处理排队的订阅
+// 结果: 不会错过初始值，保证订阅顺序
 ```
 
 ## 高级用法
@@ -480,10 +530,12 @@ const [sum, user, file] = await Promise.all([
 - **`ContentRPC`**: 网页和背景脚本间的消息桥接器
 - **`WebRPCClient`**: 网页的RPC客户端
 - **`ContentRPCClient`**: 内容脚本的直接RPC客户端
+- **`RemoteSubjectManager`**: 集中式observable消息管理系统
 
 ### Observable类
 
-- **`RemoteSubject<T>`**: 可以向多个订阅者广播的Observable subject
+- **`RemoteSubjectManager`**: 管理订阅和消息路由的集中式消息中心
+- **`RemoteSubject<T>`**: 与管理器配合进行纯状态管理的Observable subject
 - **`WebObservable<T>`**: 网页的Observable订阅者
 - **`ContentObservable<T>`**: 内容脚本的Observable订阅者
 
@@ -520,8 +572,9 @@ const [sum, user, file] = await Promise.all([
 4. **性能优化**
    - 避免频繁的小数据传输
    - 可能时考虑批处理操作
-   - 对实时数据更新使用Observable模式
+   - 对实时数据更新使用Observable模式，通过 `RemoteSubjectManager` 进行高效消息路由
    - 在适当的地方实现缓存策略
+   - 管理器自动处理订阅排队以防止竞态条件
 
 5. **安全考虑**
    - 在服务实现中验证输入参数

package/dist/background.d.ts

@@ -1,5 +1,5 @@
 import type { Identifier } from './id';
-import type { SubjectLike } from './types';
+import type { SubjectLike, RpcObservableUpdateMessage } from './types';
 import { Disposable } from './disposable';
 export declare class BackgroundRPC extends Disposable {
     private services;
@@ -10,12 +10,24 @@ export declare class RemoteSubject<T> extends Disposable implements SubjectLike<
     private identifier;
     private _key;
     private initialValue;
+    private manager;
     private completed;
-    private get _finalKey();
-    private senders;
-    constructor(identifier: Identifier<T>, _key: string, initialValue: T);
-    private _sendMessage;
+    get finalKey(): string;
+    constructor(identifier: Identifier<T>, _key: string, initialValue: T, manager: RemoteSubjectManager);
     next(value: T): void;
     complete(): void;
     subscribe(): () => void;
+    getInitialValue(): T;
+}
+export declare class RemoteSubjectManager extends Disposable {
+    private subjects;
+    private pendingSubscriptions;
+    private activeSenders;
+    constructor();
+    private handleSubscription;
+    private handleUnsubscription;
+    sendMessage(message: RpcObservableUpdateMessage<any>): void;
+    createSubject<T>(id: Identifier<T>, key: string, initialValue: T): RemoteSubject<T>;
+    getSubject<T>(key: string): RemoteSubject<T> | undefined;
+    removeSubject(key: string): void;
 }

package/dist/background.js

@@ -69,78 +69,169 @@ export class RemoteSubject extends Disposable {
     identifier;
     _key;
     initialValue;
+    manager;
     completed = false;
-    get _finalKey() {
+    get finalKey() {
         return `${this.identifier.key}-${this._key}`;
     }
-    senders = new Set();
-    constructor(identifier, _key, initialValue) {
+    constructor(identifier, _key, initialValue, manager) {
         super();
         this.identifier = identifier;
         this._key = _key;
         this.initialValue = initialValue;
-        // 初始化时立即广播一次
+        this.manager = manager;
+    }
+    next(value) {
+        if (this.completed)
+            return;
+        this.manager.sendMessage({
+            operation: 'next',
+            key: this.finalKey,
+            value,
+            type: OBSERVABLE_EVENT
+        });
+    }
+    complete() {
+        if (this.completed)
+            return;
+        this.completed = true;
+        this.manager.sendMessage({
+            operation: 'complete',
+            key: this.finalKey,
+            type: OBSERVABLE_EVENT
+        });
+    }
+    subscribe() {
+        throw new Error('RemoteSubject should not be subscribed locally.');
+    }
+    getInitialValue() {
+        return this.initialValue;
+    }
+}
+export class RemoteSubjectManager extends Disposable {
+    subjects = new Map();
+    pendingSubscriptions = new Map(); // key -> senderIds
+    activeSenders = new Map(); // key -> senderIds
+    constructor() {
+        super();
         const handleMessage = (msg, sender) => {
             const senderId = sender.tab.id;
             if (!senderId)
                 return;
             if (msg.type === SUBSCRIBABLE_OBSERVABLE) {
                 const { key } = msg;
-                if (key === this._finalKey) {
-                    this.senders.add(senderId);
-                    chrome.tabs.sendMessage(senderId, {
-                        operation: 'next',
-                        key: this._finalKey,
-                        value: this.initialValue,
-                    });
-                }
+                this.handleSubscription(key, senderId);
             }
             if (msg.type === UNSUBSCRIBE_OBSERVABLE) {
                 const { key } = msg;
-                if (key === this._finalKey) {
-                    this.senders.delete(senderId);
-                }
+                this.handleUnsubscription(key, senderId);
             }
         };
         chrome.runtime.onMessage.addListener(handleMessage);
         this.disposeWithMe(() => {
             chrome.runtime.onMessage.removeListener(handleMessage);
         });
-        const handleRemove = (tabId) => {
-            this.senders.delete(tabId);
+        const handleTabRemove = (tabId) => {
+            // 清理该 tab 的所有订阅
+            this.activeSenders.forEach((senders) => {
+                senders.delete(tabId);
+            });
+            this.pendingSubscriptions.forEach((senders) => {
+                senders.delete(tabId);
+            });
         };
-        chrome.tabs.onRemoved.addListener(handleRemove);
+        chrome.tabs.onRemoved.addListener(handleTabRemove);
         this.disposeWithMe(() => {
-            chrome.tabs.onRemoved.removeListener(handleRemove);
+            chrome.tabs.onRemoved.removeListener(handleTabRemove);
         });
     }
-    _sendMessage(message) {
-        chrome.runtime.sendMessage(message);
-        this.senders.forEach(senderId => {
-            chrome.tabs.sendMessage(senderId, message);
-        });
+    handleSubscription(key, senderId) {
+        const subject = this.subjects.get(key);
+        if (subject) {
+            // Subject 已存在，直接处理订阅
+            if (!this.activeSenders.has(key)) {
+                this.activeSenders.set(key, new Set());
+            }
+            this.activeSenders.get(key).add(senderId);
+            // 发送初始值
+            chrome.tabs.sendMessage(senderId, {
+                operation: 'next',
+                key,
+                value: subject.getInitialValue(),
+            });
+        }
+        else {
+            // Subject 尚未创建，缓存到待处理队列
+            if (!this.pendingSubscriptions.has(key)) {
+                this.pendingSubscriptions.set(key, new Set());
+            }
+            this.pendingSubscriptions.get(key).add(senderId);
+        }
     }
-    next(value) {
-        if (this.completed)
-            return;
-        this._sendMessage({
-            operation: 'next',
-            key: this._finalKey,
-            value,
-            type: OBSERVABLE_EVENT
-        });
+    handleUnsubscription(key, senderId) {
+        // 从活跃订阅中移除
+        const activeSenders = this.activeSenders.get(key);
+        if (activeSenders) {
+            activeSenders.delete(senderId);
+            if (activeSenders.size === 0) {
+                this.activeSenders.delete(key);
+            }
+        }
+        // 从待处理队列中移除
+        const pendingSenders = this.pendingSubscriptions.get(key);
+        if (pendingSenders) {
+            pendingSenders.delete(senderId);
+            if (pendingSenders.size === 0) {
+                this.pendingSubscriptions.delete(key);
+            }
+        }
     }
-    complete() {
-        if (this.completed)
-            return;
-        this.completed = true;
-        this._sendMessage({
-            operation: 'complete',
-            key: this._finalKey,
-            type: OBSERVABLE_EVENT
-        });
+    sendMessage(message) {
+        const { key } = message;
+        // 发送到所有订阅的 tabs
+        const senders = this.activeSenders.get(key);
+        if (senders) {
+            senders.forEach(senderId => {
+                chrome.tabs.sendMessage(senderId, message);
+            });
+        }
     }
-    subscribe() {
-        throw new Error('RemoteSubject should not be subscribed locally.');
+    createSubject(id, key, initialValue) {
+        const subject = new RemoteSubject(id, key, initialValue, this);
+        this.subjects.set(key, subject);
+        // 处理待处理的订阅
+        const pendingSenders = this.pendingSubscriptions.get(key);
+        if (pendingSenders && pendingSenders.size > 0) {
+            if (!this.activeSenders.has(key)) {
+                this.activeSenders.set(key, new Set());
+            }
+            const activeSenders = this.activeSenders.get(key);
+            // 将待处理的订阅转移到活跃订阅
+            pendingSenders.forEach(senderId => {
+                activeSenders.add(senderId);
+                // 发送初始值
+                chrome.tabs.sendMessage(senderId, {
+                    operation: 'next',
+                    key,
+                    value: initialValue,
+                });
+            });
+            // 清空待处理队列
+            this.pendingSubscriptions.delete(key);
+        }
+        return subject;
+    }
+    getSubject(key) {
+        return this.subjects.get(key);
+    }
+    removeSubject(key) {
+        const subject = this.subjects.get(key);
+        if (subject) {
+            subject.dispose();
+            this.subjects.delete(key);
+            // 清理相关的订阅信息
+            this.activeSenders.delete(key);
+            this.pendingSubscriptions.delete(key);
+        }
     }
 }

package/dist/client.js

@@ -1,5 +1,6 @@
 import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_RESPONSE_EVENT_NAME, UNSUBSCRIBE_OBSERVABLE } from './const';
 import { Disposable } from './disposable';
+import { randomId } from './tool';
 export class RPCClient extends Disposable {
     messageAdapter;
     pending = new Map();
@@ -24,7 +25,7 @@ export class RPCClient extends Disposable {
         }));
     }
     call(service, method, args) {
-        const id = crypto.randomUUID();
+        const id = randomId();
         return new Promise((resolve, reject) => {
             this.pending.set(id, { resolve, reject });
             const requestParam = {

package/dist/id.js

@@ -1,8 +1,9 @@
-// shared/utils/identifier.ts
 /**
  * 创建一个 Identifier。
  * @param key 唯一字符串标识
  */
 export function createIdentifier(key) {
-    return { key };
+    return {
+        key,
+    };
 }

package/dist/tool.d.ts

@@ -0,0 +1 @@
+export declare const randomId: () => string;

package/dist/tool.js

@@ -0,0 +1 @@
+export const randomId = () => Math.random().toString(36).slice(2);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "crx-rpc",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "A lightweight RPC framework for Chrome Extension (background <-> content <-> web)",
     "repository": {
         "type": "git",

package/src/background.ts

@@ -79,84 +79,192 @@ export class BackgroundRPC extends Disposable {
 export class RemoteSubject<T> extends Disposable implements SubjectLike<T> {
     private completed = false;
 
-    private get _finalKey() {
+    get finalKey() {
         return `${this.identifier.key}-${this._key}`;
     }
 
-    private senders = new Set<number>();
-
     constructor(
         private identifier: Identifier<T>,
         private _key: string,
         private initialValue: T,
+        private manager: RemoteSubjectManager,
     ) {
         super();
-        // 初始化时立即广播一次
+    }
+
+    next(value: T): void {
+        if (this.completed) return;
+        this.manager.sendMessage({
+            operation: 'next',
+            key: this.finalKey,
+            value,
+            type: OBSERVABLE_EVENT
+        });
+    }
+
+    complete(): void {
+        if (this.completed) return;
+        this.completed = true;
+        this.manager.sendMessage({
+            operation: 'complete',
+            key: this.finalKey,
+            type: OBSERVABLE_EVENT
+        });
+    }
+
+    subscribe(): () => void {
+        throw new Error('RemoteSubject should not be subscribed locally.');
+    }
+
+    getInitialValue(): T {
+        return this.initialValue;
+    }
+}
+
+export class RemoteSubjectManager extends Disposable {
+    private subjects = new Map<string, RemoteSubject<any>>();
+    private pendingSubscriptions = new Map<string, Set<number>>(); // key -> senderIds
+    private activeSenders = new Map<string, Set<number>>(); // key -> senderIds
+
+    constructor() {
+        super();
+
         const handleMessage = (msg: RpcObservableSubscribeMessage, sender: chrome.runtime.MessageSender) => {
             const senderId = sender.tab!.id!;
             if (!senderId) return;
 
             if (msg.type === SUBSCRIBABLE_OBSERVABLE) {
                 const { key } = msg;
-                if (key === this._finalKey) {
-                    this.senders.add(senderId);
-                    chrome.tabs.sendMessage(senderId, {
-                        operation: 'next',
-                        key: this._finalKey,
-                        value: this.initialValue,
-                    });
-                }
+                this.handleSubscription(key, senderId);
             }
 
             if (msg.type === UNSUBSCRIBE_OBSERVABLE) {
                 const { key } = msg;
-                if (key === this._finalKey) {
-                    this.senders.delete(senderId);
-                }
+                this.handleUnsubscription(key, senderId);
             }
-        }
+        };
+
         chrome.runtime.onMessage.addListener(handleMessage);
         this.disposeWithMe(() => {
             chrome.runtime.onMessage.removeListener(handleMessage);
         });
 
-        const handleRemove = (tabId: number) => {
-            this.senders.delete(tabId);
+        const handleTabRemove = (tabId: number) => {
+            // 清理该 tab 的所有订阅
+            this.activeSenders.forEach((senders) => {
+                senders.delete(tabId);
+            });
+            this.pendingSubscriptions.forEach((senders) => {
+                senders.delete(tabId);
+            });
         };
-        chrome.tabs.onRemoved.addListener(handleRemove);
+
+        chrome.tabs.onRemoved.addListener(handleTabRemove);
         this.disposeWithMe(() => {
-            chrome.tabs.onRemoved.removeListener(handleRemove);
+            chrome.tabs.onRemoved.removeListener(handleTabRemove);
         });
     }
 
-    private _sendMessage(message: RpcObservableUpdateMessage<any>) {
-        chrome.runtime.sendMessage(message);
-        this.senders.forEach(senderId => {
-            chrome.tabs.sendMessage(senderId, message);
-        });
+    private handleSubscription(key: string, senderId: number) {
+        const subject = this.subjects.get(key);
+
+        if (subject) {
+            // Subject 已存在，直接处理订阅
+            if (!this.activeSenders.has(key)) {
+                this.activeSenders.set(key, new Set());
+            }
+            this.activeSenders.get(key)!.add(senderId);
+
+            // 发送初始值
+            chrome.tabs.sendMessage(senderId, {
+                operation: 'next',
+                key,
+                value: subject.getInitialValue(),
+            });
+        } else {
+            // Subject 尚未创建，缓存到待处理队列
+            if (!this.pendingSubscriptions.has(key)) {
+                this.pendingSubscriptions.set(key, new Set());
+            }
+            this.pendingSubscriptions.get(key)!.add(senderId);
+        }
     }
 
-    next(value: T): void {
-        if (this.completed) return;
-        this._sendMessage({
-            operation: 'next',
-            key: this._finalKey,
-            value,
-            type: OBSERVABLE_EVENT
-        });
+    private handleUnsubscription(key: string, senderId: number) {
+        // 从活跃订阅中移除
+        const activeSenders = this.activeSenders.get(key);
+        if (activeSenders) {
+            activeSenders.delete(senderId);
+            if (activeSenders.size === 0) {
+                this.activeSenders.delete(key);
+            }
+        }
+
+        // 从待处理队列中移除
+        const pendingSenders = this.pendingSubscriptions.get(key);
+        if (pendingSenders) {
+            pendingSenders.delete(senderId);
+            if (pendingSenders.size === 0) {
+                this.pendingSubscriptions.delete(key);
+            }
+        }
     }
 
-    complete(): void {
-        if (this.completed) return;
-        this.completed = true;
-        this._sendMessage({
-            operation: 'complete',
-            key: this._finalKey,
-            type: OBSERVABLE_EVENT
-        });
+    sendMessage(message: RpcObservableUpdateMessage<any>) {
+        const { key } = message;
+
+        // 发送到所有订阅的 tabs
+        const senders = this.activeSenders.get(key);
+        if (senders) {
+            senders.forEach(senderId => {
+                chrome.tabs.sendMessage(senderId, message);
+            });
+        }
     }
 
-    subscribe(): () => void {
-        throw new Error('RemoteSubject should not be subscribed locally.');
+    createSubject<T>(id: Identifier<T>, key: string, initialValue: T): RemoteSubject<T> {
+        const subject = new RemoteSubject<T>(id, key, initialValue, this);
+        this.subjects.set(key, subject);
+
+        // 处理待处理的订阅
+        const pendingSenders = this.pendingSubscriptions.get(key);
+        if (pendingSenders && pendingSenders.size > 0) {
+            if (!this.activeSenders.has(key)) {
+                this.activeSenders.set(key, new Set());
+            }
+            const activeSenders = this.activeSenders.get(key)!;
+
+            // 将待处理的订阅转移到活跃订阅
+            pendingSenders.forEach(senderId => {
+                activeSenders.add(senderId);
+                // 发送初始值
+                chrome.tabs.sendMessage(senderId, {
+                    operation: 'next',
+                    key,
+                    value: initialValue,
+                });
+            });
+
+            // 清空待处理队列
+            this.pendingSubscriptions.delete(key);
+        }
+
+        return subject;
     }
-}
+
+    getSubject<T>(key: string): RemoteSubject<T> | undefined {
+        return this.subjects.get(key) as RemoteSubject<T> | undefined;
+    }
+
+    removeSubject(key: string): void {
+        const subject = this.subjects.get(key);
+        if (subject) {
+            subject.dispose();
+            this.subjects.delete(key);
+
+            // 清理相关的订阅信息
+            this.activeSenders.delete(key);
+            this.pendingSubscriptions.delete(key);
+        }
+    }
+}

package/src/client.ts

@@ -2,6 +2,7 @@ import { OBSERVABLE_EVENT, RPC_EVENT_NAME, RPC_RESPONSE_EVENT_NAME, UNSUBSCRIBE_
 import type { RpcRequest, RpcResponse, RpcObservableUpdateMessage, IMessageAdapter } from './types';
 import type { Identifier } from './id';
 import { Disposable } from './disposable';
+import { randomId } from './tool';
 
 // 类型工具：提取函数类型的参数和返回值类型
 type FunctionArgs<T> = T extends (...args: infer A) => any ? A : never;
@@ -40,7 +41,7 @@ export class RPCClient extends Disposable {
     }
 
     call<T = any>(service: string, method: string, args: any[]): Promise<T> {
-        const id = crypto.randomUUID();
+        const id = randomId();
         return new Promise<T>((resolve, reject) => {
             this.pending.set(id, { resolve, reject });
             const requestParam: RpcRequest = {

package/src/id.ts

@@ -1,5 +1,3 @@
-// shared/utils/identifier.ts
-
 /**
  * Identifier 类型，既携带类型信息，又在运行时能唯一标识。
  */
@@ -8,10 +6,12 @@ export interface Identifier<T> {
     __type?: T; // 用于 TS 类型推导，不会出现在运行时
 }
 
-  /**
-   * 创建一个 Identifier。
-   * @param key 唯一字符串标识
-   */
+/**
+ * 创建一个 Identifier。
+ * @param key 唯一字符串标识
+ */
 export function createIdentifier<T>(key: string): Identifier<T> {
-    return { key } as Identifier<T>;
+    return {
+        key,
+    } as Identifier<T>;
 }

package/src/tool.ts

@@ -0,0 +1 @@
+export const randomId = () => Math.random().toString(36).slice(2);