2025-02-25 10:17:38 +00:00
<!doctype html>
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-tutorial docs-version-current docs-doc-page docs-doc-id-creating-an-extension" data-has-hydrated = "false" >
< head >
< meta charset = "UTF-8" >
< meta name = "generator" content = "Docusaurus v3.7.0" >
< title data-rh = "true" > Creating an extension | Podman Desktop< / title > < meta data-rh = "true" name = "viewport" content = "width=device-width,initial-scale=1" > < meta data-rh = "true" name = "twitter:card" content = "summary_large_image" > < meta data-rh = "true" property = "og:image" content = "https://podman-desktop.io/img/banner_podman-desktop.png" > < meta data-rh = "true" name = "twitter:image" content = "https://podman-desktop.io/img/banner_podman-desktop.png" > < meta data-rh = "true" property = "og:url" content = "https://podman-desktop.io/tutorial/creating-an-extension" > < meta data-rh = "true" property = "og:locale" content = "en" > < meta data-rh = "true" name = "docusaurus_locale" content = "en" > < meta data-rh = "true" name = "docsearch:language" content = "en" > < meta data-rh = "true" name = "docusaurus_version" content = "current" > < meta data-rh = "true" name = "docusaurus_tag" content = "docs-tutorial-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-tutorial-current" > < meta data-rh = "true" property = "og:title" content = "Creating an extension | Podman Desktop" > < meta data-rh = "true" name = "description" content = "Creating a Podman Desktop extension" > < meta data-rh = "true" property = "og:description" content = "Creating a Podman Desktop extension" > < meta data-rh = "true" name = "keywords" content = "podman desktop,podman,extension" > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://podman-desktop.io/tutorial/creating-an-extension" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/tutorial/creating-an-extension" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/tutorial/creating-an-extension" hreflang = "x-default" > < link data-rh = "true" rel = "preconnect" href = "https://MR01ANKQ9S-dsn.algolia.net" crossorigin = "anonymous" > < link rel = "alternate" type = "application/rss+xml" href = "/blog/rss.xml" title = "Podman Desktop RSS Feed" >
< link rel = "alternate" type = "application/atom+xml" href = "/blog/atom.xml" title = "Podman Desktop Atom Feed" >
< link rel = "alternate" type = "application/json" href = "/blog/feed.json" title = "Podman Desktop JSON Feed" >
< link rel = "search" type = "application/opensearchdescription+xml" title = "Podman Desktop" href = "/opensearch.xml" >
< link rel = "preconnect" href = "https://podman-desktop-website.goatcounter.com" >
2025-09-03 21:38:51 +00:00
< script async src = "//gc.zgo.at/count.js" data-goatcounter = "https://podman-desktop-website.goatcounter.com/count" > < / script > < link rel = "stylesheet" href = "/assets/css/styles.3c55626e.css" >
2025-09-04 11:35:44 +00:00
< script src = "/assets/js/runtime~main.0d2da032.js" defer = "defer" > < / script >
< script src = "/assets/js/main.fe298c88.js" defer = "defer" > < / script >
2025-02-25 10:17:38 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2025-08-29 07:31:50 +00:00
< script > ! function ( ) { function t ( t ) { document . documentElement . setAttribute ( "data-theme" , t ) } var e = function ( ) { try { return new URLSearchParams ( window . location . search ) . get ( "docusaurus-theme" ) } catch ( t ) { } } ( ) || function ( ) { try { return window . localStorage . getItem ( "theme" ) } catch ( t ) { } } ( ) ; null !== e ? t ( e ) : window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches ? t ( "dark" ) : window . matchMedia ( "(prefers-color-scheme: light)" ) . matches ? t ( "light" ) : t ( "dark" ) } ( ) , function ( ) { try { const c = new URLSearchParams ( window . location . search ) . entries ( ) ; for ( var [ t , e ] of c ) if ( t . startsWith ( "docusaurus-data-" ) ) { var a = t . replace ( "docusaurus-data-" , "data-" ) ; document . documentElement . setAttribute ( a , e ) } } catch ( t ) { } } ( ) < / script > < div id = "__docusaurus" > < div role = "region" aria-label = "Skip to main content" > < a class = "skipToContent_oPtH" href = "#__docusaurus_skipToContent_fallback" > Skip to main content< / a > < / div > < nav aria-label = "Main" class = "navbar navbar--fixed-top" > < div class = "navbar__inner" > < div class = "navbar__items" > < button aria-label = "Toggle navigation bar" aria-expanded = "false" class = "navbar__toggle clean-btn" type = "button" > < svg width = "30" height = "30" viewBox = "0 0 30 30" aria-hidden = "true" > < path stroke = "currentColor" stroke-linecap = "round" stroke-miterlimit = "10" stroke-width = "2" d = "M4 7h22M4 15h22M4 23h22" > < / path > < / svg > < / button > < a class = "navbar__brand" href = "/" > < div class = "navbar__logo" > < img src = "/img/logo.svg" alt = "Podman Desktop Logo" class = "themedComponent_siVc themedComponent--light_hHel" height = "56" > < img src = "/img/logo.svg" alt = "Podman Desktop Logo" class = "themedComponent_siVc themedComponent--dark_yETr" height = "56" > < / div > < b class = "navbar__title text--truncate" > podman desktop< / b > < / a > < a class = "navbar__item navbar__link" href = "/docs/intro" > Documentation< / a > < a class = "navbar__item navbar__link" href = "/downloads" > Downloads< / a > < a class = "navbar__item navbar__link" href = "/community" > Community< / a > < div class = "navbar__item dropdown dropdown--hoverable" > < a href = "#" aria-haspopup = "true" aria-expanded = "false" role = "button" class = "navbar__link" > Resources< / a > < ul class = "dropdown__menu" > < li > < a class = "dropdown__link" href = "/features" > Features< / a > < / li > < li > < a aria-current = "page" class = "dropdown__link dropdown__link--active" href = "/tutorial" > Tutorials< / a > < / li > < li > < a class = "dropdown__link" href = "/extend" > Extend< / a > < / li > < / ul > < / div > < a class = "navbar__item navbar__link" href = "/blog" > Blog< / a > < / div > < div class = "navbar__items navbar__items--right" > < a href = "https://github.com/podman-desktop/podman-desktop" target = "_blank" id = "github-stars-button" rel = "noopener noreferrer" class = "navbar__item navbar__link hidden xl:flex items-center gap-2 px-4 py-[9px] border border-black dark:border-white rounded-lg font-medium min-w-[9rem] text-base" > < svg data-prefix = "fab" data-icon = "github" class = "svg-inline--fa fa-github" role = "img" viewBox = "0 0 512 512" aria-hidden = "true" > < path fill = "currentColor" d = "M173.9 397 . 4c0 2-2 . 3 3 . 6-5 . 2 3 . 6-3 . 3 . 3-5 . 6-1 . 3-5 . 6-3 . 6 0-2 2 . 3-3 . 6 5 . 2-3 . 6 3- . 3 5 . 6 1 . 3 5 . 6 3 . 6zm-31 . 1-4 . 5c- . 7 2 1 . 3 4 . 3 4 . 3 4 . 9 2 . 6 1 5 . 6 0 6 . 2-2s-1 . 3-4 . 3-4 . 3-5 . 2c-2 . 6- . 7-5 . 5 . 3-6 . 2 2 . 3zm44 . 2-1 . 7c-2 . 9 . 7-4 . 9 2 . 6-4 . 6 4 . 9 . 3 2 2 . 9 3 . 3 5 . 9 2 . 6 2 . 9- . 7 4 . 9-2 . 6 4 . 6-4 . 6- . 3-1 . 9-3-3 . 2-5 . 9-2 . 9zM252 . 8 8c-138 . 7 0-244 . 8 105 . 3-244 . 8 244 0 110 . 9 69 . 8 205 . 8 169 . 5 239 . 2 12 . 8 2 . 3 17 . 3-5 . 6 17 . 3-12 . 1 0-6 . 2- . 3-40 . 4- . 3-61 . 4 0 0-70 15-84 . 7-29 . 8 0 0-11 . 4-29 . 1-27 . 8-36 . 6 0 0-22 . 9-15 . 7 1 . 6-15 . 4 0 0 24 . 9 2 38 . 6 25 . 8 21 . 9 38 . 6 58 . 6 27 . 5 72 . 9 20 . 9 2 . 3-16 8 . 8-27 . 1 16-33 . 7-55 . 9-6 . 2-112 . 3-14 . 3-112 . 3-110 . 5 0-27 . 5 7 . 6-41 . 3 23 . 6-58 . 9-2 . 6-6 . 5-11 . 1-33 . 3 2 . 6-67 . 9 20 . 9-6 . 5 69 27 69 27 20-5 . 6 41 . 5-8 . 5 62 . 8-8 . 5s42 . 8 2 . 9 62 . 8 8 . 5c0 0 48 . 1-33 . 6 69-27 13 . 7 34 . 7 5 . 2 61 . 4 2 . 6 67 . 9 16 17 . 7 25 . 8 31 . 5 25 . 8 58 . 9 0 96 . 5-58 . 9 104 . 2-114 . 8 110 . 5 9 . 2 7 . 9 17 22 . 9 17 46 . 4 0 33 . 7- . 3 75 . 4- . 3 83 . 6 0 6 . 5 4 . 6 14 . 4 17 . 3 12 . 1 100-33 . 2 167 . 8-128 . 1 167 . 8-239 0-138 . 7-112 . 5-244-251 . 2-244zM105 . 2 352 . 9c-1 . 3 1-1 3 . 3 . 7 5 . 2 1 . 6 1 . 6 3 . 9 2 . 3 5 . 2 1 1 . 3-1 1-3 . 3- . 7-5 . 2-1 . 6-1 . 6-3 . 9-2 . 3-5 . 2-1zm-10 . 8-8 . 1c- . 7 1 . 3 . 3 2 . 9 2 . 3 3 . 9 1 . 6 1 3 . 6 . 7 4 . 3- . 7 . 7-1 . 3- . 3-2 . 9-2 . 3-3 . 9-2- . 6-3 . 6- . 3-4 . 3 . 7zm32 . 4 35 . 6c-1 . 6 1 . 3-1 4 . 3 1 . 3 6 . 2 2 . 3 2 . 3 5 . 2 2 . 6 6 . 5 1 1 . 3-1 . 3 . 7-4 . 3-1 . 3-6 . 2-2 . 2-2 . 3-5 . 2-2 . 6-6 . 5-1zm-11 . 4-14 . 7c-1 .
2025-02-25 10:17:38 +00:00
< p > This tutorial covers the following end-to-end tasks required to create and run a Podman Desktop extension:< / p >
< ul >
< li > < a href = "/tutorial/creating-an-extension#initializing-an-extension" > Initializing an extension< / a > < / li >
< li > < a href = "/tutorial/creating-an-extension#writing-the-extension-entry-point" > Writing the extension entry point< / a > < / li >
< li > < a href = "/tutorial/creating-an-extension#build-dependencies" > Build dependencies< / a > < / li >
< li > < a href = "/tutorial/creating-an-extension#running-the-extension" > Running the extension< / a > < / li >
< li > < a href = "/tutorial/creating-an-extension#verifying-the-extensions-features" > Verifying the extension' s features< / a > < / li >
< / ul >
< p > You can write an extension in < code > TypeScript< / code > or < code > JavaScript< / code > . You can simplify extension creation by specifying two entry points: < code > activate()< / code > and < code > deactivate()< / code > from within the extension.< / p >
< p > All Podman Desktop functionalities are communicated entirely through the < a href = "https://podman-desktop.io/api" target = "_blank" rel = "noopener noreferrer" > API< / a > . The extension you create interacts with the Podman Desktop API through the < code > @podman-desktop/api< / code > package. The type definition of the < code > @podman-desktop/api< / code > API is hosted as part of the < a href = "https://www.npmjs.com/package/@podman-desktop/api" target = "_blank" rel = "noopener noreferrer" > < code > npm< / code > package< / a > .< / p >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "before-you-begin" > Before you begin< a href = "#before-you-begin" class = "hash-link" aria-label = "Direct link to Before you begin" title = "Direct link to Before you begin" > < / a > < / h2 >
< p > Make sure you have:< / p >
< ul >
< li > < a href = "/docs/installation" > Installed Podman Desktop< / a > .< / li >
< li > < a href = "/docs/podman/creating-a-podman-machine" > A running Podman machine< / a > .< / li >
< li > A developer role.< / li >
< li > Installed < code > JavaScript< / code > or < code > TypeScript< / code > .< / li >
< li > A clone of the < a href = "https://github.com/podman-desktop/podman-desktop" target = "_blank" rel = "noopener noreferrer" > Podman Desktop< / a > repository on your local machine.< / li >
< / ul >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "initializing-an-extension" > Initializing an extension< a href = "#initializing-an-extension" class = "hash-link" aria-label = "Direct link to Initializing an extension" title = "Direct link to Initializing an extension" > < / a > < / h2 >
< p > Create a < code > package.json< / code > file to initialize your extension.< / p >
< ol >
< li >
< p > Create a subdirectory, such as < code > foobar< / code > in the < code > extensions< / code > directory of the Podman Desktop repository.< / p >
< / li >
< li >
2025-04-03 12:36:31 +00:00
< p > Initialize a < code > package.json< / code > file and add it to the subdirectory.< / p >
2025-02-25 10:17:38 +00:00
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Add < code > TypeScript< / code > and the Podman Desktop API to the development dependencies:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " devDependencies" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " @podman-desktop/api" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " typescript" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " vite" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Add the required metadata:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " name" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " my-extension" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " displayName" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " My Hello World extension" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " description" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " How to write my first extension" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " version" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " 0.0.1" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " icon" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " icon.png" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " publisher" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " benoitf" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Add the Podman Desktop version to run the extension:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " engines" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " podman-desktop" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Add the main entry point:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " main" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " ./dist/extension.js" < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Add a < code > Hello World< / code > command contribution:< / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " contributes" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " commands" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " command" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " my.first.command" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " title" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " My First Extension: Hello World" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Validate the complete < code > package.json< / code > file manually:< / p >
< p > < strong > < em > Example: The complete < code > package.json< / code > file< / em > < / strong > < / p >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " devDependencies" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " @podman-desktop/api" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " typescript" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " vite" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " latest" < / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " name" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " my-extension" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " displayName" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " My Hello World extension" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " description" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " How to write my first extension" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " version" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " 0.0.1" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " icon" < /s
< / li >
< li >
< p > Add an < code > icon.png< / code > file to the subdirectory.< / p >
< / li >
< / ol >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "writing-the-extension-entry-point" > Writing the extension entry point< a href = "#writing-the-extension-entry-point" class = "hash-link" aria-label = "Direct link to Writing the extension entry point" title = "Direct link to Writing the extension entry point" > < / a > < / h2 >
< ol >
< li >
< p > Create a < code > src/extension.ts< / code > file in the subdirectory.< / p >
< / li >
< li >
< p > Import the Podman Desktop API into the file:< / p >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token operator" > *< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > as< / span > < span class = "token plain" > podmanDesktopAPI < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' @podman-desktop/api' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Use one of the following ways to expose the < code > activate< / code > function:< / p >
< ul >
< li >
< p > Synchronous (sequential execution of tasks)< / p >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > activate< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > void< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Asynchronous (parallel execution of tasks)< / p >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > async< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > activate< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:rgb(189, 147, 249)" > Promise< / span > < span class = "token operator" > < < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > void< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< / ul >
< / li >
< li >
< p > Optional: Add an extension context to the < code > activate< / code > function by enabling the extension to register disposable resources:< / p >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > async< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > activate< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > extensionContext< / span > < span class = "token operator" > :< / span > < span class = "token plain" > podmanDesktopAPI< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token plain" > ExtensionContext< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:rgb(189, 147, 249)" > Promise< / span > < span class = "token operator" > < < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > void< / span > < span class = "token operator" > > < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Add the features of the extension to the file. This sample extension:< / p >
< ul >
< li > Registers the command referenced in the < code > package.json< / code > file.< / li >
< li > Displays an option for the user to select values from the dropdown list.< / li >
< li > Displays a pop-up message with the values selected by the user.< / li >
< li > Creates an item in the status bar to run the command.< / li >
< / ul >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token operator" > *< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > as< / span > < span class = "token plain" > podmanDesktopAPI < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > from< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' @podman-desktop/api' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > async< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > activate< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token plain" > extensionContext< / span > < span class = "token operator" > :< / span > < span class = "token plain" > podmanDesktopAPI< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token plain" > ExtensionContext< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:rgb(189, 147, 249)" > Promise< / span > < span class = "token operator" > < < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > void< / span > < span class = "token operator" > > < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token comment" style = "color:rgb(98, 114, 164)" > // register the command referenced in package.json file< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > const< / span > < span class = "token plain" > myFirstCommand < / span > < span class = "token operator" > =< / span > < span class = "token plain" > podmanDesktopAPI< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token plain" > commands< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > .< / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > registerCommand< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > ' my.first.command' < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > async< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token plain" > < / span > < span class = "token operator" > => < / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" sty
< / li >
< li >
< p > Optional: Use one of the following ways to expose the < code > deactivate< / code > function:< / p >
< ul >
< li >
< p > Synchronous< / p >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > deactivate< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > void< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< / li >
< li >
< p > Asynchronous< / p >
< div class = "language-typescript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-typescript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > export< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > async< / span > < span class = "token plain" > < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > function< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > deactivate< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > (< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > )< / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token builtin" style = "color:rgb(189, 147, 249)" > Promise< / span > < span class = "token operator" > < < / span > < span class = "token keyword" style = "color:rgb(189, 147, 249);font-style:italic" > void< / span > < span class = "token operator" > > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ;< / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< div class = "theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary" > < div class = "admonitionHeading_GCBg" > < span class = "admonitionIcon_L39b" > < svg viewBox = "0 0 14 16" > < path fill-rule = "evenodd" d = "M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" > < / path > < / svg > < / span > note< / div > < div class = "admonitionContent_pbrs" > < p > The above example is not a full representation of every functionality an extension can be used for. You can expand the internal Podman Desktop functionalities, such as creating a new provider and adding new commands. See our < a href = "https://podman-desktop.io/api" target = "_blank" rel = "noopener noreferrer" > API documentation< / a > for more information.< / p > < / div > < / div >
< / li >
< / ul >
< / li >
< / ol >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "build-dependencies" > Build dependencies< a href = "#build-dependencies" class = "hash-link" aria-label = "Direct link to Build dependencies" title = "Direct link to Build dependencies" > < / a > < / h2 >
< p > You can build this extension by configuring < code > TypeScript< / code > and < code > Vite< / code > .< / p >
< ol >
< li > Create a file named < code > tsconfig.json< / code > with the following content in the subdirectory:< / li >
< / ol >
< div class = "language-json codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-json codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " compilerOptions" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " module" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " esnext" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " lib" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > [< / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " ES2017" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ]< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " sourceMap" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" > true< / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " rootDir" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " src" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " outDir" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " dist" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " target" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " esnext" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " moduleResolution" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token string" style = "color:rgb(255, 121, 198)" > " Node" < / span > < span class = "token punctuation" style = "color:rgb(248, 248, 242)" > ,< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token property" > " allowSyntheticDefaultImports" < / span > < span class = "token operator" > :< / span > < span class = "token plain" > < / span > < span class = "token boolean" > true< / span > < span class = "token
< ol start = "2" >
< li > Create a file named < code > vite.config.js< / code > with the following content in the subdirectory:< / li >
< / ol >
< div class = "language-javascript codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-javascript codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > /**********************************************************************< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * Copyright (C) 2023 Red Hat, Inc.< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > *< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * Licensed under the Apache License, Version 2.0 (the " License" );< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * you may not use this file except in compliance with the License.< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * You may obtain a copy of the License at< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > *< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * http://www.apache.org/licenses/LICENSE-2.0< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > *< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * Unless required by applicable law or agreed to in writing, software< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * distributed under the License is distributed on an " AS IS" BASIS,< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * See the License for the specific language governing permissions and< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * limitations under the License.< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > *< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > * SPDX-License-Identifier: Apache-2.0< / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token doc-comment comment" style = "color:rgb(98, 114, 164)" > ***********************************************************************/< / span > < span class = "token plain" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" style = "display:inline-block" > < / span > < br > < / span > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token plain" > < / span > < span class = "token keyword module" style = "color:rgb(189, 147, 249);font-style:italic" > import< / span > < span class = "token plain" > < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > {< / span > < span class = "token imports" > join < / span > < span class = "token imports punctuation" style = "color:rgb(248, 248, 242)" > }< / span > < span class = "token plain" > < / span > < span class = "token keyword module" style = "
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "running-the-extension" > Running the extension< a href = "#running-the-extension" class = "hash-link" aria-label = "Direct link to Running the extension" title = "Direct link to Running the extension" > < / a > < / h2 >
< ol >
< li >
< p > Stop the Podman Desktop application if it runs in the background.< / p >
< / li >
< li >
< p > Run the following command from your clone of the Podman Desktop repository:< / p >
< div class = "language-shell codeBlockContainer_mQmQ theme-code-block" style = "--prism-color:#F8F8F2;--prism-background-color:#282A36" > < div class = "codeBlockContent_D5yF" > < pre tabindex = "0" class = "prism-code language-shell codeBlock_RMoD thin-scrollbar" style = "color:#F8F8F2;background-color:#282A36" > < code class = "codeBlockLines_AclH" > < span class = "token-line" style = "color:#F8F8F2" > < span class = "token function" style = "color:rgb(80, 250, 123)" > pnpm< / span > < span class = "token plain" > < / span > < span class = "token function" style = "color:rgb(80, 250, 123)" > watch< / span > < span class = "token plain" > --extension-folder < / span > < span class = "token operator" > < < / span > < span class = "token plain" > path-to-your-extension< / span > < span class = "token operator" > > < / span > < br > < / span > < / code > < / pre > < div class = "buttonGroup_aaMX" > < button type = "button" aria-label = "Copy code to clipboard" title = "Copy" class = "clean-btn" > < span class = "copyButtonIcons_z5j7" aria-hidden = "true" > < svg viewBox = "0 0 24 24" class = "copyButtonIcon_FoOz" > < path fill = "currentColor" d = "M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" > < / path > < / svg > < svg viewBox = "0 0 24 24" class = "copyButtonSuccessIcon_L0B6" > < path fill = "currentColor" d = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" > < / path > < / svg > < / span > < / button > < / div > < / div > < / div >
< p > The extension compiles and generates the output in the < code > dist< / code > folder of the subdirectory.
< img decoding = "async" loading = "lazy" alt = "output in the dist folder" src = "/assets/images/dist-folder-4da5ca7e197631d33d970b42fca540c5.png" width = "167" height = "250" class = "img_SS3x" > < / p >
2025-07-17 11:00:36 +00:00
< div class = "theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary" > < div class = "admonitionHeading_GCBg" > < span class = "admonitionIcon_L39b" > < svg viewBox = "0 0 14 16" > < path fill-rule = "evenodd" d = "M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" > < / path > < / svg > < / span > note< / div > < div class = "admonitionContent_pbrs" > < p > You can also < a href = "/docs/extensions/debugging-an-extension" > run and verify the extension< / a > directly from the Podman Desktop UI.< / p > < / div > < / div >
2025-02-25 10:17:38 +00:00
< / li >
< / ol >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "verifying-the-extensions-features" > Verifying the extension' s features< a href = "#verifying-the-extensions-features" class = "hash-link" aria-label = "Direct link to Verifying the extension's features" title = "Direct link to Verifying the extension's features" > < / a > < / h2 >
< ol >
< li >
< p > Click < strong > Extensions< / strong > in the left navigation pane.< / p >
< / li >
< li >
< p > Search the created < code > My Hello World< / code > extension in the list. The extension is < code > ACTIVE< / code > .
2025-07-17 11:00:36 +00:00
< img decoding = "async" loading = "lazy" alt = "hello world extension in the list" src = "/assets/images/my-hello-world-extension-5d44542abafb01d2f2cd888bc6eb933f.png" width = "1924" height = "636" class = "img_SS3x" > < / p >
2025-02-25 10:17:38 +00:00
< / li >
< li >
< p > Verify the features of the extension:< / p >
< / li >
< li >
< p > Click the < code > My first command< / code > item in the status bar. A dropdown list opens.< / p >
< / li >
< li >
< p > Select a value from the dropdown list.< / p >
< / li >
< li >
< p > Click < strong > OK< / strong > . A pop-up notifying the selected value opens.
< img decoding = "async" loading = "lazy" alt = "dropdown list" src = "/assets/images/selecting-a-value-from-dropdown-963aaed72f2d29adf84df1e17ab8db9c.png" width = "1208" height = "284" class = "img_SS3x" > < / p >
< / li >
< li >
< p > Click < strong > OK< / strong > .
< img decoding = "async" loading = "lazy" alt = "a pop-up message" src = "/assets/images/pop-up-message-6e291058d07dede1d25557dc3aeb6f44.png" width = "1196" height = "406" class = "img_SS3x" > < / p >
< div class = "theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary" > < div class = "admonitionHeading_GCBg" > < span class = "admonitionIcon_L39b" > < svg viewBox = "0 0 14 16" > < path fill-rule = "evenodd" d = "M6.3 5.69a.942.942 0 0 1-.28-.7c0-.28.09-.52.28-.7.19-.18.42-.28.7-.28.28 0 .52.09.7.28.18.19.28.42.28.7 0 .28-.09.52-.28.7a1 1 0 0 1-.7.3c-.28 0-.52-.11-.7-.3zM8 7.99c-.02-.25-.11-.48-.31-.69-.2-.19-.42-.3-.69-.31H6c-.27.02-.48.13-.69.31-.2.2-.3.44-.31.69h1v3c.02.27.11.5.31.69.2.2.42.31.69.31h1c.27 0 .48-.11.69-.31.2-.19.3-.42.31-.69H8V7.98v.01zM7 2.3c-3.14 0-5.7 2.54-5.7 5.68 0 3.14 2.56 5.7 5.7 5.7s5.7-2.55 5.7-5.7c0-3.15-2.56-5.69-5.7-5.69v.01zM7 .98c3.86 0 7 3.14 7 7s-3.14 7-7 7-7-3.12-7-7 3.14-7 7-7z" > < / path > < / svg > < / span > note< / div > < div class = "admonitionContent_pbrs" > < p > If you have created a webview extension, you can access the console of the extension:< / p > < ol >
< li > Right-click the extension icon in the left navigation pane.< / li >
< li > Select < strong > Open Devtools of the webview< / strong > .< / li >
< / ol > < / div > < / div >
< / li >
< / ol >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "additional-resources" > Additional resources< a href = "#additional-resources" class = "hash-link" aria-label = "Direct link to Additional resources" title = "Direct link to Additional resources" > < / a > < / h2 >
< ul >
< li > < a href = "https://github.com/podman-desktop/podman-desktop/blob/main/packages/extension-api/src/extension-api.d.ts" target = "_blank" rel = "noopener noreferrer" > Podman Desktop API code< / a > < / li >
< li > < a href = "https://podman-desktop.io/api" target = "_blank" rel = "noopener noreferrer" > Podman Desktop API documentation< / a > < / li >
< li > < a href = "/docs/extensions/developing#overview-of-creating-a-new-extension" > Overview - Creating an extension< / a > < / li >
< li > < a href = "/docs/extensions/developing#expanding-your-extension" > Expanding your extension< / a > < / li >
< li > < a href = "/docs/extensions/publish" > Publishing a Podman Desktop extension< / a > < / li >
2025-04-17 05:30:52 +00:00
< / ul > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "row margin-top--sm theme-doc-footer-tags-row" > < div class = "col" > < b > Tags:< / b > < ul class = "tags_Ow0B padding--none margin-left--sm" > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/tutorial/tags/podman-desktop" > podman-desktop< / a > < / li > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/tutorial/tags/creating-an-extension" > creating-an-extension< / a > < / li > < / ul > < / div > < / div > < / footer > < / article > < nav class = "pagination-nav docusaurus-mt-lg" aria-label = "Docs pages" > < a class = "pagination-nav__link pagination-nav__link--prev" href = "/tutorial/running-an-ai-application" > < div class = "pagination-nav__sublabel" > Previous< / div > < div class = "pagination-nav__label" > Running an AI application< / div > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/tutorial/getting-started-with-compose" > < div class = "pagination-nav__sublabel" > Next< / div > < div class = "pagination-nav__label" > Getting started with Compose< / div > < / a > < / nav > < / div > < / div > < div class = "col col--3" > < div class = "tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop" > < ul class = "table-of-contents table-of-contents__left-border" > < li > < a href = "#before-you-begin" class = "table-of-contents__link toc-highlight" > Before you begin< / a > < / li > < li > < a href = "#initializing-an-extension" class = "table-of-contents__link toc-highlight" > Initializing an extension< / a > < / li > < li > < a href = "#writing-the-extension-entry-point" class = "table-of-contents__link toc-highlight" > Writing the extension entry point< / a > < / li > < li > < a href = "#build-dependencies" class = "table-of-contents__link toc-highlight" > Build dependencies< / a > < / li > < li > < a href = "#running-the-extension" class = "table-of-contents__link toc-highlight" > Running the extension< / a > < / li > < li > < a href = "#verifying-the-extensions-features" class = "table-of-contents__link toc-highlight" > Verifying the extension' s features< / a > < / li > < li > < a href = "#additional-resources" class = "table-of-contents__link toc-highlight" > Additional resources< / a > < / li > < / ul > < / div > < / div > < / div > < / div > < / main > < / div > < / div > < / div > < footer class = "footer" > < div class = "container container-fluid" > < div class = "row footer__links" > < div class = "col footer__col" > < div class = "footer__title" > Documentation< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/installation" > Installing Podman Desktop< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/migrating-from-docker" > Migrating from Docker< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/kubernetes" > Working with Kubernetes< / a > < / li > < li class = "footer__item" > < a class = "footer__link-item" href = "/docs/troubleshooting" > Troubleshooting< / a > < / li > < / ul > < / div > < div class = "col footer__col" > < div class = "footer__title" > Links< / div > < ul class = "footer__items clean-list" > < li class = "footer__item" > < a href = "https://github.com/podman-desktop/podman-desktop" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > GitHub< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPrP" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://discord.com/invite/x5GzFF6QH4" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Chat (bridged): #podman-desktop on Discord< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPrP" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" > < / path > < / svg > < / a > < / li > < li class = "footer__item" > < a href = "https://github.com/podman-desktop/podman-desktop#communication" target = "_blank" rel = "noopener noreferrer" class = "footer__link-item" > Other ways to Communicate< svg width = "13.5" height = "13.5" aria-hidden = "true" viewBox = "0 0 24 24" class = "iconExternalLink_nPrP" > < path fill = "currentColor" d = "M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10 . 988l4 . 035 4-6 . 977 7 . 07
2025-04-14 17:49:47 +00:00
< div class = "flex flex-col items-start text-left gap-4" >
< div class = "w-96 mt-8 mb-8" >
< img class = "dark:hidden" alt = "Cloud Native Computing Foundation" src = "/img/cncf-logo.svg" >
< img class = "hidden dark:inline" alt = "Cloud Native Computing Foundation" src = "/img/cncf-logo-dark.svg" >
< / div >
< div class = "text-sm" >
< p class = "mb-1" > We are a < a href = "https://cncf.io/" class = "underline" > Cloud Native Computing Foundation< / a > sandbox project.< / p >
< p class = "mb-1" > © Copyright Podman Desktop Contributors 2025. © 2025 The Linux Foundation. All rights reserved.< / p >
< p class = "mb-1" > The Linux Foundation has registered trademarks and uses trademarks.
For a list of trademarks of The Linux Foundation, please see our
< a href = "https://www.linuxfoundation.org/trademark-usage/" class = "underline" > Trademark Usage< / a > page.< / p >
< / div >
< / div >
< / div > < / div > < / div > < / footer > < / div >
2025-02-25 10:17:38 +00:00
< / body >
< / html >
