Overview

mezon-web-sdk is a lightweight TypeScript library designed to facilitate seamless communication between web applications (running inside iframe channels) and the host Mezon application. It provides a simple and secure event-driven interface using the browser's postMessage API for cross-origin communication.

Why mezon-web-sdk?

This SDK abstracts the complexities of cross-origin iframe communication within Mezon channels, allowing developers to focus on building engaging channel applications. The core features include:

• 🟢 Event-Driven Communication: Easily send and receive events between your channel app and the Mezon client using a secure postMessage interface.
• 🔵 Secure by Design: Communication is restricted to trusted Mezon origins, preventing unauthorized interactions and ensuring application security.
• 🟡 Dynamic Integration: The host Mezon application can dynamically pass parameters, change themes, and inject custom CSS into your channel app at runtime.
• 🔴 State Persistence: Initialization parameters are automatically persisted in sessionStorage to maintain state across page reloads and navigation.
• 🟣 Cross-Platform Compatibility: Works seamlessly across all modern browsers and platforms where Mezon is supported.
• 🟠 Lightweight & Fast: Minimal footprint with no external dependencies, ensuring quick loading and optimal performance.
• ⚙️ TypeScript Support: Built with TypeScript for full type safety and enhanced developer experience with IntelliSense support.

---

Features

	Component	Details
⚙️	Architecture	A singleton MezonWebView class that acts as the central point of interaction. Event-driven architecture for handling communication between the iframe and the parent window. Secure by design, communicating only with trusted target origins.
🔩	Core Functionality	Handles the postMessage API for cross-origin communication. Parses initialization parameters from the URL hash. Persists initParams in sessionStorage for stateful reloads.
🔌	Event System	Provides onEvent and offEvent methods for subscribing to events sent from the Mezon application. Provides a postEvent method to send events to the Mezon application. Supports predefined events for lifecycle (IframeReady) and theming (ThemeChanged).
🎨	Dynamic Styling	Allows the host Mezon application to inject arbitrary CSS into the channel app's context via the SetCustomStyle event. Provides utility functions for managing CSS variables and properties.
🧩	Utilities	Includes helper functions for parsing URL hash and query parameters. Provides safe wrappers for sessionStorage access with prefixed keys. Built-in iframe detection and validation.
🛡️	Security	Origin validation for all incoming messages. Trusted target enforcement for sensitive operations. Safe parameter parsing and validation.
📦	Dependencies	Zero external dependencies - pure TypeScript/JavaScript implementation. Compatible with all modern browsers supporting postMessage API.
🚀	Performance	Lightweight bundle with minimal overhead. Efficient event handling with automatic cleanup. Optimized for iframe environments and quick initialization.

---

Project Structure

└── mezon-web-js/
    ├── package.json
    ├── README.md
    ├── tsconfig.json
    ├── webpack.config.js
    ├── src/
    │   ├── index.ts
    │   └── webview/
    │       ├── constant.ts
    │       ├── index.ts
    │       ├── types.ts
    │       ├── utils.ts
    │       └── webview.ts
    ├── example/
    │   ├── index.html
    │   ├── main.js
    │   ├── counter.js
    │   ├── style.css
    │   └── public/
    │       └── mezon-sdk.js
    └── build/
        ├── mezon-web-sdk.js
        └── mezon-web-sdk.d.ts