@telperion/messenger 7.6.1

package/broadcast/message-client.d.ts

@@ -0,0 +1,12 @@
+import { Subject } from "rxjs";
+import { MessageClient } from "../message-client";
+import { MessageResponse } from "../message-response.type";
+import { Message } from "../message.interface";
+import { GET_NEW_ID, RESPONSES$, SEND } from "../selectors";
+export declare class BroadcastMessageClient extends MessageClient {
+    #private;
+    protected [RESPONSES$]: Subject<MessageResponse>;
+    constructor(channelName?: string);
+    protected [SEND]<T>(message: Message<T>): void;
+    protected [GET_NEW_ID](): string;
+}

package/broadcast/message-client.js

@@ -0,0 +1,24 @@
+import { Subject } from "rxjs";
+import { MessageClient } from "../message-client";
+import { GET_NEW_ID, RESPONSES$, SEND } from "../selectors";
+import { DEFAULT_CHANNEL_NAME } from "./default-channel-name";
+export class BroadcastMessageClient extends MessageClient {
+    [RESPONSES$] = new Subject();
+    #channel;
+    constructor(channelName = DEFAULT_CHANNEL_NAME) {
+        super();
+        this.#channel = new BroadcastChannel(channelName);
+        this.#channel.addEventListener('message', this.#handler);
+    }
+    [SEND](message) {
+        this.#channel.postMessage(message);
+    }
+    #handler = (event) => {
+        this[RESPONSES$].next(event.data);
+    };
+    [GET_NEW_ID]() {
+        return crypto.randomUUID();
+    }
+}
+
+//# sourceMappingURL=message-client.js.map

package/broadcast/message-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/broadcast/message-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAM9D,MAAM,OAAO,sBAAuB,SAAQ,aAAa;IAC7C,CAAC,UAAU,CAAC,GAAG,IAAI,OAAO,EAAmB,CAAC;IAExD,QAAQ,CAAmB;IAE3B,YAAY,WAAW,GAAG,oBAAoB;QAC5C,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAElD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC3D,CAAC;IAES,CAAC,IAAI,CAAC,CAAI,OAAmB;QACrC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,QAAQ,GAAG,CAAC,KAAoC,EAAE,EAAE;QAClD,IAAI,CAAC,UAAU,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACpC,CAAC,CAAC;IAEQ,CAAC,UAAU,CAAC;QACpB,OAAO,MAAM,CAAC,UAAU,EAAE,CAAC;IAC7B,CAAC;CACF","file":"message-client.js","sourcesContent":["import { Subject } from \"rxjs\";\nimport { MessageClient } from \"../message-client\";\nimport { MessageResponse } from \"../message-response.type\";\nimport { Message } from \"../message.interface\";\nimport { GET_NEW_ID, RESPONSES$, SEND } from \"../selectors\";\nimport { DEFAULT_CHANNEL_NAME } from \"./default-channel-name\";\n\ninterface MessageEvent<T> {\n  data: T;\n}\n\nexport class BroadcastMessageClient extends MessageClient {\n  protected [RESPONSES$] = new Subject<MessageResponse>();\n\n  #channel: BroadcastChannel;\n\n  constructor(channelName = DEFAULT_CHANNEL_NAME) {\n    super();\n\n    this.#channel = new BroadcastChannel(channelName);\n\n    this.#channel.addEventListener('message', this.#handler);\n  }\n\n  protected [SEND]<T>(message: Message<T>) {\n    this.#channel.postMessage(message);\n  }\n\n  #handler = (event: MessageEvent<MessageResponse>) => {\n    this[RESPONSES$].next(event.data);\n  };\n\n  protected [GET_NEW_ID](): string {\n    return crypto.randomUUID();\n  }\n}"]}

package/broadcast/message-host.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BroadcastMessageHost = void 0;
+const rxjs_1 = require("rxjs");
+const message_host_1 = require("../message-host");
+const default_channel_name_1 = require("./default-channel-name");
+const selectors_1 = require("../selectors");
+class BroadcastMessageHost extends message_host_1.MessageHost {
+    #requests$ = new rxjs_1.Subject();
+    #channel;
+    constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME) {
+        super();
+        this.#channel = new BroadcastChannel(channelName);
+        this.#channel.addEventListener('message', this.#handler);
+        this[selectors_1.LISTEN](this.#requests$);
+    }
+    [selectors_1.RESPONSE](message) {
+        this.#channel.postMessage(message);
+    }
+    terminate() {
+        this.#channel.removeEventListener('message', this.#handler);
+        this.#channel.close();
+    }
+    #handler = (event) => {
+        this.#requests$.next(event.data);
+    };
+}
+exports.BroadcastMessageHost = BroadcastMessageHost;

package/broadcast/message-host.d.ts

@@ -0,0 +1,9 @@
+import { MessageHost } from "../message-host";
+import { MessageResponse } from "../message-response.type";
+import { RESPONSE } from "../selectors";
+export declare class BroadcastMessageHost extends MessageHost {
+    #private;
+    constructor(channelName?: string);
+    protected [RESPONSE](message: MessageResponse): void;
+    terminate(): void;
+}

package/broadcast/message-host.js

