<titledata-rh="true">Creating an extension | Podman Desktop</title><metadata-rh="true"name="viewport"content="width=device-width,initial-scale=1"><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:image"content="https://podman-desktop.io/img/banner_podman-desktop.png"><metadata-rh="true"name="twitter:image"content="https://podman-desktop.io/img/banner_podman-desktop.png"><metadata-rh="true"property="og:url"content="https://podman-desktop.io/tutorial/creating-an-extension"><metadata-rh="true"property="og:locale"content="en"><metadata-rh="true"name="docusaurus_locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docusaurus_version"content="current"><metadata-rh="true"name="docusaurus_tag"content="docs-tutorial-current"><metadata-rh="true"name="docsearch:version"content="current"><metadata-rh="true"name="docsearch:docusaurus_tag"content="docs-tutorial-current"><metadata-rh="true"property="og:title"content="Creating an extension | Podman Desktop"><metadata-rh="true"name="description"content="Creating a Podman Desktop extension"><metadata-rh="true"property="og:description"content="Creating a Podman Desktop extension"><metadata-rh="true"name="keywords"content="podman desktop,podman,extension"><linkdata-rh="true"rel="icon"href="/img/favicon.ico"><linkdata-rh="true"rel="canonical"href="https://podman-desktop.io/tutorial/creating-an-extension"><linkdata-rh="true"rel="alternate"href="https://podman-desktop.io/tutorial/creating-an-extension"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://podman-desktop.io/tutorial/creating-an-extension"hreflang="x-default"><linkdata-rh="true"rel="preconnect"href="https://MR01ANKQ9S-dsn.algolia.net"crossorigin="anonymous"><scriptdata-rh="true"type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Creating an extension","item":"https://podman-desktop.io/tutorial/creating-an-extension"}]}</script><linkrel="alternate"type="application/rss+xml"href="/blog/rss.xml"title="Podman Desktop RSS Feed">
<li><ahref="/tutorial/creating-an-extension#running-the-extension">Running the extension</a></li>
<li><ahref="/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 <ahref="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 <ahref="https://www.npmjs.com/package/@podman-desktop/api"target="_blank"rel="noopener noreferrer"><code>npm</code> package</a>.</p>
<h2class="anchor anchorWithStickyNavbar_JmGV"id="before-you-begin">Before you begin<ahref="#before-you-begin"class="hash-link"aria-label="Direct link to Before you begin"title="Direct link to Before you begin"></a></h2>
<li>Installed <code>JavaScript</code> or <code>TypeScript</code>.</li>
<li>A clone of the <ahref="https://github.com/podman-desktop/podman-desktop"target="_blank"rel="noopener noreferrer">Podman Desktop</a> repository on your local machine.</li>
</ul>
<h2class="anchor anchorWithStickyNavbar_JmGV"id="initializing-an-extension">Initializing an extension<ahref="#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>
<p>Add an <code>icon.png</code> file to the subdirectory.</p>
</li>
</ol>
<h2class="anchor anchorWithStickyNavbar_JmGV"id="writing-the-extension-entry-point">Writing the extension entry point<ahref="#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>
<divclass="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><divclass="admonitionHeading_GCBg"><spanclass="admonitionIcon_L39b"><svgviewBox="0 0 14 16"><pathfill-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><divclass="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 <ahref="https://podman-desktop.io/api"target="_blank"rel="noopener noreferrer">API documentation</a> for more information.</p></div></div>
</li>
</ul>
</li>
</ol>
<h2class="anchor anchorWithStickyNavbar_JmGV"id="build-dependencies">Build dependencies<ahref="#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>
<divclass="language-javascript codeBlockContainer_mQmQ theme-code-block"style="--prism-color:#F8F8F2;--prism-background-color:#282A36"><divclass="codeBlockContent_t_Hd"><pretabindex="0"class="prism-code language-javascript codeBlock_RMoD thin-scrollbar"style="color:#F8F8F2;background-color:#282A36"><codeclass="codeBlockLines_AclH"><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)">/**********************************************************************</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * Copyright (C) 2023 Red Hat, Inc.</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> *</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * Licensed under the Apache License, Version 2.0 (the "License");</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="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><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * You may obtain a copy of the License at</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> *</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * http://www.apache.org/licenses/LICENSE-2.0</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> *</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * Unless required by applicable law or agreed to in writing, software</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * distributed under the License is distributed on an "AS IS" BASIS,</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * See the License for the specific language governing permissions and</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * limitations under the License.</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> *</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> * SPDX-License-Identifier: Apache-2.0</span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token doc-comment comment"style="color:rgb(98, 114, 164)"> ***********************************************************************/</span><spanclass="token plain"></span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token plain"style="display:inline-block"></span><br></span><spanclass="token-line"style="color:#F8F8F2"><spanclass="token plain"></span><spanclass="token keyword module"style="color:rgb(189, 147, 249);font-style:italic">import</span><spanclass="token plain"></span><spanclass="token imports punctuation"style="color:rgb(248, 248, 242)">{</span><spanclass="token imports"> join </span><spanclass="token imports punctuation"style="color:rgb(248, 248, 242)">}</span><spanclass="token plain"></span><spanclass="token keyword module"style="
<h2class="anchor anchorWithStickyNavbar_JmGV"id="running-the-extension">Running the extension<ahref="#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>
<p>The extension compiles and generates the output in the <code>dist</code> folder of the subdirectory.
<imgdecoding="async"loading="lazy"alt="output in the dist folder"src="/assets/images/dist-folder-4da5ca7e197631d33d970b42fca540c5.png"width="167"height="250"class="img_SS3x"></p>
<h2class="anchor anchorWithStickyNavbar_JmGV"id="verifying-the-extensions-features">Verifying the extension's features<ahref="#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>.
<imgdecoding="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>
<divclass="theme-admonition theme-admonition-note admonition_WCGJ alert alert--secondary"><divclass="admonitionHeading_GCBg"><spanclass="admonitionIcon_L39b"><svgviewBox="0 0 14 16"><pathfill-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><divclass="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>
<h2class="anchor anchorWithStickyNavbar_JmGV"id="additional-resources">Additional resources<ahref="#additional-resources"class="hash-link"aria-label="Direct link to Additional resources"title="Direct link to Additional resources"></a></h2>
<ul>
<li><ahref="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><ahref="https://podman-desktop.io/api"target="_blank"rel="noopener noreferrer">Podman Desktop API documentation</a></li>
<li><ahref="/docs/extensions/developing#overview-of-creating-a-new-extension">Overview - Creating an extension</a></li>
<li><ahref="/docs/extensions/developing#expanding-your-extension">Expanding your extension</a></li>
<li><ahref="/docs/extensions/publish">Publishing a Podman Desktop extension</a></li>
</ul></div><footerclass="theme-doc-footer docusaurus-mt-lg"><divclass="row margin-top--sm theme-doc-footer-tags-row"><divclass="col"><b>Tags:</b><ulclass="tags_Ow0B padding--none margin-left--sm"><liclass="tag_DFxh"><arel="tag"class="tag_otG2 tagRegular_s0E1"href="/tutorial/tags/podman-desktop">podman-desktop</a></li><liclass="tag_DFxh"><arel="tag"class="tag_otG2 tagRegular_s0E1"href="/tutorial/tags/creating-an-extension">creating-an-extension</a></li></ul></div></div></footer></article><navclass="docusaurus-mt-lg pagination-nav"aria-label="Docs pages"><aclass="pagination-nav__link pagination-nav__link--prev"href="/tutorial/running-an-ai-application"><divclass="pagination-nav__sublabel">Previous</div><divclass="pagination-nav__label">Running an AI application</div></a><aclass="pagination-nav__link pagination-nav__link--next"href="/tutorial/getting-started-with-compose"><divclass="pagination-nav__sublabel">Next</div><divclass="pagination-nav__label">Getting started with Compose</div></a></nav></div></div><divclass="col col--3"><divclass="tableOfContents_XG6w thin-scrollbar theme-doc-toc-desktop"><ulclass="table-of-contents table-of-contents__left-border"><li><ahref="#before-you-begin"class="table-of-contents__link toc-highlight">Before you begin</a></li><li><ahref="#initializing-an-extension"class="table-of-contents__link toc-highlight">Initializing an extension</a></li><li><ahref="#writing-the-extension-entry-point"class="table-of-contents__link toc-highlight">Writing the extension entry point</a></li><li><ahref="#build-dependencies"class="table-of-contents__link toc-highlight">Build dependencies</a></li><li><ahref="#running-the-extension"class="table-of-contents__link toc-highlight">Running the extension</a></li><li><ahref="#verifying-the-extensions-features"class="table-of-contents__link toc-highlight">Verifying the extension's features</a></li><li><ahref="#additional-resources"class="table-of-contents__link toc-highlight">Additional resources</a></li></ul></div></div></div></div></main></div></div></div><footerclass="theme-layout-footer footer"><divclass="container container-fluid"><divclass="row footer__links"><divclass="theme-layout-footer-column col footer__col"><divclass="footer__title">Documentation</div><ulclass="footer__items clean-list"><liclass="footer__item"><aclass="footer__link-item"href="/docs/installation">Installing Podman Desktop</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/migrating-from-docker">Migrating from Docker</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/kubernetes">Working with Kubernetes</a></li><liclass="footer__item"><aclass="footer__link-item"href="/docs/troubleshooting">Troubleshooting</a></li></ul></div><divclass="theme-layout-footer-column col footer__col"><divclass="footer__title">Links</div><ulclass="footer__items clean-list"><liclass="footer__item"><ahref="https://github.com/podman-desktop/podman-desktop"target="_blank"rel="noopener noreferrer"class="footer__link-item">GitHub<svgwidth="13.5"height="13.5"aria-hidden="true"class="iconExternalLink_nPrP"><usehref="#theme-svg-external-link"></use></svg></a></li><liclass="footer__item"><ahref="https://discord.com/invite/x5GzFF6QH4"target="_blank"rel="noopener noreferrer"class="footer__link-item">Chat (bridged): #podman-desktop on Discord<svgwidth="13.5"height="13.5"aria-hidden="true"class="iconExternalLink_nPrP"><usehref="#theme-svg-external-link"></use></svg></a></li><liclass="footer__item"><ahref="https://github.com/podman-desktop/podman-desktop#communication"target="_blank"rel="noopener noreferrer"class="footer__link-item">Other ways to Communicate<svgwidth="13.5"height="13.5"aria-hidden="true"class="iconExternalLink_nPrP"><usehref="#theme-svg-external-link"></use></svg></a></li><liclass="footer__item"><ahref="https://github.com/orgs/podman-desktop/projects/4/views/3"target="_blank"rel="noopener noreferrer"class="footer__link-item">Current Sprint<svgwidth="13.5"height="13.5"aria-hidde
