# 格式扩展
格式扩展插件的主要目的是使 Eagle 能够预览尚未支持的文件格式。与其他类型插件不同，格式扩展插件在 `manifest.json` 中不需要定义 `main` 属性，而是需要设置 `preview` 属性。以下是一个范例代码：
```json
"preview": {}
```
在 `preview` 中可以定义要扩展的文件扩展名。例如，如果想要让 Eagle 支持 icns 图标格式，可以输入 `"icns": {}`：
```json
"preview" : {
"icns": {}
}
```
另外，如果你需要同时设定多个扩展名，你可以使用 `,` 将不同扩展名隔开进行定义，比如：
```json
"preview" : {
"icns,ico": {}
}
```
格式扩展插件可以分成两个部分：
1. `"thumbnail.path"`：提供用于解析要扩展的文件格式的缩略图的 `.js` 文件。
2. `"viewer.path"`：提供用于预览要扩展的格式的 `.html` 文件。
```json
"preview": {
"icns": {
"thumbnail": {
"path": "thumbnail/icns.js",
"size": 400,
"allowZoom": false
},
"viewer": {
"path": "viewer/icns.html"
}
}
}
```
设置其它 `metadata.json` 字段后，最终代码如下：
{% tabs %}
{% tab title="manifest.json" %}
```json
{
"id": "LARSKLB8OTOC2",
"version": "1.0.0",
"platform": "all",
"arch": "all",
"name": "Preview Plugin",
"logo": "/logo.png",
"keywords": [
"icns"
],
"devTools": false,
"preview": {
"icns,ico": {
"thumbnail": {
"path": "thumbnail/icns.js",
"size": 400,
"allowZoom": false
},
"viewer": {
"path": "viewer/icns.html"
}
}
}
}
```
{% endtab %}
{% tab title="thumbnail/icns.js" %}
```javascript
const fs = require('fs');
const icns = require('./../js/icns-util.js');
const imageSize = require('./../js/image-size.js');
module.exports = async ({ src, dest, item }) => {
return new Promise(async (resolve, reject) => {
try {
// 1. parsing and generate thumbnail file to dest
await icns.icns2png(src, dest);
let size = await imageSize(dest);
// 2. Check if the result is correct
if (!fs.existsSync(dest) || size.width === 0) {
return reject(new Error(`icns file thumbnail generate fail.`));
}
// 3. update the item dimensions
item.height = size?.height || item.height;
item.width = size?.width || item.width;
// 4. return the result
return resolve(item);
}
catch (err) {
return reject(err);
}
});
}
```
{% endtab %}
{% tab title="viewer/icns.html" %}
```html
ICNS Viewer
![]()
```
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
请注意，目前格式扩展插件不支持 Eagle Plugin API 和 DevTools 调试功能。
{% endhint %}
{% hint style="info" %}
**完整示例代码：**\
{% endhint %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://developer.eagle.cool/plugin-api/zh-cn/get-started/plugin-types/preview.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.