# @chamaileon-sdk/plugin-interface 中文文档

规范地址：https://npmcn.com/package/%40chamaileon-sdk/plugin-interface/

版本：1\.1\.5
npm 元数据更新时间：2026-03-18T13:29:57.995Z
中文译文更新时间：2026-11-09T18:42:42.139Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40chamaileon-sdk/plugin-interface
原文对照：https://npmcn.com/package/%40chamaileon-sdk/plugin-interface/?lang=original
项目主页：https://github.com/EDMdesigner/plugin-interface#readme
源码仓库：https://github.com/EDMdesigner/plugin-interface

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：89.8 kB，7 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2022-02-15T10:21:37.648Z
- 最新版本发布：2026-03-18T13:29:57.660Z
- 近 30 天下载量：1882（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：26（近 12 个月 1 个）

## 中文简介

**此工程是创建和维护窗口对象之间通信的后Message接口**就像网页和里面的iframe.

## 安装

```sh
npm install @chamaileon-sdk/plugin-interface
```

也可以使用：`pnpm add @chamaileon-sdk/plugin-interface`、`yarn add @chamaileon-sdk/plugin-interface`、`bun add @chamaileon-sdk/plugin-interface`

## README

# Chamaileon 插件接口

**此工程是创建和维护窗口对象之间通信的后Message接口**就像网页和里面的iframe.

