Chrome Extension

The Chrome extension is the main way to interact with NightPanel. It shows the monitoring status directly in your browser toolbar.

Installation

Currently, the extension is distributed manually (not yet in the Chrome Web Store):

  1. Download or build the extension files
  2. Open chrome://extensions in Chrome
  3. Enable Developer mode (toggle in the top right corner)
  4. Click Load unpacked
  5. Select the dist folder of the extension

The extension icon will appear in your browser toolbar.

The Icon

The toolbar icon is a colored circle that reflects the overall status of your monitors:

Icon ColorMeaning
🟢 GreenAll monitors are healthy
🟡 YellowSome monitors have warnings
🔴 RedA critical monitor is down
⚫ GrayNot connected or no data

The icon updates automatically every minute. You can also force a refresh by opening the popup.

The Popup

Click the icon to open the popup window. It shows:

  • Overall status — the status dot next to "NightPanel"
  • Monitor groups — collapsed by default if everything is green
  • Settings button — the gear icon opens the full settings page

The popup window adjusts its height based on content — no wasted space.

Settings Page

Click the gear icon to open the full settings page. Here you can:

  • Log in / Log out — connect the extension to your NightPanel account
  • View all monitors — see detailed status of each monitor
  • Create monitors — add new HTTP, SSL, Database, or Integration monitors
  • Edit monitors — change settings of existing monitors
  • Manage groups — create, rename, or delete monitor groups
  • Run manual checks — trigger an immediate check on any monitor

Logging In

  1. Open the settings page (gear icon in popup)
  2. Enter the email and password from your NightPanel account
  3. Click Login

The extension will connect to the server and start polling for status. The icon will change color based on your monitors' status.

How It Connects

The extension communicates directly with the NightPanel backend server using an API key. When you log in through the extension, it automatically:

  1. Sends your email/password to the server
  2. Receives an API key in return
  3. Stores the key locally in Chrome storage
  4. Uses this key for all subsequent requests

You don't need to manage API keys manually — the extension handles it for you.