# 📺 Display Trigger Watcher — Chrome Extension

A Chrome extension that watches Firebase Realtime Database for `DisplayTriggerStatus` changes and automatically opens/focuses the target webpage in fullscreen when a display point is activated.

---

## How It Works

```
Remote/Viewer page sets DisplayTriggerStatus = "ACTIVATED"
        ↓
Extension detects the change via Firebase SSE stream
        ↓
Reads TargetWebpage from the display point's public data
        ↓
If tab exists → focus it | If not → open it
        ↓
Window → fullscreen
        ↓
Reset DisplayTriggerStatus = "LISTENING"
```

---

## Credential Flow (Auto-Detection)

The extension **automatically detects** `hubName` and `dpID` from any open viewer or remote page:

1. You open `viewer.html` or `remote.html` and configure it as normal
2. The extension's **content script** reads `hubName` + `dpID` from that page's `localStorage`
3. It resolves the `tenantId` via the public `/hubNames/{hubName}` RTDB path
4. It starts an SSE stream watching `DisplayTriggerStatus` for that display point

No manual configuration needed if you're already logged into a viewer page!

---

## Setup

### Step 1 – Load the Extension

1. Open Chrome → `chrome://extensions/`
2. Enable **Developer Mode** (top right)
3. Click **Load unpacked**
4. Select the `chrome-extension/` folder

### Step 2 – Set Firebase Credentials

Click the extension icon → **Options** → enter your **Display Point Manager email + password** → Save & Sign In.

> These are the same credentials you use to log into the admin panel.

### Step 3 – Add Display Points to Watch

**Option A – Auto-detect (recommended):**
Simply open a `viewer.html` or `remote.html` page in Chrome. The extension detects `hubName` + `dpID` from localStorage automatically.

**Option B – Manual:**
In Options → enter HUB Name + DP ID → click Add & Watch.

### Step 4 – Set TargetWebpage in Firebase

Each display point needs a `TargetWebpage` value in:
```
tenants/{tenantId}/displayPoints/{dpId}/public/TargetWebpage
```
This is the URL the extension will open/focus when the trigger fires.

---

## Firebase Database Paths

| Path | Description |
|------|-------------|
| `hubNames/{hubName}` | Maps HUB name → tenantId (public read) |
| `tenants/{tid}/displayPoints/{dpId}/public/DisplayTriggerStatus` | `"LISTENING"` or `"ACTIVATED"` |
| `tenants/{tid}/displayPoints/{dpId}/public/TargetWebpage` | URL to open when triggered |

---

## File Structure

```
chrome-extension/
├── manifest.json       # Extension config (Manifest V3)
├── background.js       # Service worker: Firebase SSE watcher + trigger handler
├── content.js          # Reads hubName/dpID from page localStorage
├── popup.html/js       # Extension toolbar popup
├── options.html/js     # Settings page
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png
```

---

## Notes

- The extension uses Firebase REST API + SSE (no SDK bundling needed)
- Auth tokens are auto-refreshed every 20 minutes via Chrome alarms
- The `hubNames` node is publicly readable — no auth needed for tenant resolution
- Multiple display points across different hubs can be watched simultaneously
