diff --git a/example/src/IframePage.tsx b/example/src/IframePage.tsx
index 936fdf2f..7c04d955 100644
--- a/example/src/IframePage.tsx
+++ b/example/src/IframePage.tsx
@@ -1,85 +1,120 @@
-import React, {useEffect} from 'react'
+import React, {useCallback, useEffect, useRef, useState} from 'react'
 import {EVENTS, ACTIONS, createMessageHelper} from 'griffith-message'
 
-export default function IframePage() {
+export default function IframePage(): JSX.Element {
+  const [iframeRefs] = useState(() =>
+    [...Array(4).keys()].map(() => React.createRef<HTMLIFrameElement>())
+  )
+  const timeInputRef = useRef<HTMLInputElement>(null)
+  const helperRef = useRef<ReturnType<typeof createMessageHelper>>()
+
   useEffect(() => {
-    const {subscribeMessage, dispatchMessage} = createMessageHelper()
+    helperRef.current = createMessageHelper()
 
-    function pauseAllOtherVideos(thisWindow) {
-      Array.from(document.querySelectorAll('iframe'))
-        .map(node => node.contentWindow)
-        .filter(w => w !== thisWindow)
-        .forEach(w => dispatchMessage(w, ACTIONS.PLAYER.PAUSE))
+    function pauseAllOtherVideos(thisWindow: MessageEventSource) {
+      iframeRefs
+        .map((ref) => ref.current!.contentWindow!)
+        .filter((w) => w !== thisWindow)
+        .forEach((w) =>
+          helperRef.current!.dispatchMessage(w, ACTIONS.PLAYER.PAUSE)
+        )
     }
 
-    const disposer = subscribeMessage((messageName, data, sourceWindow) => {
-      if (messageName === EVENTS.DOM.PLAY) {
-        pauseAllOtherVideos(sourceWindow)
+    const disposer = helperRef.current.subscribeMessage(
+      (messageName, data, sourceWindow) => {
+        if (messageName === EVENTS.DOM.PLAY) {
+          pauseAllOtherVideos(sourceWindow!)
+        }
       }
-    })
-
-    const firstVideoWindow = document.querySelector('iframe').contentWindow
-
-    document.getElementById('jsPauseFirst').addEventListener('click', () => {
-      dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.PAUSE)
-    })
-
-    document.getElementById('jsPlayFirst').addEventListener('click', () => {
-      dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.PLAY)
-    })
-
-    document.getElementById('jsSeekFirst').addEventListener('click', () => {
-      const currentTime = Number(document.getElementById('time').value)
-      dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.TIME_UPDATE, {
-        currentTime,
-      })
-    })
-
-    document
-      .getElementById('jsShowControllerFirst')
-      .addEventListener('click', () => {
-        dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.SHOW_CONTROLLER)
-      })
-
-    document
-      .getElementById('jsSetVolumeFirst')
-      .addEventListener('click', () => {
-        dispatchMessage(firstVideoWindow, ACTIONS.PLAYER.SET_VOLUME, {
-          volume: 0,
-        })
-      })
+    )
 
     return () => {
       disposer.unsubscribe()
     }
-  }, [])
+  }, [iframeRefs])
+
+  const getFirstWindow = useCallback(
+    () => iframeRefs[0].current!.contentWindow!,
+    [iframeRefs]
+  )
 
   return (
     <>
       <p>本页面可以测试播放器在 iframe 中的效果，还可以测试跨窗口消息接口</p>
-      <p>场景 1：向一个视频发出暂停 / 播放指令</p>
-      <p>场景 2：一个视频开始播放时，暂停其他视频</p>
-      <p>场景 3：手动 seek</p>
-      <p>场景 4：显示进度条</p>
-      <p>场景 5：设置视频的音量</p>
-      <div>
-        <iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
-        <iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
-        <iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
-        <iframe src="/mp4?nonav" allowFullScreen frameBorder="0" />
-      </div>
-      <br />
-      <button id="jsPauseFirst">暂停第一个视频</button>
-      <br />
-      <button id="jsPlayFirst">播放第一个视频</button>
-      <br />
       <div>
-        <input id="time" />
-        <button id="jsSeekFirst">手动 seek 第一个视频</button>
+        {iframeRefs.map((ref, i) => (
+          <iframe
+            ref={ref}
+            key={i}
+            src="/mp4?nonav"
+            allowFullScreen
+            frameBorder="0"
+          />
+        ))}
       </div>
-      <button id="jsShowControllerFirst">让第一个视频显示进度条</button>
-      <br />
-      <button id="jsSetVolumeFirst">让第一个视频静音</button>
+      <section>
+        <h2>场景演示</h2>
+        <button
+          onClick={() => {
+            helperRef.current!.dispatchMessage(
+              getFirstWindow(),
+              ACTIONS.PLAYER.PAUSE
+            )
+          }}
+        >
+          暂停第一个视频
+        </button>
+        <button
+          onClick={() => {
+            helperRef.current!.dispatchMessage(
+              getFirstWindow(),
+              ACTIONS.PLAYER.PLAY
+            )
+          }}
+        >
+          播放第一个视频（暂停其他视频）
+        </button>
+        <div>
+          <input ref={timeInputRef} />
+          <button
+            onClick={() => {
+              const currentTime = Number(timeInputRef.current!.value)
+              helperRef.current!.dispatchMessage(
+                getFirstWindow(),
+                ACTIONS.PLAYER.TIME_UPDATE,
+                {
+                  currentTime,
+                }
+              )
+            }}
+          >
+            手动 seek 第一个视频
+          </button>
+        </div>
+        <button
+          onClick={() => {
+            helperRef.current!.dispatchMessage(
+              getFirstWindow(),
+              ACTIONS.PLAYER.SHOW_CONTROLLER
+            )
+          }}
+        >
+          让第一个视频显示进度条
+        </button>
+        <button
+          onClick={() => {
+            helperRef.current!.dispatchMessage(
+              getFirstWindow(),
+              ACTIONS.PLAYER.SET_VOLUME,
+              {
+                volume: 0,
+              }
+            )
+          }}
+        >
+          让第一个视频静音
+        </button>
+      </section>
     </>
   )
 }
diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
index 60706f12..0df37b30 100644
--- a/example/src/MP4Page.tsx
+++ b/example/src/MP4Page.tsx
@@ -5,7 +5,12 @@ import React, {
   useContext,
   useEffect,
 } from 'react'
-import Player, {MessageContext, ACTIONS, EVENTS} from 'griffith'
+import Player, {
+  MessageContext,
+  MessageContextValue,
+  ACTIONS,
+  EVENTS,
+} from 'griffith'
 import {useLocation} from 'react-router-dom'
 import Logo from './Logo'
 import {logEvent} from './utils'
@@ -74,8 +79,9 @@ const LogoListener: React.FC<{shouldShowLogo: boolean}> = ({
 }
 
 const App = () => {
-  const dispatchRef = useRef(null)
+  const dispatchRef = useRef<MessageContextValue['dispatchAction']>()
   const query = useQuery()
+
   return (
     <>
       <Player
diff --git a/packages/griffith-message/README-zh-Hans.md b/packages/griffith-message/README-zh-Hans.md
index 80aeab3f..b823025f 100644
--- a/packages/griffith-message/README-zh-Hans.md
+++ b/packages/griffith-message/README-zh-Hans.md
@@ -99,12 +99,12 @@ dispatchMessage(targetWindow, messageName, data)
 
 往播放器发送的事件
 
-| `messageName`                     | 说明                 | `data`                                            | 状态   |
-| --------------------------------- | -------------------- | ------------------------------------------------- | ------ |
-| `ACTIONS.PLAYER.PLAY`             | 播放                 | `{applyOnFullScreen: boolean}` 是否应用于全屏视频 | 已支持 |
-| `ACTIONS.PLAYER.PAUSE`            | 暂停                 | 同上                                              | 已支持 |
-| `ACTIONS.PLAYER.SET_VOLUME`       | 设置音量             | `{volume: number}` 音量值，0 到 1                 | 已支持 |
-| `ACTIONS.PLAYER.ENTER_FULLSCREEN` | 进入全屏             | 无                                                | 已支持 |
-| `ACTIONS.PLAYER.EXIT_FULLSCREEN`  | 退出全屏             | 无                                                | 已支持 |
-| `ACTIONS.PLAYER.TIME_UPDATE`      | 设置视频播放进度     | `{currentTime: number} 设置视频当前的进度`        | 已支持 |
-| `ACTIONS.PLAYER.SHOW_CONTROLLER`  | 显示播放器进度条控件 | 无                                                | 已支持 |
+| `messageName`                     | 说明                 | `data`                                                |
+| --------------------------------- | -------------------- | ----------------------------------------------------- |
+| `ACTIONS.PLAYER.PLAY`             | 播放                 | `void`                                                |
+| `ACTIONS.PLAYER.PAUSE`            | 暂停                 | `{dontApplyOnFullScreen: boolean}` 是否应用于全屏视频 |
+| `ACTIONS.PLAYER.SET_VOLUME`       | 设置音量             | `{volume: number}` 音量值，0 到 1                     |
+| `ACTIONS.PLAYER.ENTER_FULLSCREEN` | 进入全屏             | `void`                                                |
+| `ACTIONS.PLAYER.EXIT_FULLSCREEN`  | 退出全屏             | `void`                                                |
+| `ACTIONS.PLAYER.TIME_UPDATE`      | 设置视频播放进度     | `{currentTime: number}` 设置视频当前的进度            |
+| `ACTIONS.PLAYER.SHOW_CONTROLLER`  | 显示播放器进度条控件 | `void`                                                |
diff --git a/packages/griffith-message/README.md b/packages/griffith-message/README.md
index 92f1d377..5595920c 100644
--- a/packages/griffith-message/README.md
+++ b/packages/griffith-message/README.md
@@ -96,15 +96,15 @@ Events received from the player
 
 ### ACTIONS
 
-Event sent to the player
-
-| `messageName`                      | Description               | `data`                                                      | Status    |
-| ---------------------------------- | ------------------------- | ----------------------------------------------------------- | --------- |
-| `ACTIONS.PLAYER.PLAY`              | Play                      | `{applyOnFullScreen: boolean}` Applied to full screen video | SUPPORTED |
-| `ACTIONS.PLAYER.PAUSE`             | Pause                     | Applied to full screen video                                | SUPPORTED |
-| `ACTIONS.PLAYER.SET_VOLUME`        | Set the volume            | `{volume: number}` Volume value from 0 to 1                 | SUPPORTED |
-| `ACTIONS.PLAYER.ENTER_FULLSCREEN`  | Enter fullScreen          | null                                                        | SUPPORTED |
-| `ACTIONS.PLAYER.EXIT_FULLSCREEN`   | Exit fullscreen           | null                                                        | SUPPORTED |
-| `ACTIONS.PLAYER.TIME_UPDATE`       | Set current time          | `{currentTime: number} Set the currentTime`                 | SUPPORTED |
-| `ACTIONS.PLAYER.SHOW_CONTROLLER`   | Show Controller           | null                                                        | SUPPORTED |
-| `EVENTS.PLAYER.SUBSCRIPTION_READY` | Action subscription ready | null                                                        |
+Actions sent to the player
+
+| `messageName`                      | Description               | `data`                                                                   |
+| ---------------------------------- | ------------------------- | ------------------------------------------------------------------------ |
+| `ACTIONS.PLAYER.PLAY`              | Play                      | `void`                                                                   |
+| `ACTIONS.PLAYER.PAUSE`             | Pause                     | `{dontApplyOnFullScreen: boolean}` Whether to apply to full screen video |
+| `ACTIONS.PLAYER.SET_VOLUME`        | Set the volume            | `{volume: number}` Volume value from 0 to 1                              |
+| `ACTIONS.PLAYER.ENTER_FULLSCREEN`  | Enter fullScreen          | `void`                                                                   |
+| `ACTIONS.PLAYER.EXIT_FULLSCREEN`   | Exit fullscreen           | `void`                                                                   |
+| `ACTIONS.PLAYER.TIME_UPDATE`       | Set current time          | `{currentTime: number}` Set the current playback time                    |
+| `ACTIONS.PLAYER.SHOW_CONTROLLER`   | Show Controller           | `void`                                                                   |
+| `EVENTS.PLAYER.SUBSCRIPTION_READY` | Action subscription ready | `void`                                                                   |
diff --git a/packages/griffith-message/src/constants/actions.ts b/packages/griffith-message/src/constants/actions.ts
index 23e3f9f7..6823fb98 100644
--- a/packages/griffith-message/src/constants/actions.ts
+++ b/packages/griffith-message/src/constants/actions.ts
@@ -1,13 +1,40 @@
-export const PLAYER = {
-  PLAY: 'action/player/play',
-  PAUSE: 'action/player/pause',
-  SET_VOLUME: 'action/player/set-volume',
-  ENTER_FULLSCREEN: 'action/player/enter-fullscreen',
-  EXIT_FULLSCREEN: 'action/player/exit-fullscreen',
-  ENTER_PAGE_FULLSCREEN: 'event/player/enter-page-fullscreen',
-  EXIT_PAGE_FULLSCREEN: 'event/player/exit-page-fullscreen',
-  ENTER_PIP: 'action/player/enter-pip',
-  EXIT_PIP: 'action/player/exit-pip',
-  TIME_UPDATE: 'action/player/time-update',
-  SHOW_CONTROLLER: 'action/player/show-controller',
+// NOTE: 补充新类型时，应当在 `ActionParamsMap` 中定义参数类型
+enum PLAYER {
+  PLAY = 'action/player/play',
+  PAUSE = 'action/player/pause',
+  SET_VOLUME = 'action/player/set-volume',
+  ENTER_FULLSCREEN = 'action/player/enter-fullscreen',
+  EXIT_FULLSCREEN = 'action/player/exit-fullscreen',
+  ENTER_PAGE_FULLSCREEN = 'event/player/enter-page-fullscreen',
+  EXIT_PAGE_FULLSCREEN = 'event/player/exit-page-fullscreen',
+  ENTER_PIP = 'action/player/enter-pip',
+  EXIT_PIP = 'action/player/exit-pip',
+  TIME_UPDATE = 'action/player/time-update',
+  SHOW_CONTROLLER = 'action/player/show-controller',
+}
+
+// TODO：临时兼容，下一版本删除，直接在定义上合并，否则造成引用上的麻烦
+export const ACTIONS = {
+  ...PLAYER,
+  /** @deprecated */
+  PLAYER,
+}
+
+export type ACTIONS = PLAYER | never
+
+// 泛型确保了 void 定义有效应用于 spread 提取
+type Dispatch<P> = (params: P) => void
+
+export type ActionParamsMap = {
+  [ACTIONS.PLAY]: Dispatch<void>
+  [ACTIONS.PAUSE]: Dispatch<void | {dontApplyOnFullScreen: boolean}>
+  [ACTIONS.SET_VOLUME]: Dispatch<{volume: number}>
+  [ACTIONS.ENTER_FULLSCREEN]: Dispatch<void>
+  [ACTIONS.EXIT_FULLSCREEN]: Dispatch<void>
+  [ACTIONS.ENTER_PAGE_FULLSCREEN]: Dispatch<void>
+  [ACTIONS.EXIT_PAGE_FULLSCREEN]: Dispatch<void>
+  [ACTIONS.ENTER_PIP]: Dispatch<void>
+  [ACTIONS.EXIT_PIP]: Dispatch<void>
+  [ACTIONS.TIME_UPDATE]: Dispatch<{currentTime: number}>
+  [ACTIONS.SHOW_CONTROLLER]: Dispatch<void>
 }
diff --git a/packages/griffith-message/src/constants/events.ts b/packages/griffith-message/src/constants/events.ts
index a87bd421..402444b0 100644
--- a/packages/griffith-message/src/constants/events.ts
+++ b/packages/griffith-message/src/constants/events.ts
@@ -1,35 +1,62 @@
 // pair to native DOM events, see https://mdn.io/video
-export const DOM = {
-  PLAY: 'event/dom/play',
-  PLAYING: 'event/dom/playing',
-  PAUSE: 'event/dom/pause',
-  ENDED: 'event/dom/ended',
-  TIMEUPDATE: 'event/dom/timeupdate',
-  ERROR: 'event/dom/error',
-  WAITING: 'event/dom/waiting',
+enum DOM {
+  PLAY = 'event/dom/play',
+  PLAYING = 'event/dom/playing',
+  PAUSE = 'event/dom/pause',
+  ENDED = 'event/dom/ended',
+  TIMEUPDATE = 'event/dom/timeupdate',
+  ERROR = 'event/dom/error',
+  WAITING = 'event/dom/waiting',
 }
 
 // custom events
-export const PLAYER = {
-  QUALITY_CHANGE: 'event/player/quality-change',
-  CHANGE_QUALITY_START: 'event/player/quality-change-start',
-  CHANGE_QUALITY_SUCCESS: 'event/player/quality-change-success',
-  CHANGE_QUALITY_FAIL: 'event/player/quality-change-fail',
-  PLAYBACK_RATE_CHANGE: 'event/player/rate-change',
-  REQUEST_PLAY: 'event/player/request-play',
-  PLAY_REJECTED: 'event/player/play-rejected',
-  REQUEST_PAUSE: 'event/player/request-pause',
-  PLAY_COUNT: 'event/player/play-count',
-  PLAY_FAILED: 'event/player/play-failed',
-  ENTER_FULLSCREEN: 'event/player/enter-fullscreen',
-  EXIT_FULLSCREEN: 'event/player/exit-fullscreen',
-  ENTER_PAGE_FULLSCREEN: 'event/player/enter-page-fullscreen',
-  EXIT_PAGE_FULLSCREEN: 'event/player/exit-page-fullscreen',
-  ENTER_PIP: 'event/player/enter-pip',
-  EXIT_PIP: 'event/player/exit-pip',
-  SHOW_CONTROLLER: 'event/player/show-controller',
-  HIDE_CONTROLLER: 'event/player/hide-controller',
-  HOVER_PROGRESS_DOT: 'event/player/hover-progress-dot',
-  LEAVE_PROGRESS_DOT: 'event/player/leave-progress-dot',
-  SUBSCRIPTION_READY: 'event/player/subscription-ready',
+enum PLAYER {
+  QUALITY_CHANGE = 'event/player/quality-change',
+  CHANGE_QUALITY_START = 'event/player/quality-change-start',
+  CHANGE_QUALITY_SUCCESS = 'event/player/quality-change-success',
+  CHANGE_QUALITY_FAIL = 'event/player/quality-change-fail',
+  PLAYBACK_RATE_CHANGE = 'event/player/rate-change',
+  REQUEST_PLAY = 'event/player/request-play',
+  PLAY_REJECTED = 'event/player/play-rejected',
+  REQUEST_PAUSE = 'event/player/request-pause',
+  PLAY_COUNT = 'event/player/play-count',
+  PLAY_FAILED = 'event/player/play-failed',
+  ENTER_FULLSCREEN = 'event/player/enter-fullscreen',
+  EXIT_FULLSCREEN = 'event/player/exit-fullscreen',
+  ENTER_PAGE_FULLSCREEN = 'event/player/enter-page-fullscreen',
+  EXIT_PAGE_FULLSCREEN = 'event/player/exit-page-fullscreen',
+  ENTER_PIP = 'event/player/enter-pip',
+  EXIT_PIP = 'event/player/exit-pip',
+  SHOW_CONTROLLER = 'event/player/show-controller',
+  HIDE_CONTROLLER = 'event/player/hide-controller',
+  HOVER_PROGRESS_DOT = 'event/player/hover-progress-dot',
+  LEAVE_PROGRESS_DOT = 'event/player/leave-progress-dot',
+  SUBSCRIPTION_READY = 'event/player/subscription-ready',
+}
+
+// TODO：临时兼容，下一版本删除，直接在定义上合并，否则造成引用上的麻烦
+export const EVENTS = {
+  ...DOM,
+  ...PLAYER,
+  /** @deprecated */ DOM,
+  /** @deprecated */ PLAYER,
+}
+
+export type EVENTS = DOM | PLAYER
+
+type DOMEventParams = {
+  currentTime: number
+  duration: number
+  error: {code: number; message: string; name: string} | null
+}
+
+export type EventParamsMap = {
+  [EVENTS.PLAY]: DOMEventParams
+  [EVENTS.PLAYING]: DOMEventParams
+  [EVENTS.PAUSE]: DOMEventParams
+  [EVENTS.ENDED]: DOMEventParams
+  [EVENTS.TIMEUPDATE]: DOMEventParams
+  [EVENTS.ERROR]: DOMEventParams
+  [EVENTS.WAITING]: DOMEventParams
+  [EVENTS.QUALITY_CHANGE]: {quality: string; prevQuality: string}
 }
diff --git a/packages/griffith-message/src/createMessageHelper.ts b/packages/griffith-message/src/createMessageHelper.ts
index bb24e7fe..8ede8aeb 100644
--- a/packages/griffith-message/src/createMessageHelper.ts
+++ b/packages/griffith-message/src/createMessageHelper.ts
@@ -1,32 +1,74 @@
+import {ACTIONS, ActionParamsMap} from './constants/actions'
+import {EVENTS, EventParamsMap} from './constants/events'
+
 const LIB_ID = 'griffith'
 
+// 消息载体，真实传递给播放器
+type MessagePayload = {
+  name: ACTIONS & EVENTS
+  data?: unknown
+}
+
+// 消息，MessageHelper 在 postMessage 事件中处理
 type Message = {
   from: string
   id: string
-  payload: {
-    messageName: string
-    data: unknown
-  }
+  payload: MessagePayload
 }
 
+type Unsubscribe = {unsubscribe: () => void}
+
 /**
  * 创建一个消息管理器
+ *
+ * @example
+ *
+ * ```ts
+ * import {createMessageHelper, EVENTS, ACTIONS} from 'griffith-message'
+ *
+ * const helper = createMessageHelper()
+ * helper.subscribeMessage(EVENTS.PLAY, r => { r.currentTime })
+ * helper.subscribeMessage(EVENTS.QUALITY_CHANGE, r => { r.quality })
+ * helper.dispatchMessage(window, ACTIONS.SET_VOLUME, {volume: .5})
+ * helper.dispose()
+ * ```
+ *
  * @param id 唯一 id，传出消息会带着这个 id
  * @param targetOrigin 对应窗口的域名，不传或者传 * 表示不限制
  * @param shouldValidateId 是否验证传入消息的 id 和自身 id 相同
  */
 function createMessageHelper(
-  id: string,
+  id?: string,
   targetOrigin = '*',
   shouldValidateId = false
 ) {
+  let disposers: Unsubscribe[] = []
+
+  /**
+   * Subscribe event from player
+   */
+  function subscribeMessage<E extends keyof EventParamsMap>(
+    name: E,
+    handler: (
+      data: EventParamsMap[E],
+      source: MessageEventSource | null
+    ) => void
+  ): void
+  /**
+   * Subscribe event from player
+   * @deprecated Please use `subscribeMessage(name, handler)` for better type annotation
+   */
   function subscribeMessage(
     handler: (
-      messageName: Message['payload']['messageName'],
-      data: Message['payload']['data'] | null,
+      name: EVENTS,
+      data: unknown,
       source: MessageEventSource | null
     ) => void
-  ) {
+  ): void
+  function subscribeMessage(arg1: any, arg2?: any) {
+    const isLegacy = typeof arg1 === 'function'
+    const handler = isLegacy ? arg1 : arg2
+    const eventName = isLegacy ? undefined : arg1
     function realHandler(event: MessageEvent<Message>) {
       // 限制消息来源 @see https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage#The_dispatched_event
       const origin = event.origin
@@ -34,36 +76,54 @@ function createMessageHelper(
       const {from, id: incomingId, payload} = event.data || {}
       const idIsValidated = !shouldValidateId || id === incomingId
       if (originIsValidated && from === LIB_ID && idIsValidated && payload) {
-        const {messageName, data} = payload
-        if (messageName) {
-          handler(messageName, data, event.source)
+        const {name, data} = payload
+        if (!name) {
+          return
+        }
+        if (isLegacy) {
+          handler(name, data as any, event.source)
+        } else if (eventName === name) {
+          handler(data as any, event.source)
         }
       }
     }
 
     window.addEventListener('message', realHandler)
-
-    return {
-      unsubscribe: () => window.removeEventListener('message', realHandler),
+    const disposer = {
+      unsubscribe: () => {
+        window.removeEventListener('message', realHandler)
+        disposers = disposers.filter((x) => x !== disposer)
+      },
     }
+    disposers.push(disposer)
+    return disposer
   }
 
-  function dispatchMessage(
-    targetWindow: Window,
-    messageName: Message['payload']['messageName'],
-    data: Message['payload']['data']
-  ) {
-    if (targetWindow && targetWindow.postMessage) {
-      targetWindow.postMessage(
-        {from: LIB_ID, id, payload: {messageName, data}},
-        targetOrigin || '*'
-      )
-    }
+  /**
+   * Dispose all registered event listeners.
+   */
+  const dispose = () => {
+    disposers.forEach((x) => x.unsubscribe())
+  }
+
+  /**
+   * Dispatch action to player
+   */
+  const dispatchMessage = <T extends keyof ActionParamsMap>(
+    target: Window,
+    name: T,
+    ...data: Parameters<ActionParamsMap[T]>
+  ) => {
+    target?.postMessage?.(
+      {from: LIB_ID, id, payload: {name, data}},
+      targetOrigin || '*'
+    )
   }
 
   return {
     subscribeMessage,
     dispatchMessage,
+    dispose,
   }
 }
 
diff --git a/packages/griffith-message/src/index.ts b/packages/griffith-message/src/index.ts
index 08bd9712..cd601fa0 100644
--- a/packages/griffith-message/src/index.ts
+++ b/packages/griffith-message/src/index.ts
@@ -1,4 +1,4 @@
-import * as EVENTS from './constants/events'
-import * as ACTIONS from './constants/actions'
-import createMessageHelper from './createMessageHelper'
-export {EVENTS, ACTIONS, createMessageHelper}
+export * from './constants/events'
+export * from './constants/actions'
+
+export {default as createMessageHelper} from './createMessageHelper'
diff --git a/packages/griffith/src/components/Player.tsx b/packages/griffith/src/components/Player.tsx
index 9bb12522..ecf6b998 100644
--- a/packages/griffith/src/components/Player.tsx
+++ b/packages/griffith/src/components/Player.tsx
@@ -77,7 +77,9 @@ type InnerPlayerProps = ProviderOnlyProps & {
 type OuterPlayerProps = {
   id: string
   sources: PlaySourceMap
-  dispatchRef?: React.MutableRefObject<MessageContextValue['dispatchAction']>
+  dispatchRef?: React.MutableRefObject<
+    MessageContextValue['dispatchAction'] | void
+  >
   initialObjectFit?: ObjectFit
   defaultQuality?: RealQuality
   playbackRates?: PlaybackRate[]
@@ -88,7 +90,8 @@ type OuterPlayerProps = {
 }
 
 // export 给外部用的
-export type PlayerProps = InnerPlayerProps & OuterPlayerProps
+export type PlayerProps = Omit<InnerPlayerProps, keyof ProviderOnlyProps> &
+  OuterPlayerProps
 
 type State = any
 
@@ -156,17 +159,16 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
     }
 
     this.actionSubscriptions_ = [
-      this.props.subscribeAction(ACTIONS.PLAYER.PLAY, this.handlePlay),
+      this.props.subscribeAction(ACTIONS.PLAYER.PLAY, () => this.handlePlay()),
       this.props.subscribeAction(ACTIONS.PLAYER.PAUSE, this.handlePauseAction),
-      this.props.subscribeAction(
-        ACTIONS.PLAYER.TIME_UPDATE,
-        ({currentTime}: any) => this.handleSeek(currentTime)
+      this.props.subscribeAction(ACTIONS.PLAYER.TIME_UPDATE, ({currentTime}) =>
+        this.handleSeek(currentTime)
       ),
       this.props.subscribeAction(
         ACTIONS.PLAYER.SHOW_CONTROLLER,
         this.handleShowController
       ),
-      this.props.subscribeAction(ACTIONS.PLAYER.SET_VOLUME, ({volume}: any) =>
+      this.props.subscribeAction(ACTIONS.PLAYER.SET_VOLUME, ({volume}) =>
         this.handleVideoVolumeChange(volume)
       ),
     ]
@@ -352,7 +354,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
     storage.set('@griffith/history-volume', volume)
   }
 
-  handleSeek = (currentTime: any) => {
+  handleSeek = (currentTime: number) => {
     const {
       isPlaybackStarted,
       isNeverPlayed,
diff --git a/packages/griffith/src/components/Video.tsx b/packages/griffith/src/components/Video.tsx
index 8eefa70c..7d09794a 100644
--- a/packages/griffith/src/components/Video.tsx
+++ b/packages/griffith/src/components/Video.tsx
@@ -214,7 +214,7 @@ class Video extends Component<VideoProps> {
     this.safeExecute(() => this.root!.pause())
   }
 
-  seek(currentTime: any) {
+  seek(currentTime: number) {
     if (!Number.isFinite(currentTime)) return
 
     if (!this.isMetadataLoaded) {
diff --git a/packages/griffith/src/contexts/MessageContext.tsx b/packages/griffith/src/contexts/MessageContext.tsx
index 639d9a4f..3c4a7426 100644
--- a/packages/griffith/src/contexts/MessageContext.tsx
+++ b/packages/griffith/src/contexts/MessageContext.tsx
@@ -1,6 +1,11 @@
 import React from 'react'
 import EventEmitter from 'eventemitter3'
-import {EVENTS, createMessageHelper} from 'griffith-message'
+import {
+  EVENTS,
+  ACTIONS,
+  ActionParamsMap,
+  createMessageHelper,
+} from 'griffith-message'
 
 const EVENT_TYPE = 'event'
 const ACTION_TYPE = 'action'
@@ -11,15 +16,21 @@ interface Subscription {
 
 export interface MessageContextValue {
   subscribeEvent: (
-    eventName: string,
+    eventName: EVENTS,
     eventHandler: (data: any) => void
   ) => Subscription
-  dispatchAction: (actionName: string, data?: any) => void
+  dispatchAction: <T extends keyof ActionParamsMap>(
+    actionName: T,
+    ...data: Parameters<ActionParamsMap[T]>
+  ) => void
 }
 
 export interface InternalContextValue {
-  emitEvent(eventName: string, data?: any): void
-  subscribeAction(eventName: any, listener: (data: any) => void): Subscription
+  emitEvent(eventName: EVENTS, data?: any): void
+  subscribeAction<T extends keyof ActionParamsMap>(
+    actionName: T,
+    listener: ActionParamsMap[T]
+  ): Subscription
 }
 
 /**
@@ -44,7 +55,7 @@ type MessageProviderProps = {
   enableCrossWindow?: boolean
   onEvent?: (name: string, data?: any) => any
   dispatchRef?: React.MutableRefObject<
-    MessageContextValue['dispatchAction'] | null
+    MessageContextValue['dispatchAction'] | void
   >
 }
 
@@ -79,7 +90,9 @@ export class MessageProvider extends React.PureComponent<MessageProviderProps> {
   componentDidMount() {
     if (this.props.enableCrossWindow) {
       this.crossWindowMessageSubscription =
-        this.crossWindowMessager.subscribeMessage(this.dispatchAction)
+        this.crossWindowMessager.subscribeMessage((name, data) => {
+          this.dispatchAction(name as unknown as ACTIONS, data)
+        })
     }
   }
 
@@ -89,15 +102,19 @@ export class MessageProvider extends React.PureComponent<MessageProviderProps> {
     }
   }
 
-  emitEvent = (eventName: any, data?: any) => {
+  emitEvent = (eventName: EVENTS, data?: any) => {
     this.emitter.emit(eventName, {__type__: EVENT_TYPE, data})
     this.props.onEvent?.(eventName, data)
     if (this.props.enableCrossWindow) {
-      this.crossWindowMessager.dispatchMessage(window.parent, eventName, data)
+      this.crossWindowMessager.dispatchMessage(
+        window.parent,
+        eventName as unknown as ACTIONS,
+        data
+      )
     }
   }
 
-  subscribeEvent = (eventName: any, listener: AnyFunction) => {
+  subscribeEvent = (eventName: EVENTS, listener: AnyFunction) => {
     const realListener = ({__type__, data}: any = {}) => {
       if (__type__ === EVENT_TYPE) {
         listener(data)
@@ -110,20 +127,20 @@ export class MessageProvider extends React.PureComponent<MessageProviderProps> {
     }
   }
 
-  dispatchAction = (actionName: string, data?: any) => {
+  dispatchAction = (actionName: ACTIONS, data?: any) => {
     this.emitter.emit(actionName, {__type__: ACTION_TYPE, data})
   }
 
-  subscribeAction = (eventName: any, listener: AnyFunction) => {
+  subscribeAction = (actionName: ACTIONS, listener: AnyFunction) => {
     const realListener = ({__type__, data}: any) => {
       if (__type__ === ACTION_TYPE) {
         listener(data)
       }
     }
-    this.emitter.on(eventName, realListener)
+    this.emitter.on(actionName, realListener)
 
     return {
-      unsubscribe: () => this.emitter.off(eventName, realListener),
+      unsubscribe: () => this.emitter.off(actionName, realListener),
     }
   }
 
diff --git a/packages/griffith/src/index.ts b/packages/griffith/src/index.ts
index 1e102776..f5d0571c 100644
--- a/packages/griffith/src/index.ts
+++ b/packages/griffith/src/index.ts
@@ -5,3 +5,4 @@ export {default as VideoSourceContext} from './contexts/VideoSourceContext'
 export {default as Controller} from './components/Controller'
 export {default as Layer} from './components/Layer'
 export {EVENTS, ACTIONS} from 'griffith-message'
+export * from './types'