[Extension API] Register about panel badge (#1436)

* Custom about panel badge

* Add playwright test

* Update README

* nit

* nit

* nit

* nit

README.md

@@ -215,6 +215,26 @@ https://github.com/user-attachments/assets/c142c43f-2fe9-4030-8196-b3bfd4c6977d
 
 ### Developer APIs
 
+<details>
+  <summary>v1.3.34: Register about panel badges</summary>
+
+```js
+app.registerExtension({
+  name: 'TestExtension1',
+  aboutPageBadges: [
+    {
+      label: 'Test Badge',
+      url: 'https://example.com',
+      icon: 'pi pi-box'
+    }
+  ]
+})
+```
+
+![image](https://github.com/user-attachments/assets/099e77ee-16ad-4141-b2fc-5e9d5075188b)
+
+</details>
+
 <details>
   <summary>v1.3.22: Register bottom panel tabs</summary>
 

browser_tests/extensionAPI.spec.ts

@@ -134,4 +134,27 @@ test.describe('Topbar commands', () => {
       expect(await comfyPage.page.evaluate(() => window['changeCount'])).toBe(2)
     })
   })
+
+  test.describe('About panel', () => {
+    test('Should allow adding badges', async ({ comfyPage }) => {
+      await comfyPage.page.evaluate(() => {
+        window['app'].registerExtension({
+          name: 'TestExtension1',
+          aboutPageBadges: [
+            {
+              label: 'Test Badge',
+              url: 'https://example.com',
+              icon: 'pi pi-box'
+            }
+          ]
+        })
+      })
+
+      await comfyPage.settingDialog.open()
+      await comfyPage.settingDialog.goToAboutPanel()
+      const badge = comfyPage.page.locator('.about-badge').last()
+      expect(badge).toBeDefined()
+      expect(await badge.textContent()).toContain('Test Badge')
+    })
+  })
 })

browser_tests/fixtures/components/SettingDialog.ts

@@ -31,4 +31,10 @@ export class SettingDialog {
     )
     await settingInputDiv.locator('input').click()
   }
+
+  async goToAboutPanel() {
+    const aboutButton = this.page.locator('li[aria-label="About"]')
+    await aboutButton.click()
+    await this.page.waitForSelector('div.about-container')
+  }
 }

src/components/dialog/content/setting/AboutPanel.vue

@@ -1,20 +1,21 @@
 <template>
-  <div>
+  <div class="about-container">
     <h2 class="text-2xl font-bold mb-2">{{ $t('about') }}</h2>
     <div class="space-y-2">
       <a
-        v-for="link in links"
-        :key="link.url"
-        :href="link.url"
+        v-for="badge in aboutPanelStore.badges"
+        :key="badge.url"
+        :href="badge.url"
         target="_blank"
         rel="noopener noreferrer"
-        class="inline-flex items-center no-underline"
+        class="about-badge inline-flex items-center no-underline"
+        :title="badge.url"
       >
         <Tag class="mr-2">
           <template #icon>
-            <i :class="[link.icon, 'mr-2 text-xl']"></i>
+            <i :class="[badge.icon, 'mr-2 text-xl']"></i>
           </template>
-          {{ link.label }}
+          {{ badge.label }}
         </Tag>
       </a>
     </div>
@@ -30,35 +31,14 @@
 
 <script setup lang="ts">
 import { useSystemStatsStore } from '@/stores/systemStatsStore'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
 import Tag from 'primevue/tag'
 import Divider from 'primevue/divider'
-import { computed, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
 
 const systemStatsStore = useSystemStatsStore()
-const frontendVersion = window['__COMFYUI_FRONTEND_VERSION__']
-const coreVersion = computed(
-  () => systemStatsStore.systemStats?.system?.comfyui_version ?? ''
-)
-
-const links = computed(() => [
-  {
-    label: `ComfyUI ${coreVersion.value}`,
-    url: 'https://github.com/comfyanonymous/ComfyUI',
-    icon: 'pi pi-github'
-  },
-  {
-    label: `ComfyUI_frontend v${frontendVersion}`,
-    url: 'https://github.com/Comfy-Org/ComfyUI_frontend',
-    icon: 'pi pi-github'
-  },
-  {
-    label: 'Discord',
-    url: 'https://www.comfy.org/discord',
-    icon: 'pi pi-discord'
-  },
-  { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
-])
+const aboutPanelStore = useAboutPanelStore()
 
 onMounted(async () => {
   if (!systemStatsStore.systemStats) {

src/stores/aboutPanelStore.ts

@@ -0,0 +1,42 @@
+import { AboutPageBadge } from '@/types/comfy'
+import { defineStore } from 'pinia'
+import { computed } from 'vue'
+import { useSystemStatsStore } from './systemStatsStore'
+import { useExtensionStore } from './extensionStore'
+
+export const useAboutPanelStore = defineStore('aboutPanel', () => {
+  const frontendVersion = __COMFYUI_FRONTEND_VERSION__
+  const extensionStore = useExtensionStore()
+  const systemStatsStore = useSystemStatsStore()
+  const coreVersion = computed(
+    () => systemStatsStore?.systemStats?.system?.comfyui_version ?? ''
+  )
+
+  const coreBadges = computed<AboutPageBadge[]>(() => [
+    {
+      label: `ComfyUI ${coreVersion.value}`,
+      url: 'https://github.com/comfyanonymous/ComfyUI',
+      icon: 'pi pi-github'
+    },
+    {
+      label: `ComfyUI_frontend v${frontendVersion}`,
+      url: 'https://github.com/Comfy-Org/ComfyUI_frontend',
+      icon: 'pi pi-github'
+    },
+    {
+      label: 'Discord',
+      url: 'https://www.comfy.org/discord',
+      icon: 'pi pi-discord'
+    },
+    { label: 'ComfyOrg', url: 'https://www.comfy.org/', icon: 'pi pi-globe' }
+  ])
+
+  const allBadges = computed<AboutPageBadge[]>(() => [
+    ...coreBadges.value,
+    ...extensionStore.extensions.flatMap((e) => e.aboutPageBadges ?? [])
+  ])
+
+  return {
+    badges: allBadges
+  }
+})

src/types/comfy.d.ts

@@ -16,6 +16,12 @@ export type Widgets = Record<
   ) => { widget?: IWidget; minWidth?: number; minHeight?: number }
 >
 
+export interface AboutPageBadge {
+  label: string
+  url: string
+  icon: string
+}
+
 export type MenuCommandGroup = {
   /**
    * The path to the menu group.
@@ -65,6 +71,10 @@ export interface ComfyExtension {
    * Bottom panel tabs to add to the bottom panel
    */
   bottomPanelTabs?: BottomPanelExtension[]
+  /**
+   * Badges to add to the about page
+   */
+  aboutPageBadges?: AboutPageBadge[]
   /**
    * Allows any initialisation, e.g. loading resources. Called after the canvas is created but before nodes are added
    * @param app The ComfyUI app instance