[Extension API] Register custom bottom panel tabs (#1296)

* Bottom panel API

* Update README

README.md

@@ -195,6 +195,29 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 ### Developer APIs
 
+<details>
+  <summary>v1.3.22: Register bottom panel tabs</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension',
+  bottomPanelTabs: [
+    {
+      id: 'TestTab',
+      title: 'Test Tab',
+      type: 'custom',
+      render: (el) => {
+        el.innerHTML = '<div>Custom tab</div>'
+      }
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/2114f8b8-2f55-414b-b027-78e61c870b64)
+
+</details>
+
 <details>
   <summary>v1.3.22: New settings API</summary>
 

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.

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
   }
 })

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