@@ -0,0 +1,26 @@
+import { Subject } from "rxjs";
+import { MessageHost } from "../message-host";
+import { DEFAULT_CHANNEL_NAME } from "./default-channel-name";
+import { LISTEN, RESPONSE } from "../selectors";
+export class BroadcastMessageHost extends MessageHost {
+    #requests$ = new Subject();
+    #channel;
+    constructor(channelName = DEFAULT_CHANNEL_NAME) {
+        super();
+        this.#channel = new BroadcastChannel(channelName);
+        this.#channel.addEventListener('message', this.#handler);
+        this[LISTEN](this.#requests$);
+    }
+    [RESPONSE](message) {
+        this.#channel.postMessage(message);
+    }
+    terminate() {
+        this.#channel.removeEventListener('message', this.#handler);
+        this.#channel.close();
+    }
+    #handler = (event) => {
+        this.#requests$.next(event.data);
+    };
+}
+
+//# sourceMappingURL=message-host.js.map

package/broadcast/message-host.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/broadcast/message-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAMhD,MAAM,OAAO,oBAAqB,SAAQ,WAAW;IACnD,UAAU,GAAG,IAAI,OAAO,EAAW,CAAC;IACpC,QAAQ,CAAmB;IAE3B,YAAY,WAAW,GAAG,oBAAoB;QAC5C,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAElD,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QACzD,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC;IAES,CAAC,QAAQ,CAAC,CAAC,OAAwB;QAC3C,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;IAED,SAAS;QACP,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5D,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;IACxB,CAAC;IAED,QAAQ,GAAG,CAAC,KAA4B,EAAE,EAAE;QAC1C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC,CAAC;CACH","file":"message-host.js","sourcesContent":["import { Subject } from \"rxjs\";\nimport { MessageHost } from \"../message-host\";\nimport { MessageResponse } from \"../message-response.type\";\nimport { Message } from \"../message.interface\";\nimport { DEFAULT_CHANNEL_NAME } from \"./default-channel-name\";\nimport { LISTEN, RESPONSE } from \"../selectors\";\n\ninterface MessageEvent<T> {\n  data: T;\n}\n\nexport class BroadcastMessageHost extends MessageHost {\n  #requests$ = new Subject<Message>();\n  #channel: BroadcastChannel;\n\n  constructor(channelName = DEFAULT_CHANNEL_NAME) {\n    super();\n\n    this.#channel = new BroadcastChannel(channelName);\n\n    this.#channel.addEventListener('message', this.#handler);\n    this[LISTEN](this.#requests$);\n  }\n\n  protected [RESPONSE](message: MessageResponse) {\n    this.#channel.postMessage(message);\n  }\n\n  terminate() {\n    this.#channel.removeEventListener('message', this.#handler);\n    this.#channel.close();\n  }\n\n  #handler = (event: MessageEvent<Message>) => {\n    this.#requests$.next(event.data);\n  };\n}\n"]}

package/broadcast/message-service.cjs

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BroadcastMessageService = void 0;
+const mixin_1 = require("@telperion/js-utils/class/mixin");
+const default_channel_name_1 = require("./default-channel-name");
+const message_client_1 = require("./message-client");
+const message_host_1 = require("./message-host");
+class BroadcastMessageService extends (0, mixin_1.mixin)(message_host_1.BroadcastMessageHost, message_client_1.BroadcastMessageClient) {
+    constructor(channelName = default_channel_name_1.DEFAULT_CHANNEL_NAME) {
+        super([channelName], [channelName]);
+    }
+}
+exports.BroadcastMessageService = BroadcastMessageService;

package/broadcast/message-service.d.ts

@@ -0,0 +1,8 @@
+import { BroadcastMessageClient } from "./message-client";
+declare const BroadcastMessageService_base: new (args_0: [channelName?: string | undefined], args_1: [channelName?: string | undefined]) => {
+    terminate: () => void;
+} & BroadcastMessageClient;
+export declare class BroadcastMessageService extends BroadcastMessageService_base {
+    constructor(channelName?: string);
+}
+export {};

package/broadcast/message-service.js

@@ -0,0 +1,11 @@
+import { mixin } from "@telperion/js-utils/class/mixin";
+import { DEFAULT_CHANNEL_NAME } from "./default-channel-name";
+import { BroadcastMessageClient } from "./message-client";
+import { BroadcastMessageHost } from "./message-host";
+export class BroadcastMessageService extends mixin(BroadcastMessageHost, BroadcastMessageClient) {
+    constructor(channelName = DEFAULT_CHANNEL_NAME) {
+        super([channelName], [channelName]);
+    }
+}
+
+//# sourceMappingURL=message-service.js.map

package/broadcast/message-service.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/broadcast/message-service.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,iCAAiC,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEtD,MAAM,OAAO,uBAAwB,SAAQ,KAAK,CAAC,oBAAoB,EAAE,sBAAsB,CAAC;IAC9F,YAAY,WAAW,GAAG,oBAAoB;QAC5C,KAAK,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC;IACtC,CAAC;CACF","file":"message-service.js","sourcesContent":["import { mixin } from \"@telperion/js-utils/class/mixin\";\nimport { DEFAULT_CHANNEL_NAME } from \"./default-channel-name\";\nimport { BroadcastMessageClient } from \"./message-client\";\nimport { BroadcastMessageHost } from \"./message-host\";\n\nexport class BroadcastMessageService extends mixin(BroadcastMessageHost, BroadcastMessageClient) {\n  constructor(channelName = DEFAULT_CHANNEL_NAME) {\n    super([channelName], [channelName]);\n  }\n}\n"]}

