Browser Mod: controlla Home Assistant da qualsiasi browser

Browser Mod è un’integrazione custom fondamentale per Home Assistant che trasforma ogni browser in un dispositivo controllabile, permettendoti di creare popup eleganti, controllare tablet wall-mounted, fare casting di media e personalizzare completamente il frontend. Sviluppata da thomasloven, è diventata uno standard per dashboard professionali e controllo avanzato dell’interfaccia.

Cos’è Browser Mod e perché è indispensabile

Browser Mod permette di registrare ogni browser come un dispositivo Home Assistant con entità controllabili. Quando apri la dashboard HA su un tablet, PC o smartphone, Browser Mod crea automaticamente un dispositivo con sensori (fotocamera, movimento, luminosità schermo) e controlli (volume, casting, notifiche).

Casi d’uso principali:

• Tablet wall-mounted: controllo brightness, casting video/audio, sensore movimento tramite webcam

• Popup personalizzati: sostituisci le finestre “more-info” standard con card custom eleganti

• Dashboard multi-utente: nascondi/mostra elementi in base al dispositivo o utente

• Casting centralizzato: invia annunci TTS o video a browser specifici

• Controllo frontend: modifica titolo pagina, nascondi sidebar/header per dashboard kiosk

Requisiti e preparazione

Prima di installare Browser Mod assicurati di avere:

• Home Assistant aggiornato (versione 2023.x o superiore consigliata)

• HACS installato e funzionante (Home Assistant Community Store)

• Accesso amministratore per modificare configurazioni

• Browser moderni: Chrome, Firefox, Edge, Safari (iOS limitato)

Importante: se hai Browser Mod 1.x installato, rimuovilo completamente prima di procedere. La versione 2.x è una riscrittura totale incompatibile.​

Installazione passo-passo via HACS

Passo 1: Scarica Browser Mod da HACS

Apri Home Assistant e vai su HACS dalla barra laterale. Clicca su Integrazioni e poi su Esplora & Scarica Repository. Nella barra di ricerca digita “browser mod” e seleziona l’integrazione ufficiale di thomasloven.

Clicca sui tre puntini laterali e seleziona Scarica. HACS scaricherà i file nella directory custom_components/browser_mod/.

Passo 2: Primo riavvio Home Assistant

Dopo il download, vai su Strumenti per Sviluppatori > YAML > Riavvia. Questo riavvio carica i file dell’integrazione nel sistema.

Passo 3: Aggiungi l’integrazione

Dopo il riavvio, vai su Impostazioni > Dispositivi e Servizi > Aggiungi Integrazione. Cerca “Browser Mod” e selezionalo. Clicca su Finito per completare l’aggiunta.

Passo 4: Secondo riavvio e cache

Esegui un secondo riavvio di Home Assistant. Questo è fondamentale per attivare completamente l’integrazione.

Dopo il riavvio:

1. Cancella completamente la cache del browser (Ctrl+Shift+Canc su Chrome/Firefox)

2. Ricarica forzatamente la pagina con Shift+F5

3. Se necessario, reinstalla Browser Mod da HACS e ripeti i passaggi

Registrazione del browser come dispositivo

Dopo l’installazione, ogni browser che apre Home Assistant può essere registrato come dispositivo.

Registrazione automatica

Vai su Browser Mod nella barra laterale di Home Assistant (comparirà dopo l’installazione). Attiva il toggle “Register” per registrare automaticamente il browser corrente.

Una volta registrato, il browser comparirà in Impostazioni > Dispositivi e Servizi > Browser Mod con nome tipo “Chrome Windows”, “Safari iPhone”, ecc..

Entità create automaticamente

Ogni browser registrato genera entità controllabili:​

• media_player.browser_xxx: controlla volume, play/pause, casting

• sensor.browser_xxx_path: percorso URL corrente della dashboard

• sensor.browser_xxx_visibility: browser visibile/nascosto

• binary_sensor.browser_xxx_motion: movimento rilevato da webcam (se abilitato)

• camera.browser_xxx: streaming webcam del dispositivo (se abilitato)

• light.browser_xxx_screen: controllo luminosità schermo

Configurazione avanzata e personalizzazioni

Modifica nome e icona dispositivo

Vai su Impostazioni > Dispositivi e Servizi > Browser Mod > seleziona il browser > Modifica. Cambia nome e icona per identificare facilmente il dispositivo (es: “Tablet Cucina”, “PC Ufficio”).

Abilita sensori webcam e movimento

Nel pannello Browser Mod, abilita i toggle:

• Camera: attiva streaming webcam

• Motion: rileva movimento tramite analisi video

Questi sensori sono utili per automazioni tipo “spegni display se nessun movimento per 5 minuti”.

Nascondi sidebar e header (modalità kiosk)

Per dashboard wall-mounted su tablet, nascondi gli elementi di navigazione. Aggiungi in configuration.yaml

browser_mod:
  devices:
    <browser_id>:
      disable:
        - sidebar
        - header

Sostituisci <browser_id> con l’ID del dispositivo (trovabile in Dispositivi e Servizi).

Creare popup personalizzati

La funzione più potente di Browser Mod è la creazione di popup eleganti che sostituiscono le finestre “more-info” standard.

Esempio 1: Popup semplice con testo

Vai su Strumenti per Sviluppatori > Servizi e seleziona browser_mod.popup. Compila:

• Title: “Test Popup”

• Content: “Questo è un popup di prova”

Clicca CHIAMA SERVIZIO (anche se appare grigio, funziona). Il popup apparirà su tutti i browser registrati.

Esempio 2: Popup con card Lovelace

service: browser_mod.popup
data:
  title: "Controllo Luci Soggiorno"
  content:
    type: entities
    entities:
      - light.soggiorno_principale
      - light.soggiorno_lampada
      - light.soggiorno_led
  deviceID:
    - <browser_id>

type: button
entity: climate.termostato_soggiorno
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      title: "Controllo Clima"
      content:
        type: thermostat
        entity: climate.termostato_soggiorno
      large: true

service: media_player.play_media
target:
  entity_id: media_player.browser_tablet_cucina
data:
  media_content_type: "video/youtube"
  media_content_id: "dQw4w9WgXcQ"

service: tts.google_translate_say
target:
  entity_id: media_player.browser_tablet_ingresso
data:
  message: "Qualcuno ha suonato alla porta"

automation:
  - alias: "Spegni tablet cucina dopo 5 minuti inattività"
    trigger:
      - platform: state
        entity_id: binary_sensor.browser_tablet_cucina_motion
        to: "off"
        for: "00:05:00"
    action:
      - service: light.turn_off
        target:
          entity_id: light.browser_tablet_cucina_screen

automation:
  - alias: "Allarme attivato - popup tutti i browser"
    trigger:
      - platform: state
        entity_id: alarm_control_panel.casa
        to: "triggered"
    action:
      - service: browser_mod.popup
        data:
          title: "⚠️ ALLARME ATTIVATO"
          content: "Rilevata intrusione. Contattare le autorità."
          size: wide

automation:
  - alias: "Dashboard notturna tablet camera"
    trigger:
      - platform: time
        at: "22:00:00"
    action:
      - service: browser_mod.navigate
        target:
          entity_id: media_player.browser_tablet_camera
        data:
          path: "/lovelace-night"

browser_mod:
  devices:
    tablet_cucina:
      disable:
        - sidebar
        - header
      default_page: /lovelace-kitchen