檢查器
這篇文章將闡述檢查器擴充的基本概念。
你可以針對特定格式的檔案,開發專屬於該格式的額外檢查器工具,當使用者選擇該檔案時,就可以在右側檢查器直接使用該擴充。例如:可以針對 JPG/Raw 檔案開發 EXIF 屬性的檢查器擴充,每當使用者選擇該檔案時,就可以輕鬆在右側查看到「拍攝時間、焦距、光圈、經緯度」等額外資料。
檢查器擴充其實是格式擴充擴充的變體,其定義方式非常類似,檢查器擴充在 manifest.json 中不需要定義 main 屬性,而是需要設定 preview 屬性。以下是一個範例程式碼:
{
"preview": {}
}在 preview 中可以定義要擴充的檔案副檔名。例如,如果想開發一個針對 jpg, png 格式的額外擴充,可以輸入 "jpg,png": {}:
{
"preview": {
"jpg,png": {}
}
}接著設定以下屬性:
path: 該擴充的 HTML 檔案路徑height: 該擴充的預設高度multiSelect: 多選時是否要顯示(非特殊情況建議設定為false)
{
"preview": {
"jpg,png": {
"inspector": {
"path": "index.html",
"height": 100,
"multiSelect": false
}
}
}
}設定其它 metadata.json 欄位後,最終程式碼如下:
{
"id": "cc41e899-5fc3-445c-a113-2d9573d6edcc",
"version": "1.0.0",
"platform": "all",
"arch": "all",
"name": "Inspector Plugin",
"logo": "/logo.png",
"keywords": [],
"devTools": true,
"preview": {
"jpg,png": {
"inspector": {
"path": "index.html",
"height": 100,
"multiSelect": false
}
}
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Inspector Plugin Example</title>
<style>
html {
font-size: 11px;
font-family: sans-serif;
border-radius: 6px;
overflow: hidden;
}
body {
padding: 0;
margin: 0;
color: transparent;
}
/* colors for different themes */
body[theme="LIGHT"],
body[theme="LIGHTGRAY"] {
color: black;
}
body[theme="GRAY"],
body[theme="BLUE"],
body[theme="PURPLE"],
body[theme="DARK"] {
color: white;
}
</style>
</head>
<body>
Inspector Plugin Example
<script>
// Listen to plugin creation
eagle.onPluginCreate(async (plugin) => {
// Get the current theme
const theme = await eagle.app.theme;
document.body.setAttribute('theme', theme);
// Get the selected item
const item = await eagle.item.getSelected();
console.log(item);
console.log(theme);
});
// Listen to theme changes
eagle.onThemeChanged((theme) => {
document.body.setAttribute('theme', theme);
});
</script>
</body>
</html>如何除錯檢擴充
除錯檢查器擴充的方式很簡單,你可以點擊畫面中的檢查器擴充右鍵,接著選擇「開發者工具」,就可以進行除錯了。
Last updated