package/chrome/default-connection-name.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_CONNECTION_NAME = void 0;
+exports.DEFAULT_CONNECTION_NAME = 'MESSENGER_DEFAULT_CONNECTION';

package/chrome/default-connection-name.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_CONNECTION_NAME = "MESSENGER_DEFAULT_CONNECTION";

package/chrome/default-connection-name.js

@@ -0,0 +1,3 @@
+export const DEFAULT_CONNECTION_NAME = 'MESSENGER_DEFAULT_CONNECTION';
+
+//# sourceMappingURL=default-connection-name.js.map

package/chrome/default-connection-name.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/chrome/default-connection-name.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,uBAAuB,GAAG,8BAA8B,CAAC","file":"default-connection-name.js","sourcesContent":["export const DEFAULT_CONNECTION_NAME = 'MESSENGER_DEFAULT_CONNECTION';\n"]}

package/chrome/index.cjs

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChromeMessageHost = exports.ChromeMessageClient = exports.Listen = exports.Request = void 0;
+var request_decorator_1 = require("../request.decorator");
+Object.defineProperty(exports, "Request", { enumerable: true, get: function () { return request_decorator_1.Request; } });
+var listen_decorator_1 = require("../listen.decorator");
+Object.defineProperty(exports, "Listen", { enumerable: true, get: function () { return listen_decorator_1.Listen; } });
+var message_client_1 = require("./message-client");
+Object.defineProperty(exports, "ChromeMessageClient", { enumerable: true, get: function () { return message_client_1.ChromeMessageClient; } });
+var message_host_1 = require("./message-host");
+Object.defineProperty(exports, "ChromeMessageHost", { enumerable: true, get: function () { return message_host_1.ChromeMessageHost; } });

package/chrome/index.d.ts

@@ -0,0 +1,4 @@
+export { Request } from '../request.decorator';
+export { Listen } from '../listen.decorator';
+export { ChromeMessageClient } from './message-client';
+export { ChromeMessageHost } from './message-host';

package/chrome/index.js

@@ -0,0 +1,6 @@
+export { Request } from '../request.decorator';
+export { Listen } from '../listen.decorator';
+export { ChromeMessageClient } from './message-client';
+export { ChromeMessageHost } from './message-host';
+
+//# sourceMappingURL=index.js.map

package/chrome/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/chrome/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC","file":"index.js","sourcesContent":["export { Request } from '../request.decorator';\nexport { Listen } from '../listen.decorator';\nexport { ChromeMessageClient } from './message-client';\nexport { ChromeMessageHost } from './message-host';\n"]}

package/chrome/message-client.cjs

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChromeMessageClient = void 0;
+const rxjs_1 = require("rxjs");
+const operators_1 = require("rxjs/operators");
+const message_client_1 = require("../message-client");
+const selectors_1 = require("../selectors");
+const default_connection_name_1 = require("./default-connection-name");
+const RANDOM_ID_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+const RANDOM_ID_CHARS_LENGTH = RANDOM_ID_CHARS.length;
+const PORT = Symbol('Port');
+class ChromeMessageClient extends message_client_1.MessageClient {
+    static connections = {};
+    [selectors_1.RESPONSES$];
+    [PORT];
+    constructor(name = default_connection_name_1.DEFAULT_CONNECTION_NAME) {
+        super();
+        if (!(name in ChromeMessageClient.connections)) {
+            const port = chrome.runtime.connect({ name });
+            const responses = new rxjs_1.Observable(subscriber => {
+                port.onMessage.addListener((message) => {
+                    subscriber.next(message);
+                });
+            }).pipe((0, operators_1.share)());
+            ChromeMessageClient.connections[name] = { port, responses };
+        }
+        this[PORT] = ChromeMessageClient.connections[name].port;
+        this[selectors_1.RESPONSES$] = ChromeMessageClient.connections[name].responses;
+    }
+    [selectors_1.SEND](message) {
+        this[PORT].postMessage(message);
+    }
+    [selectors_1.GET_NEW_ID]() {
+        let result = '' + Date.now();
+        for (let i = 0; i < 10; i++) {
+            result += RANDOM_ID_CHARS.charAt(Math.floor(Math.random() * RANDOM_ID_CHARS_LENGTH));
+        }
+        return result;
+    }
+}
+exports.ChromeMessageClient = ChromeMessageClient;

package/chrome/message-client.d.ts