**Chamaileon.io 建造和维护了这个开源项目,以提供使用其插件的安全而标准化的方法**。我们在插件中使用它:电子邮件编辑器、预览、画廊等。 您可以访问我们的网站了解更多信息: [(原始内容存档于2018-09-21). chamaileon.io](https://chamaileon.io/)。 。 。 .

## 安装和初始化

```bash
npm i @chamaileon-sdk/plugin-interface
```

该软件包提供三种功能, `initFullscreenPlugin`, (中文(简体) ), `initInlinePlugin` 财务报告和审定财务报表 `providePlugin`。 。 。 .

插件自发化由两个部分组成:

-   在父母一方,你必须运行 `initFullscreenPlugin` 或者说 `initInlinePlugin`,基于用法。 此函数创建了 iframe, 并开始根据给它的 src 加载插件 .
    
-   在插件内,您必须调用 `providePlugin` 函数。 此函数响应父侧输入机制, 并返回接口 .
    

## 全屏插件

### 初始化

要初始化全屏插件, 您必须调用 `initFullscreenPlugin` 函数,参数如下:

```js
initFullscreenPlugin(
    {
        data: Object,
        settings: Object,
        hooks: Object,
    },
    {
        id: String,
        src: String,
        parentElem: String | HTMLElement,
        beforeInit: Function,
        timeout: Number,
    }
);
```

**第一个对象中的参数**

第一个对象中的参数将直接发送到插件.

-   **数据 :** 您可以将静态数据传递到您的插件.
-   **设置 :** 您可以通过修改插件外观和操作的自定义设置.
-   **钩子 :** 您可以通过插件在特定动作或事件时调用的函数.

**第二个对象中的参数**

这个 `initFullscreenPlugin` 基于 `src` 提供,并附在 `parentElem`。第二个参数对象包含信息,供库创建iframe并附加到您的应用程序 DOM 中.

-   **编号 :** 是代表 iframe 的 id .
    
-   **弧 :** 这是 iframe 源作为字符串 .
    
-   **父文件夹 :** 这是一个查询选择器或 HTML 元素, 您想要插入插件 iframe 。 默认是 `document.body`
    
-   **输入前 :** 此函数将在iframe创建后运行,并且可以在此内部到达容器和iframe.
    
    ```js
    beforeInit({ container, iframe }) {
        // your code here
    }
    ```
    
-   **超时 :** 这是以毫秒计的数字。 这定义了 init 函数等待 production 的回答后, 才能丢出错误 .
    

### 接口

在返回的对象中,您将获得以下属性:

```js
{
    _container: HTMLElement,
    _src: String,
    methods: Object,
    showSplashScreen: Function,
    hideSplashScreen: Function,
    show: Function,
    hide: Function,
    destroy: Function,
}
```

-   **容器( c):** 和包含插件 iframe 的 HTML 元素
-   **弧:** 是插件 iframe 的来源
-   **方法:** 通过方法对象可以到达插件声明的方法
-   **销毁 :** 3⁄4 ̄ ̧漯b

#### 喷出屏幕

如果 `settings` 初始化对象中提供的参数包含 a `splashScreenUrl`,插件将有一个单独的iframe 附加在容器上,您可以显示并隐藏所提供的 `showSplashScreen` 财务报告和审定财务报表 `hideSplashScreen` 函数.

#### 显示 / 隐藏

您可以使用提供的插件显示并隐藏您创建的插件 `show` 财务报告和审定财务报表 `hide`。在使用这些功能时,插件将不会被销毁,而是会隐藏状态.

**动画**

这个 `show` 可使用下列参数调用:

```js
show({ x = "-100vw", y = "0px", opacity = 0.5, scale = 1, time = 500 })
```

这个 `show` 函数提供了自定义显示动画的简单方法。 通过提供的参数,您可以设定默认的隐藏状态,通过插件的坐标,不透明,和比例,以及动画的时间来描述. 当函数被调用时,插件会从该隐藏位置移动到全屏视图. 动画使用 `translate3d` cs函数. 同样 `hide` 函数将插件移回其设置的隐藏状态.

默认隐藏状态被移到左边,所以 `show` 函数将移动插件以查看左侧。 见 [内容编辑器示例](https://npmcn.com/package/%40chamaileon-sdk/plugin-interface/examples/content-editor-example.html) 用于更多的配置.

## 内置插件

要初始化内置插件, 您必须调用 `initInlinePlugin` 函数,参数如下:

```js
initInlinePlugin(
    {
        data: Object,
        settings: Object,
        hooks: Object,
    },
    {
        src: String,
        container: String | HTMLElement,
        beforeInit: Function,
        timeout: Number,
    }
)
```

**第一个对象中的参数**

第一个对象中的参数将直接发送到插件.

-   **数据 :** 您可以将静态数据传递到您的插件.
-   **设置 :** 您可以通过修改插件外观和操作的自定义设置.
-   **钩子 :** 您可以通过插件在特定动作或事件时调用的函数.

**第二个对象中的参数**

第二个对象包含用于库创建iframe的信息并附加到您的应用程序 DOM 中.

-   **弧 :** 这是 iframe 源作为字符串 .
    
-   **容器 :** 您想要插件附加的元素.
    
-   **输入前 :** 此函数将在iframe创建后运行,并且可以在此内部到达容器和iframe.
    
    ```js
    beforeInit({ container, iframe }) {
        // your code here
    }
    ```
    
-   **超时 :** 这是以毫秒计的数字。 这定义了 init 函数等待 production 的回答后, 才能丢出错误 .
    

### 接口

在返回的对象中,您将获得以下属性:

```js
{
    _container: HTMLElement,
    methods: Object,
    destroy: Function,
}
```

-   **容器( c):** 和包含插件 iframe 的 HTML 元素
-   **方法:** 通过方法对象可以到达插件声明的方法
-   **销毁 :** 3⁄4 ̄ ̧漯b

## 提供管道

当您的插件从提供的 src 装入时, 您在 iframe 中的脚本必须调用 `providePlugin` 函数,以响应插件界面初始化

```js
providePlugin({
    hooks: Array,
    methods: Object,
    validator: Function,
});
```

-   **钩子 :** 这是插件接受和使用的一系列钩子名称
-   **方法:** 这些功能可以从外部调用, 并用来直接从外部调用插件
-   **验证符 :** 是在提供 `data`, (中文(简体) ), `settings` 财务报告和审定财务报表 `hooks` 从母方到达

### 接口

提供Plugin函数应解决包含这些字段的对象:

```js
{
    data: Object,
    settings: Object,
    hooks: Object,
    terminate: Function,
}
```

-   **数据 :** 输入阶段发送的数据
-   **设置 :** Init 阶段发送的设置
-   **钩子 :** 在init阶段发送并被过滤的钩子列表被插件接受
-   **终止 :** 用于终止窗口对象之间通信的函数.

## 更新钩子

更新Hooks的方法可以在插件侧被定义. 它可用于更新初始化时定义的钩子. 我们提供了以下两个选项.

### 开始上下文

```js
const onSave = () => {};
const onDelete = () => {};
const onFail = () => {};

const activeHooks = [];

const pluginInterface = await initFullscreenPlugin(...);
// For this example let's say that we sent
// the "onFail" hook with the init function

const pluginInstance = await providePlugin({
    hooks: ["onSave", "onDelete", "onFail" ],
    methods: {
        updateHooks(hooks) {
            activeHooks = hooks;
        },
    },
    validator: () => {},
})

pluginInstanceMethods.updateHooks = (hooks) => {
    activeHooks = hooks;
}
```

### 保存已定义的钩子的同时更新钩子

```js
await pluginInterface.methods.updateHooks({ hooks: { onSave } });
// after the method call the activeHooks should be equal with ["onSave", "onFail", "error"];
```

### 更新钩子,只保留新钩子

```js
await pluginInterface.methods.updateHooks({ hooks: { onDelete }, resetHooks: true });
// after the method call the activeHooks should be equal with ["onDelete", "error"];
```

## 示例

你可以运行 [实例](https://npmcn.com/package/%40chamaileon-sdk/plugin-interface/examples),带有静态服务器

```js
$ npm -g install static-server
$ static-server -c "*" -zp 8080
```

## 常见问题

### @chamaileon-sdk/plugin-interface 是什么？

此工程是创建和维护窗口对象之间通信的后Message接口就像网页和里面的iframe\.

### 如何安装 @chamaileon-sdk/plugin-interface？

在项目目录运行 npm install @chamaileon-sdk/plugin-interface，或使用 pnpm add / yarn add / bun add。

### @chamaileon-sdk/plugin-interface 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/chamaileon-sdk\_\_plugin-interface 是否存在。

### @chamaileon-sdk/plugin-interface 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @chamaileon-sdk/plugin-interface 可以商用吗？

@chamaileon-sdk/plugin-interface 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @chamaileon-sdk/plugin-interface 的下载量有多少？

根据 npm 官方下载统计，@chamaileon-sdk/plugin-interface 在 2026/10/10 – 2026/11/08 这 30 天内被下载 1,882 次，日均约 63 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @chamaileon-sdk/plugin-interface 还在维护吗？

最新版本 1\.1\.5 发布于 2026/03/18（7 个月前）；至今共发布 26 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/02/15。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。