Asset Viewer

||

An Asset Viewer extension adds a panel to the Asset Viewer sidebar, letting you display extra information or functionality alongside any asset.

Declare in Manifest

Add the assetViewerExtensions property to your manifest.json:

{
  "assetViewerExtensions": [
    {
      "extensionKey": "augment-asset",
      "name": "My Asset Viewer Extension",
      "description": "An app that augments assets with additional information.",
      "icon": "asset-viewer-icon.png",
      "resources": {
        "folder": "asset-viewer-extension"
      }
    }
  ]
}

Property	Description
extensionKey	Unique identifier for the extension.
name	Descriptive name of the extension.
description	Brief overview of the extension's functionality.
icon	Icon representing the extension. For optimal rendering in the Asset Viewer sidebar, use a 48x48 pixel image.
resources	Location of the resources folder containing your extension's source code.

Required Files

The source code for your Asset Viewer extension lives in the resources folder you defined in the manifest. The folder contains all of your extension's files (JS, CSS, images, etc.), including one required file:

• index.html - The entry point of your Asset Viewer extension.

Query Parameters

Showpad appends the following query parameters to your extension's URL when it loads:

• assetId
• assetSlug
• assetName

Access them in your code like this:

new URLSearchParams(window.location.search).get('assetId');

Next Steps

• Asset Viewer concept - full reference for the extension type
• Build - write your extension code