Jump to content

Custom Tabs

From Pulsed Media Wiki

Custom Tabs

PMSS lets you add custom tabs to your web panel. Any application accessible via URL -- Docker containers, custom web apps, third-party tools -- can appear as a tab alongside ruTorrent and the file manager.

The feature uses a single configuration file in your home directory. No restart required; changes appear on your next page load.

How It Works

Create a file called .customFrames in your home directory (not inside www/):

<syntaxhighlight lang="bash"> nano ~/.customFrames </syntaxhighlight>

Each line defines one tab, with four fields separated by pipes:

appname|tooltip|label|url
Field Description Example
appname Internal identifier. Alphanumeric only, must not start with a number. jellyfin
tooltip Hover text shown when you mouse over the tab. Jellyfin Media Player
label Text displayed on the tab bar. Jellyfin
url URL path the tab loads in its iframe. /user-johndoe/jellyfin/

Rules

  • Lines starting with # are treated as comments.
  • Lines with fewer than four pipe-separated fields are silently skipped.
  • You can add as many tabs as you want -- one per line.
  • Changes take effect on the next page load. No service restart needed.

Examples

Docker Container Tab

If you're running a Docker container with its web interface proxied through lighttpd (see Lighttpd Custom Configuration), you can add it as a tab:

# My download manager
pyload|pyLoad Download Manager|pyLoad|/user-johndoe/pyload/

This assumes you already have a reverse proxy configured in ~/.lighttpd/custom.d/ pointing /user-johndoe/pyload/ to your container's port. See Lighttpd Custom Configuration for how to set that up.

Jellyfin Tab

After installing Jellyfin via install-media-stack.sh or manually through Docker:

jellyfin|Jellyfin Media Server|Jellyfin|/user-johndoe/jellyfin/

See Install Media Stack for one-command Jellyfin installation.

Multiple Tabs

You can define several tabs at once:

# Media
jellyfin|Jellyfin Media Server|Jellyfin|/user-johndoe/jellyfin/

# Tools
filebrowser|File Browser|Files|/user-johndoe/filebrowser/
syncthing|Syncthing File Sync|Syncthing|/user-johndoe/syncthing/

Invidious Tab

If you have Invidious running:

invidious|Private YouTube Frontend|Invidious|/user-johndoe/apps/invidious/

The Tab URL Must Point to Something

The .customFrames file only creates the tab in your panel. It does not set up routing to your application. The URL you specify must already work -- meaning you need a reverse proxy configured in your lighttpd setup.

For most applications, the workflow is:

  1. Start your application (Docker container, native process, etc.)
  2. Configure a reverse proxy in ~/.lighttpd/custom.d/ -- see Lighttpd Custom Configuration
  3. Add the tab entry in ~/.customFrames
  4. Reload the page

Troubleshooting

Tab doesn't appear

  • Check the file path: it must be ~/.customFrames (in your home directory, with a dot prefix).
  • Verify the line has exactly four pipe-separated fields.
  • Make sure appname doesn't start with a number.
  • Hard-refresh your browser (Ctrl+Shift+R) to clear cached HTML.

Tab appears but shows a blank page or error

The tab itself is working, but the URL it points to isn't responding. Check:

  • Is the application actually running? (docker ps or ps aux | grep myapp)
  • Is the reverse proxy configured? (Check ~/.lighttpd/custom.d/)
  • Did you reload lighttpd after adding the proxy config? (kill -HUP $(cat ~/.lighttpd/lighttpd.pid))

See Also