@@ -0,0 +1,15 @@
+import { Observable } from 'rxjs';
+import { MessageClient } from '../message-client';
+import { MessageResponse } from '../message-response.type';
+import { Message } from '../message.interface';
+import { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';
+declare const PORT: unique symbol;
+export declare class ChromeMessageClient extends MessageClient {
+    private static readonly connections;
+    [RESPONSES$]: Observable<MessageResponse>;
+    private [PORT];
+    constructor(name?: string);
+    [SEND]<T>(message: Message<T>): void;
+    protected [GET_NEW_ID](): string;
+}
+export {};

package/chrome/message-client.js

@@ -0,0 +1,39 @@
+import { Observable } from 'rxjs';
+import { share } from 'rxjs/operators';
+import { MessageClient } from '../message-client';
+import { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';
+import { DEFAULT_CONNECTION_NAME } from './default-connection-name';
+const RANDOM_ID_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+const RANDOM_ID_CHARS_LENGTH = RANDOM_ID_CHARS.length;
+const PORT = Symbol('Port');
+export class ChromeMessageClient extends MessageClient {
+    static connections = {};
+    [RESPONSES$];
+    [PORT];
+    constructor(name = DEFAULT_CONNECTION_NAME) {
+        super();
+        if (!(name in ChromeMessageClient.connections)) {
+            const port = chrome.runtime.connect({ name });
+            const responses = new Observable(subscriber => {
+                port.onMessage.addListener((message) => {
+                    subscriber.next(message);
+                });
+            }).pipe(share());
+            ChromeMessageClient.connections[name] = { port, responses };
+        }
+        this[PORT] = ChromeMessageClient.connections[name].port;
+        this[RESPONSES$] = ChromeMessageClient.connections[name].responses;
+    }
+    [SEND](message) {
+        this[PORT].postMessage(message);
+    }
+    [GET_NEW_ID]() {
+        let result = '' + Date.now();
+        for (let i = 0; i < 10; i++) {
+            result += RANDOM_ID_CHARS.charAt(Math.floor(Math.random() * RANDOM_ID_CHARS_LENGTH));
+        }
+        return result;
+    }
+}
+
+//# sourceMappingURL=message-client.js.map

package/chrome/message-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/chrome/message-client.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAClC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5D,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAEpE,MAAM,eAAe,GAAG,gEAAgE,CAAC;AACzF,MAAM,sBAAsB,GAAG,eAAe,CAAC,MAAM,CAAC;AACtD,MAAM,IAAI,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;AAO5B,MAAM,OAAO,mBAAoB,SAAQ,aAAa;IAC5C,MAAM,CAAU,WAAW,GAAkC,EAAE,CAAC;IAEjE,CAAC,UAAU,CAAC,CAA8B;IACzC,CAAC,IAAI,CAAC,CAAsB;IAEpC,YAAY,IAAI,GAAG,uBAAuB;QACxC,KAAK,EAAE,CAAC;QAER,IAAI,CAAC,CAAC,IAAI,IAAI,mBAAmB,CAAC,WAAW,CAAC,EAAE,CAAC;YAC/C,MAAM,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;YAC9C,MAAM,SAAS,GAAG,IAAI,UAAU,CAAkB,UAAU,CAAC,EAAE;gBAC7D,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,OAAwB,EAAE,EAAE;oBACtD,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBAC3B,CAAC,CAAC,CAAC;YACL,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC;YAEjB,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;QAC9D,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,GAAG,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;QACxD,IAAI,CAAC,UAAU,CAAC,GAAG,mBAAmB,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC;IACrE,CAAC;IAEM,CAAC,IAAI,CAAC,CAAI,OAAmB;QAClC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAClC,CAAC;IAES,CAAC,UAAU,CAAC;QACpB,IAAI,MAAM,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;QAE7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,MAAM,IAAI,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,sBAAsB,CAAC,CAAC,CAAC;QACvF,CAAC;QAED,OAAO,MAAM,CAAC;IAChB,CAAC","file":"message-client.js","sourcesContent":["import { Observable } from 'rxjs';\nimport { share } from 'rxjs/operators';\n\nimport { MessageClient } from '../message-client';\nimport { MessageResponse } from '../message-response.type';\nimport { Message } from '../message.interface';\nimport { GET_NEW_ID, RESPONSES$, SEND } from '../selectors';\nimport { DEFAULT_CONNECTION_NAME } from './default-connection-name';\n\nconst RANDOM_ID_CHARS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';\nconst RANDOM_ID_CHARS_LENGTH = RANDOM_ID_CHARS.length;\nconst PORT = Symbol('Port');\n\ninterface Connection {\n  port: chrome.runtime.Port;\n  responses: Observable<MessageResponse>;\n}\n\nexport class ChromeMessageClient extends MessageClient {\n  private static readonly connections: { [key: string]: Connection } = {};\n\n  public [RESPONSES$]: Observable<MessageResponse>;\n  private [PORT]: chrome.runtime.Port;\n\n  constructor(name = DEFAULT_CONNECTION_NAME) {\n    super();\n\n    if (!(name in ChromeMessageClient.connections)) {\n      const port = chrome.runtime.connect({ name });\n      const responses = new Observable<MessageResponse>(subscriber => {\n        port.onMessage.addListener((message: MessageResponse) => {\n          subscriber.next(message);\n        });\n      }).pipe(share());\n\n      ChromeMessageClient.connections[name] = { port, responses };\n    }\n\n    this[PORT] = ChromeMessageClient.connections[name].port;\n    this[RESPONSES$] = ChromeMessageClient.connections[name].responses;\n  }\n\n  public [SEND]<T>(message: Message<T>) {\n    this[PORT].postMessage(message);\n  }\n\n  protected [GET_NEW_ID](): string {\n    let result = '' + Date.now();\n\n    for (let i = 0; i < 10; i++) {\n      result += RANDOM_ID_CHARS.charAt(Math.floor(Math.random() * RANDOM_ID_CHARS_LENGTH));\n    }\n\n    return result;\n  }\n}\n"]}

package/chrome/message-host.cjs

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChromeMessageHost = void 0;
+const rxjs_1 = require("rxjs");
+const message_host_1 = require("../message-host");
+const default_connection_name_1 = require("./default-connection-name");
+const selectors_1 = require("../selectors");
+class ChromeMessageHost extends message_host_1.MessageHost {
+    static PORT_IDENTIFIER = 'portIdentifier';
+    #ports = {};
+    #requests = new rxjs_1.Subject();
+    constructor(name = default_connection_name_1.DEFAULT_CONNECTION_NAME) {
+        super();
+        chrome.runtime.onConnect.addListener((port) => {
+            if (port.name !== name) {
+                return;
+            }
+            port.onMessage.addListener((message, incomingMessagePort) => {
+                if (!this.#ports[incomingMessagePort.sender.tab.id]) {
+                    this.#ports[incomingMessagePort.sender.tab.id] = incomingMessagePort;
+                    incomingMessagePort.onDisconnect.addListener(disconnectedPort => {
+                        delete this.#ports[disconnectedPort.sender.tab.id];
+                        this[selectors_1.TERMINATE_MESSAGE$].next(message.id);
+                    });
+                }
+                const newMessage = {
+                    ...message,
+                    id: `${message.id}&${ChromeMessageHost.PORT_IDENTIFIER}=${incomingMessagePort.sender.tab.id}`,
+                };
+                this.#requests.next(newMessage);
+            });
+        });
+        this[selectors_1.LISTEN](this.#requests);
+    }
+    [selectors_1.RESPONSE](message) {
+        const [messageId, portId] = message.id.split(`&${ChromeMessageHost.PORT_IDENTIFIER}=`);
+        message.id = messageId;
+        if (this.#ports[portId]) {
+            this.#ports[portId].postMessage(message);
+        }
+    }
+}
+exports.ChromeMessageHost = ChromeMessageHost;

package/chrome/message-host.d.ts

@@ -0,0 +1,9 @@
+import { MessageHost } from '../message-host';
+import { SuccessfulMessageResponse } from '../message-response.type';
+import { RESPONSE } from '../selectors';
+export declare class ChromeMessageHost extends MessageHost {
+    #private;
+    private static readonly PORT_IDENTIFIER;
+    constructor(name?: string);
+    protected [RESPONSE](message: SuccessfulMessageResponse): void;
+}

package/chrome/message-host.js

@@ -0,0 +1,41 @@
+import { Subject } from 'rxjs';
+import { MessageHost } from '../message-host';
+import { DEFAULT_CONNECTION_NAME } from './default-connection-name';
+import { LISTEN, RESPONSE, TERMINATE_MESSAGE$ } from '../selectors';
+export class ChromeMessageHost extends MessageHost {
+    static PORT_IDENTIFIER = 'portIdentifier';
+    #ports = {};
+    #requests = new Subject();
+    constructor(name = DEFAULT_CONNECTION_NAME) {
+        super();
+        chrome.runtime.onConnect.addListener((port) => {
+            if (port.name !== name) {
+                return;
+            }
+            port.onMessage.addListener((message, incomingMessagePort) => {
+                if (!this.#ports[incomingMessagePort.sender.tab.id]) {
+                    this.#ports[incomingMessagePort.sender.tab.id] = incomingMessagePort;
+                    incomingMessagePort.onDisconnect.addListener(disconnectedPort => {
+                        delete this.#ports[disconnectedPort.sender.tab.id];
+                        this[TERMINATE_MESSAGE$].next(message.id);
+                    });
+                }
+                const newMessage = {
+                    ...message,
+                    id: `${message.id}&${ChromeMessageHost.PORT_IDENTIFIER}=${incomingMessagePort.sender.tab.id}`,
+                };
+                this.#requests.next(newMessage);
+            });
+        });
+        this[LISTEN](this.#requests);
+    }
+    [RESPONSE](message) {
+        const [messageId, portId] = message.id.split(`&${ChromeMessageHost.PORT_IDENTIFIER}=`);
+        message.id = messageId;
+        if (this.#ports[portId]) {
+            this.#ports[portId].postMessage(message);
+        }
+    }
+}
+
+//# sourceMappingURL=message-host.js.map

package/chrome/message-host.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../libs/messenger/src/chrome/message-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAE/B,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AACpE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEpE,MAAM,OAAO,iBAAkB,SAAQ,WAAW;IACxC,MAAM,CAAU,eAAe,GAAG,gBAAgB,CAAC;IAE3D,MAAM,GAAyC,EAAE,CAAC;IAClD,SAAS,GAAG,IAAI,OAAO,EAAW,CAAC;IAEnC,YAAY,IAAI,GAAG,uBAAuB;QACxC,KAAK,EAAE,CAAC;QAER,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,IAAI,EAAE,EAAE;YAC5C,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,EAAE,CAAC;gBACvB,OAAO;YACT,CAAC;YAED,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,OAAgB,EAAE,mBAAwC,EAAE,EAAE;gBACxF,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAO,CAAC,GAAI,CAAC,EAAG,CAAC,EAAE,CAAC;oBACvD,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAO,CAAC,GAAI,CAAC,EAAG,CAAC,GAAG,mBAAmB,CAAC;oBAExE,mBAAmB,CAAC,YAAY,CAAC,WAAW,CAAC,gBAAgB,CAAC,EAAE;wBAC9D,OAAO,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAO,CAAC,GAAI,CAAC,EAAG,CAAC,CAAC;wBACtD,IAAI,CAAC,kBAAkB,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;oBAC5C,CAAC,CAAC,CAAC;gBACL,CAAC;gBAED,MAAM,UAAU,GAAG;oBACjB,GAAG,OAAO;oBACV,EAAE,EAAE,GAAG,OAAO,CAAC,EAAE,IAAI,iBAAiB,CAAC,eAAe,IAAI,mBAAmB,CAAC,MAAO,CAAC,GAAI,CAAC,EAAG,EAAE;iBACjG,CAAC;gBAEF,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAClC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC/B,CAAC;IAES,CAAC,QAAQ,CAAC,CAAC,OAAkC;QACrD,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,iBAAiB,CAAC,eAAe,GAAG,CAAC,CAAC;QAEvF,OAAO,CAAC,EAAE,GAAG,SAAS,CAAC;QAEvB,IAAI,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC","file":"message-host.js","sourcesContent":["import { Subject } from 'rxjs';\n\nimport { MessageHost } from '../message-host';\nimport { SuccessfulMessageResponse } from '../message-response.type';\nimport { Message } from '../message.interface';\nimport { DEFAULT_CONNECTION_NAME } from './default-connection-name';\nimport { LISTEN, RESPONSE, TERMINATE_MESSAGE$ } from '../selectors';\n\nexport class ChromeMessageHost extends MessageHost {\n  private static readonly PORT_IDENTIFIER = 'portIdentifier';\n\n  #ports: {[key: string]: chrome.runtime.Port} = {};\n  #requests = new Subject<Message>();\n\n  constructor(name = DEFAULT_CONNECTION_NAME) {\n    super();\n\n    chrome.runtime.onConnect.addListener((port) => {\n      if (port.name !== name) {\n        return;\n      }\n\n      port.onMessage.addListener((message: Message, incomingMessagePort: chrome.runtime.Port) => {\n        if (!this.#ports[incomingMessagePort.sender!.tab!.id!]) {\n          this.#ports[incomingMessagePort.sender!.tab!.id!] = incomingMessagePort;\n\n          incomingMessagePort.onDisconnect.addListener(disconnectedPort => {\n            delete this.#ports[disconnectedPort.sender!.tab!.id!];\n            this[TERMINATE_MESSAGE$].next(message.id);\n          });\n        }\n\n        const newMessage = {\n          ...message,\n          id: `${message.id}&${ChromeMessageHost.PORT_IDENTIFIER}=${incomingMessagePort.sender!.tab!.id!}`,\n        };\n\n        this.#requests.next(newMessage);\n      });\n    });\n\n    this[LISTEN](this.#requests);\n  }\n\n  protected [RESPONSE](message: SuccessfulMessageResponse): void {\n    const [messageId, portId] = message.id.split(`&${ChromeMessageHost.PORT_IDENTIFIER}=`);\n\n    message.id = messageId;\n\n    if (this.#ports[portId]) {\n      this.#ports[portId].postMessage(message);\n    }\n  }\n}\n"]}

package/docs/images/broadcast-communication.svg

@@ -0,0 +1,87 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
+  <defs>
+    <style>
+      .title { font: bold 24px sans-serif; fill: #2c3e50; }
+      .subtitle { font: 16px sans-serif; fill: #7f8c8d; }
+      .label { font: 14px sans-serif; fill: #34495e; }
+      .code { font: 11px monospace; fill: #2c3e50; }
+      .tab { fill: #ecf0f1; stroke: #95a5a6; stroke-width: 3; }
+      .service { fill: #9b59b6; stroke: #8e44ad; stroke-width: 2; }
+      .channel { fill: none; stroke: #e74c3c; stroke-width: 4; stroke-dasharray: 10,5; }
+      .arrow { stroke: #3498db; stroke-width: 2; fill: none; marker-end: url(#arrowhead); }
+      .broadcast-wave { fill: none; stroke: #e74c3c; stroke-width: 2; opacity: 0.6; }
+      text { text-anchor: middle; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#3498db" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="450" y="35" class="title">Broadcast Channel Communication</text>
+  <text x="450" y="60" class="subtitle">Multi-tab/window messaging within same origin</text>
+
+  <!-- Central Channel -->
+  <circle cx="450" cy="320" r="80" class="channel"/>
+  <text x="450" y="310" class="label" style="font-weight: bold; font-size: 18px; fill: #e74c3c;">Broadcast</text>
+  <text x="450" y="335" class="label" style="font-weight: bold; font-size: 18px; fill: #e74c3c;">Channel</text>
+  <text x="450" y="360" class="code" style="fill: #e74c3c;">"my-app-channel"</text>
+
+  <!-- Broadcast waves -->
+  <circle cx="450" cy="320" r="100" class="broadcast-wave"/>
+  <circle cx="450" cy="320" r="120" class="broadcast-wave"/>
+  <circle cx="450" cy="320" r="140" class="broadcast-wave"/>
+
+  <!-- Tab 1 (Top Left) -->
+  <rect x="50" y="100" width="250" height="140" rx="8" class="tab"/>
+  <rect x="50" y="100" width="250" height="25" rx="8" style="fill: #3498db;"/>
+  <text x="175" y="118" class="label" style="fill: white; font-weight: bold;">Tab 1 🌐</text>
+
+  <rect x="70" y="145" width="210" height="80" rx="5" class="service"/>
+  <text x="175" y="170" class="label" style="fill: white; font-weight: bold; font-size: 13px;">BroadcastMessageService</text>
+  <text x="175" y="192" class="code" style="fill: #f39c12;">@Request('sync')</text>
+  <text x="175" y="210" class="code" style="fill: #2ecc71;">@Listen('notification')</text>
+
+  <!-- Tab 2 (Top Right) -->
+  <rect x="600" y="100" width="250" height="140" rx="8" class="tab"/>
+  <rect x="600" y="100" width="250" height="25" rx="8" style="fill: #3498db;"/>
+  <text x="725" y="118" class="label" style="fill: white; font-weight: bold;">Tab 2 🌐</text>
+
+  <rect x="620" y="145" width="210" height="80" rx="5" class="service"/>
+  <text x="725" y="170" class="label" style="fill: white; font-weight: bold; font-size: 13px;">BroadcastMessageService</text>
+  <text x="725" y="192" class="code" style="fill: #2ecc71;">@Listen('sync')</text>
+  <text x="725" y="210" class="code" style="fill: #f39c12;">@Request('notification')</text>
+
+  <!-- Tab 3 (Bottom Left) -->
+  <rect x="50" y="420" width="250" height="140" rx="8" class="tab"/>
+  <rect x="50" y="420" width="250" height="25" rx="8" style="fill: #3498db;"/>
+  <text x="175" y="438" class="label" style="fill: white; font-weight: bold;">Tab 3 🌐</text>
+
+  <rect x="70" y="465" width="210" height="80" rx="5" class="service"/>
+  <text x="175" y="490" class="label" style="fill: white; font-weight: bold; font-size: 13px;">BroadcastMessageService</text>
+  <text x="175" y="512" class="code" style="fill: #2ecc71;">@Listen('sync')</text>
+  <text x="175" y="530" class="code" style="fill: #2ecc71;">@Listen('notification')</text>
+
+  <!-- Tab 4 (Bottom Right) -->
+  <rect x="600" y="420" width="250" height="140" rx="8" class="tab"/>
+  <rect x="600" y="420" width="250" height="25" rx="8" style="fill: #3498db;"/>
+  <text x="725" y="438" class="label" style="fill: white; font-weight: bold;">Tab 4 🌐</text>
+
+  <rect x="620" y="465" width="210" height="80" rx="5" class="service"/>
+  <text x="725" y="490" class="label" style="fill: white; font-weight: bold; font-size: 13px;">BroadcastMessageService</text>
+  <text x="725" y="512" class="code" style="fill: #f39c12;">@Request('sync')</text>
+  <text x="725" y="530" class="code" style="fill: #f39c12;">@Request('notification')</text>
+
+  <!-- Arrows connecting tabs to channel -->
+  <path d="M 240 240 L 400 280" class="arrow"/>
+  <path d="M 650 240 L 490 280" class="arrow"/>
+  <path d="M 240 420 L 400 360" class="arrow"/>
+  <path d="M 650 420 L 490 360" class="arrow"/>
+
+  <!-- Info Box -->
+  <rect x="325" y="140" width="250" height="90" rx="5" style="fill: #34495e; stroke: #2c3e50; stroke-width: 2;"/>
+  <text x="450" y="165" class="label" style="fill: white; font-weight: bold;">All tabs share the channel</text>
+  <text x="450" y="190" class="label" style="fill: #ecf0f1; font-size: 12px;">Messages sent by one tab</text>
+  <text x="450" y="210" class="label" style="fill: #ecf0f1; font-size: 12px;">are received by all other tabs</text>
+
+</svg>

package/docs/images/chrome-extension-communication.svg

@@ -0,0 +1,110 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
+  <defs>
+    <style>
+      .title { font: bold 24px sans-serif; fill: #2c3e50; }
+      .subtitle { font: 16px sans-serif; fill: #7f8c8d; }
+      .label { font: 14px sans-serif; fill: #34495e; }
+      .code { font: 11px monospace; fill: #2c3e50; }
+      .context { fill: #ecf0f1; stroke: #95a5a6; stroke-width: 3; }
+      .client { fill: #3498db; stroke: #2980b9; stroke-width: 2; }
+      .host { fill: #2ecc71; stroke: #27ae60; stroke-width: 2; }
+      .service { fill: #9b59b6; stroke: #8e44ad; stroke-width: 2; }
+      .arrow { stroke: #e74c3c; stroke-width: 2.5; fill: none; marker-end: url(#arrowhead); }
+      .arrow-back { stroke: #f39c12; stroke-width: 2.5; fill: none; marker-end: url(#arrowhead-back); }
+      text { text-anchor: middle; }
+    </style>
+    <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#e74c3c" />
+    </marker>
+    <marker id="arrowhead-back" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+      <polygon points="0 0, 10 3, 0 6" fill="#f39c12" />
+    </marker>
+  </defs>
+
+  <!-- Title -->
+  <text x="450" y="35" class="title">Chrome Extension Communication</text>
+  <text x="450" y="60" class="subtitle">Background script ↔ Content scripts, Popups, DevTools</text>
+
+  <!-- Background Script (Center/Hub) -->
+  <rect x="325" y="240" width="250" height="120" rx="8" class="context"/>
+  <text x="450" y="270" class="label" style="font-weight: bold; font-size: 16px;">Background Script</text>
+  <text x="450" y="290" class="label" style="font-size: 11px; fill: #7f8c8d;">(Service Worker)</text>
+
+  <rect x="345" y="305" width="210" height="45" rx="5" class="host"/>
+  <text x="450" y="325" class="label" style="fill: white; font-weight: bold; font-size: 13px;">ChromeMessageHost</text>
+  <text x="450" y="343" class="code" style="fill: white;">@Listen('fetchData')</text>
+
+  <!-- Content Script (Left) -->
+  <rect x="50" y="100" width="200" height="140" rx="8" class="context"/>
+  <text x="150" y="130" class="label" style="font-weight: bold;">Content Script</text>
+  <text x="150" y="148" class="label" style="font-size: 10px; fill: #7f8c8d;">(webpage)</text>
+
+  <rect x="70" y="165" width="160" height="60" rx="5" class="client"/>
+  <text x="150" y="185" class="label" style="fill: white; font-weight: bold; font-size: 12px;">ChromeMessageClient</text>
+  <text x="150" y="205" class="code" style="fill: white;">@Request('fetchData')</text>
+  <text x="150" y="220" class="code" style="fill: white;">@Request('saveSettings')</text>
+
+  <!-- Popup (Top Right) -->
+  <rect x="650" y="100" width="200" height="140" rx="8" class="context"/>
+  <text x="750" y="130" class="label" style="font-weight: bold;">Popup / Action</text>
+  <text x="750" y="148" class="label" style="font-size: 10px; fill: #7f8c8d;">(browser action)</text>
+
+  <rect x="670" y="165" width="160" height="60" rx="5" class="client"/>
+  <text x="750" y="185" class="label" style="fill: white; font-weight: bold; font-size: 12px;">ChromeMessageClient</text>
+  <text x="750" y="205" class="code" style="fill: white;">@Request('getState')</text>
+  <text x="750" y="220" class="code" style="fill: white;">@Request('updateBadge')</text>
+
+  <!-- DevTools (Bottom Left) -->
+  <rect x="50" y="420" width="200" height="140" rx="8" class="context"/>
+  <text x="150" y="450" class="label" style="font-weight: bold;">DevTools Panel</text>
+  <text x="150" y="468" class="label" style="font-size: 10px; fill: #7f8c8d;">(devtools page)</text>
+
+  <rect x="70" y="485" width="160" height="60" rx="5" class="client"/>
+  <text x="150" y="505" class="label" style="fill: white; font-weight: bold; font-size: 12px;">ChromeMessageClient</text>
+  <text x="150" y="525" class="code" style="fill: white;">@Request('inspect')</text>
+
+  <!-- Options Page (Bottom Right) -->
+  <rect x="650" y="420" width="200" height="140" rx="8" class="context"/>
+  <text x="750" y="450" class="label" style="font-weight: bold;">Options Page</text>
+  <text x="750" y="468" class="label" style="font-size: 10px; fill: #7f8c8d;">(settings)</text>
+
+  <rect x="670" y="485" width="160" height="60" rx="5" class="service"/>
+  <text x="750" y="505" class="label" style="fill: white; font-weight: bold; font-size: 12px;">ChromeMessageService</text>
+  <text x="750" y="525" class="code" style="fill: white;">@Request + @Listen</text>
+
+  <!-- Arrows from contexts to background -->
+  <!-- Content Script to Background -->
+  <path d="M 250 180 L 325 280" class="arrow"/>
+  <text x="270" y="220" class="code" style="fill: #e74c3c; font-size: 10px;">chrome.runtime</text>
+  <text x="270" y="235" class="code" style="fill: #e74c3c; font-size: 10px;">.sendMessage</text>
+
+  <!-- Background to Content Script -->
+  <path d="M 345 295 L 260 200" class="arrow-back"/>
+
+  <!-- Popup to Background -->
+  <path d="M 650 190 L 575 285" class="arrow"/>
+  <text x="630" y="225" class="code" style="fill: #e74c3c; font-size: 10px;">chrome.runtime</text>
+  <text x="630" y="240" class="code" style="fill: #e74c3c; font-size: 10px;">.sendMessage</text>
+
+  <!-- Background to Popup -->
+  <path d="M 555 290 L 660 200" class="arrow-back"/>
+
+  <!-- DevTools to Background -->
+  <path d="M 250 500 L 340 350" class="arrow"/>
+
+  <!-- Background to DevTools -->
+  <path d="M 355 360 L 260 520" class="arrow-back"/>
+
+  <!-- Options to Background -->
+  <path d="M 650 510 L 575 330" class="arrow"/>
+
+  <!-- Background to Options -->
+  <path d="M 555 335 L 660 520" class="arrow-back"/>
+
+  <!-- Legend -->
+  <rect x="320" y="470" width="260" height="90" rx="5" style="fill: #34495e; stroke: #2c3e50; stroke-width: 2;"/>
+  <text x="450" y="495" class="label" style="fill: white; font-weight: bold; font-size: 13px;">Chrome Runtime API</text>
+  <text x="340" y="520" class="code" style="fill: #3498db; text-anchor: start;">chrome.runtime.sendMessage()</text>
+  <text x="340" y="540" class="code" style="fill: #2ecc71; text-anchor: start;">chrome.runtime.onMessage</text>
+
+</svg>