diff --git a/README.md b/README.md
index e6d1ad4cc..0416355f0 100644
--- a/README.md
+++ b/README.md
@@ -195,6 +195,29 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
### Developer APIs
+
+ v1.3.22: Register bottom panel tabs
+
+```js
+app.registerExtension({
+ name: 'TestExtension',
+ bottomPanelTabs: [
+ {
+ id: 'TestTab',
+ title: 'Test Tab',
+ type: 'custom',
+ render: (el) => {
+ el.innerHTML = 'Custom tab
'
+ }
+ }
+ ]
+})
+```
+
+
+
+
+
v1.3.22: New settings API
diff --git a/src/stores/extensionStore.ts b/src/stores/extensionStore.ts
index dc02284f4..c7760ce0e 100644
--- a/src/stores/extensionStore.ts
+++ b/src/stores/extensionStore.ts
@@ -6,6 +6,7 @@ import { useCommandStore } from './commandStore'
import { useSettingStore } from './settingStore'
import { app } from '@/scripts/app'
import { useMenuItemStore } from './menuItemStore'
+import { useBottomPanelStore } from './workspace/bottomPanelStore'
export const useExtensionStore = defineStore('extension', () => {
// For legacy reasons, the name uniquely identifies an extension
@@ -48,7 +49,7 @@ export const useExtensionStore = defineStore('extension', () => {
useCommandStore().loadExtensionCommands(extension)
useMenuItemStore().loadExtensionMenuCommands(extension)
useSettingStore().loadExtensionSettings(extension)
-
+ useBottomPanelStore().registerExtensionBottomPanelTabs(extension)
/*
* Extensions are currently stored in both extensionStore and app.extensions.
* Legacy jest tests still depend on app.extensions being populated.
diff --git a/src/stores/workspace/bottomPanelStore.ts b/src/stores/workspace/bottomPanelStore.ts
index 08acaa2ca..62a3c8575 100644
--- a/src/stores/workspace/bottomPanelStore.ts
+++ b/src/stores/workspace/bottomPanelStore.ts
@@ -3,6 +3,7 @@ import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { useCommandStore } from '@/stores/commandStore'
import { useIntegratedTerminalTab } from '@/hooks/bottomPanelTabs/integratedTerminalTab'
+import { ComfyExtension } from '@/types/comfy'
export const useBottomPanelStore = defineStore('bottomPanel', () => {
const bottomPanelVisible = ref(false)
@@ -51,6 +52,12 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
registerBottomPanelTab(useIntegratedTerminalTab())
}
+ const registerExtensionBottomPanelTabs = (extension: ComfyExtension) => {
+ if (extension.bottomPanelTabs) {
+ extension.bottomPanelTabs.forEach(registerBottomPanelTab)
+ }
+ }
+
return {
bottomPanelVisible,
toggleBottomPanel,
@@ -60,6 +67,7 @@ export const useBottomPanelStore = defineStore('bottomPanel', () => {
setActiveTab,
toggleBottomPanelTab,
registerBottomPanelTab,
- registerCoreBottomPanelTabs
+ registerCoreBottomPanelTabs,
+ registerExtensionBottomPanelTabs
}
})
diff --git a/src/types/comfy.d.ts b/src/types/comfy.d.ts
index 2e3b9c46b..6f44b5f45 100644
--- a/src/types/comfy.d.ts
+++ b/src/types/comfy.d.ts
@@ -4,6 +4,7 @@ import type { ComfyNodeDef } from '@/types/apiTypes'
import type { Keybinding } from '@/types/keyBindingTypes'
import type { ComfyCommand } from '@/stores/commandStore'
import { SettingParams } from './settingTypes'
+import type { BottomPanelExtension } from './extensionTypes'
export type Widgets = Record<
string,
@@ -48,6 +49,10 @@ export interface ComfyExtension {
* Settings to add to the settings menu
*/
settings?: SettingParams[]
+ /**
+ * Bottom panel tabs to add to the bottom panel
+ */
+ bottomPanelTabs?: BottomPanelExtension[]
/**
* Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
* @param app The ComfyUI app instance