Podman Desktop Extension Webview Template

Overview

This template provides a webview template on how to build a Podman Desktop extension showcasing a frontend.

More information can be found on our official extension documentation on how to further expand your extension.

With this template, you will see a new button on the navbar that says "Hello World!" and provides a frontend.

Development

To build and develop the extension, follow these steps:

1. Clone the project or your fork:

$ git clone https://github.com/containers/podman-desktop-extension-webview-template/

2. Run npm install to install all relevant packages:

$ npm install

3. Create a build:

Creating a build will generate all required files for Podman Desktop to load the extension:

$ npm run build

Optionally, you can also use npm run watch to continuously rebuild after each change, without needing to re-run npm run build:

$ npm run watch

4. Load the extension temporarily within Podman Desktop:

We will load the extension within Podman Desktop to test it. This requires cloning the Podman Desktop repo:

$ git clone https://github.com/containers/podman-desktop

Navigate to the directory:

$ cd podman-desktop

Run the npm install command:

$ npm install

Load the extension using the npm run watch command with an additional parameter to load the backend packaged data:

npm run watch --extension-folder ../podman-desktop-extension-webview-template

5. Confirm that the extension has been loaded:

You can now see that your extension has been loaded by checking the Extensions section of Podman Desktop:

You can also check the navbar for "Hello World" in order to view the webview.

Packaging and Publishing

More information on how to package and publish your extension can be found in our official publishing documentation.

However, we have provided a pre-made Containerfile in this template for you to try.

1. Package your extension by building the image:

$ podman build -t quay.io/myusername/myextension .

2. Push the extension to an external registry:

$ podman push quay.io/myusername/myextension

3. Install via the Podman Desktop "Install Custom..." button: