2023-03-21 16:21:39 +00:00
<!doctype html>
2023-11-22 15:11:51 +00:00
< html lang = "en" dir = "ltr" class = "docs-wrapper plugin-docs plugin-id-default docs-version-current docs-doc-page docs-doc-id-extensions/write/index" data-has-hydrated = "false" >
2023-03-21 16:21:39 +00:00
< head >
< meta charset = "UTF-8" >
2023-11-22 15:11:51 +00:00
< meta name = "generator" content = "Docusaurus v3.0.0" >
< title data-rh = "true" > Writing | 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/docs/extensions/write" > < 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-default-current" > < meta data-rh = "true" name = "docsearch:version" content = "current" > < meta data-rh = "true" name = "docsearch:docusaurus_tag" content = "docs-default-current" > < meta data-rh = "true" property = "og:title" content = "Writing | Podman Desktop" > < meta data-rh = "true" name = "description" content = "Writing a Podman Desktop extension" > < meta data-rh = "true" property = "og:description" content = "Writing a Podman Desktop extension" > < meta data-rh = "true" name = "keywords" content = "podman desktop,extension,writing" > < link data-rh = "true" rel = "icon" href = "/img/favicon.ico" > < link data-rh = "true" rel = "canonical" href = "https://podman-desktop.io/docs/extensions/write" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/docs/extensions/write" hreflang = "en" > < link data-rh = "true" rel = "alternate" href = "https://podman-desktop.io/docs/extensions/write" 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" >
2023-03-21 16:21:39 +00:00
< 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" >
2023-06-05 11:56:11 +00:00
< link rel = "search" type = "application/opensearchdescription+xml" title = "Podman Desktop" href = "/opensearch.xml" >
< link rel = "preconnect" href = "https://podman-desktop-website.goatcounter.com" >
2023-11-22 15:11: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.ac87c0e3.css" >
2023-12-01 14:49:06 +00:00
< script src = "/assets/js/runtime~main.ebf62b27.js" defer = "defer" > < / script >
< script src = "/assets/js/main.10641e27.js" defer = "defer" > < / script >
2023-03-21 16:21:39 +00:00
< / head >
< body class = "navigation-with-keyboard" >
2023-12-01 14:49:06 +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 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 aria-current = "page" class = "navbar__item navbar__link navbar__link--active" href = "/docs/intro" > Documentation< / a > < a class = "navbar__item navbar__link" href = "/core-values" > Core Values< / a > < a class = "navbar__item navbar__link" href = "/features" > Features< / a > < a class = "navbar__item navbar__link" href = "/downloads" > Downloads< / a > < a class = "navbar__item navbar__link" href = "/extend" > Extend< / a > < a class = "navbar__item navbar__link" href = "/blog" > Blog< / a > < / div > < div class = "navbar__items navbar__items--right" > < a href = "https://github.com/containers/podman-desktop" target = "_blank" rel = "noopener noreferrer" class = "navbar__item navbar__link header-github-link" > < / a > < div class = "toggle_ki11 colorModeToggle_Hewu" > < button class = "clean-btn toggleButton_MMFG toggleButtonDisabled_Uw7m" type = "button" disabled = "" title = "Switch between dark and light mode (currently dark mode)" aria-label = "Switch between dark and light mode (currently dark mode)" aria-live = "polite" > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "lightToggleIcon_lgto" > < path fill = "currentColor" d = "M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z" > < / path > < / svg > < svg viewBox = "0 0 24 24" width = "24" height = "24" class = "darkToggleIcon_U96C" > < path fill = "currentColor" d = "M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3 . 86 , 0-7-3 . 14-7-7C5 , 9 . 07 , 6 . 81 , 6 . 55 , 9 . 37 , 5 . 51z M12 , 3c-4 . 97 , 0-9 , 4 . 03-9 , 9s4 . 03 , 9 , 9 , 9s9-4 . 03 , 9-9c0-0 . 46-0 . 04-0 . 92-0 . 1-1 . 36 c-0 . 98 , 1 . 37-2 . 58 , 2 . 26-4 . 4 , 2 . 26c-2 . 98 , 0-5 . 4-2 .
2023-11-22 15:11:51 +00:00
< p > To write a Podman Desktop extension, start a Node.js or TypeScript project calling the Podman Desktop API, and ensure all runtime dependencies are inside the final binary.< / p >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "initializing-a-podman-desktop-extension" > Initializing a Podman Desktop extension< a href = "#initializing-a-podman-desktop-extension" class = "hash-link" aria-label = "Direct link to Initializing a Podman Desktop extension" title = "Direct link to Initializing a Podman Desktop extension" > < / a > < / h2 >
< p > Write the Podman Desktop extension Node.js package metadata.< / p >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "prerequisites" > Prerequisites< a href = "#prerequisites" class = "hash-link" aria-label = "Direct link to Prerequisites" title = "Direct link to Prerequisites" > < / a > < / h4 >
< ul >
< li > JavaScript or TypeScript< / li >
< / ul >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "procedure" > Procedure< a href = "#procedure" class = "hash-link" aria-label = "Direct link to Procedure" title = "Direct link to Procedure" > < / a > < / h4 >
< ol >
< li >
< p > Create and edit a < code > package.json< / code > file.< / 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 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 TypeScript and 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 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 that might run this 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 Hello World 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 > Add an < code > icon.png< / code > file to the project.< / p >
< / li >
< / ol >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "verification" > Verification< a href = "#verification" class = "hash-link" aria-label = "Direct link to Verification" title = "Direct link to Verification" > < / a > < / h4 >
< ul >
< li >
< p > Full < code > package.json< / code > example:< / 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 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" < / 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& quo
< / li >
< / ul >
< h2 class = "anchor anchorWithStickyNavbar_JmGV" id = "writing-a-podman-desktop-extension-entry-point" > Writing a Podman Desktop extension entry point< a href = "#writing-a-podman-desktop-extension-entry-point" class = "hash-link" aria-label = "Direct link to Writing a Podman Desktop extension entry point" title = "Direct link to Writing a Podman Desktop extension entry point" > < / a > < / h2 >
< p > Write the extension features.< / p >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "prerequisites-1" > Prerequisites< a href = "#prerequisites-1" class = "hash-link" aria-label = "Direct link to Prerequisites" title = "Direct link to Prerequisites" > < / a > < / h4 >
< ul >
< li > JavaScript or TypeScript< / li >
< / ul >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "procedure-1" > Procedure< a href = "#procedure-1" class = "hash-link" aria-label = "Direct link to Procedure" title = "Direct link to Procedure" > < / a > < / h4 >
< ol >
< li >
< p > Create and edit a < code > dist/extension.js< / code > file.< / p >
< / li >
< li >
< p > Import the Podman Desktop API< / 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 > Expose the < code > activate< / code > function to call on activation.< / p >
< p > The signature of the function can be:< / 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)" > 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< / 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 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 > Register the command and the callback< / 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 > < 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) Expose the < code > deactivate< / code > function to call on deactivation.< / p >
< p > The signature of the function can be:< / 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 >
< / li >
< / ul >
< / li >
< / ol >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "verification-1" > Verification< a href = "#verification-1" class = "hash-link" aria-label = "Direct link to Verification" title = "Direct link to Verification" > < / a > < / h4 >
< ul >
< li >
< p > The extension compiles and produces the output in the < code > dist< / code > folder.< / p >
< / li >
< li >
< p > All runtime dependencies are inside the final binary.< / p >
< / li >
< / ul >
< h4 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 > < / h4 >
< ul >
< li > Consider a packer such as < a href = "https://rollupjs.org" target = "_blank" rel = "noopener noreferrer" > Rollup< / a > or < a href = "https://webpack.js.org" target = "_blank" rel = "noopener noreferrer" > Webpack< / a > to shrink the size of the artifact.< / li >
< / ul >
< h4 class = "anchor anchorWithStickyNavbar_JmGV" id = "next-steps" > Next steps< a href = "#next-steps" class = "hash-link" aria-label = "Direct link to Next steps" title = "Direct link to Next steps" > < / a > < / h4 >
< ul >
< li > < a href = "/docs/extensions/publish" > Publishing a Podman Desktop extension< / a > < / li >
2023-12-01 14:49:06 +00:00
< / ul > < / div > < footer class = "theme-doc-footer docusaurus-mt-lg" > < div class = "theme-doc-footer-tags-row row margin-bottom--sm" > < 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 = "/docs/tags/podman-desktop" > podman-desktop< / a > < / li > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/docs/tags/extension" > extension< / a > < / li > < li class = "tag_DFxh" > < a class = "tag_otG2 tagRegular_s0E1" href = "/docs/tags/writing" > writing< / a > < / li > < / ul > < / div > < / div > < div class = "theme-doc-footer-edit-meta-row row" > < div class = "col" > < a href = "https://github.com/containers/podman-desktop/tree/main/website/docs/extensions/write/index.md" target = "_blank" rel = "noopener noreferrer" class = "theme-edit-this-page" > < svg fill = "currentColor" height = "20" width = "20" viewBox = "0 0 40 40" class = "iconEdit_bHB7" aria-hidden = "true" > < g > < path d = "m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" > < / path > < / g > < / svg > Edit this page< / a > < / div > < div class = "col lastUpdated_pbO5" > < / 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 = "/docs/extensions" > < div class = "pagination-nav__sublabel" > Previous< / div > < div class = "pagination-nav__label" > Writing extensions< / div > < / a > < a class = "pagination-nav__link pagination-nav__link--next" href = "/docs/extensions/write/onboarding-workflow" > < div class = "pagination-nav__sublabel" > Next< / div > < div class = "pagination-nav__label" > Onboarding workflow< / 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 = "#initializing-a-podman-desktop-extension" class = "table-of-contents__link toc-highlight" > Initializing a Podman Desktop extension< / a > < / li > < li > < a href = "#writing-a-podman-desktop-extension-entry-point" class = "table-of-contents__link toc-highlight" > Writing a Podman Desktop extension entry point< / 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/containers/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/containers/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" >
2023-03-21 16:21:39 +00:00
< / body >
< / html >
