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.
To build and develop the extension, follow these steps:
- Clone the project or your fork:
$ git clone https://github.com/containers/podman-desktop-extension-webview-template/- Run
npm installto install all relevant packages:
$ npm install- Create a build:
Creating a build will generate all required files for Podman Desktop to load the extension:
$ npm run buildOptionally, you can also use npm run watch to continuously rebuild after each change, without needing to re-run npm run build:
$ npm run watch- 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-desktopNavigate to the directory:
$ cd podman-desktopRun the npm install command:
$ npm installLoad 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- 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.
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.
- Package your extension by building the image:
$ podman build -t quay.io/myusername/myextension .- Push the extension to an external registry:
$ podman push quay.io/myusername/myextension- Install via the Podman Desktop "Install Custom..." button:
