How To Setup Browser Mod 2.0 in Home Assistant

Browser Mod recently received a major overhaul and has been rewritten completely from the ground up. This update makes it more stable, less resource intensive, easier to setup and introduced some new features. In this beginner friendly tutorial, we are going to integrate Browser Mod 2.0 in Home Assistant, set it up with examples and explain its capabilities. You can install Browser Mod 2.0 manually or from the Home Assistant Community Store (HACS).

Installation

HACS

  • Open HACS
  • Click + Explore and Download Repositories
  • Under Integrations, search for Browser Mod
  • Select the latest version
  • Click on Download
  • Restart Home Assistant
  • Open Settings > Devices & Services > click + Add Integration
  • Search for Browser Mod and add it

Manual

  • Download the browser_mod folder from the github repo
  • Copy the contents of custom_components/browser_mod/ to <your config dir>/custom_components/browser_mod/
  • Restart Home Assistant
  • Open Settings > Devices & Services > click + Add Integration
  • Search for Browser Mod and add it

Migrating from Browser Mod 1.0 to 2.0

Updating Browser Mod from version 1.xx to 2.xx will break your existing setup and service calls. The dev rewrote the integration completely, rendering the 1.xx version obsolete. However, Browser Mod 2.0 is more powerful and versatile, much lighter on your servers resources and includes a easy to use UI for most settings.

In order to upgrade, you need to install Browser Mod 2.0 and adjust your existing service calls accordingly. For example, to adjust the popup service call:

action: fire-dom-event browser_mod: command: popup title: Title card: type: .... #BROWSER MOD 1.0
Code language: YAML (yaml)
action: fire-dom-event browser_mod: service: browser_mod.popup data: title: Title content: type: ... #BROWSER MOD 2.0
Code language: YAML (yaml)

The rest of the features and service calls you can follow through from this tutorial or the Github repository.

Features

Existing users already know the capabilities of this great integration. It was developed by thomasloven with the purpose or turning any browser into a controllable entity in Home Assistant, specifically as a media_player. Eventually it developed into a full feature set, with many useful settings. For easier understanding, these can be split in two categories: Browser Control and Frontend Settings. Another great side feature is the popup card and popup service call, which is used to replace the more-info dialog window for a specific entity or create a custom popup on any device with a BrowserID.

Browser Control

Once a browser is registered in Browser Mod, it will create a Home Assistant Device associated with that browser, with a unique BrowserID and add entities which can be used to control the added browser, read its sensor values or fire some automations.

To register a browser, open your Home Assistant instance in the browser you wish to integrate. Click the Browser Mod item from the sidebar menu:

You will notice a toggle at the top, labeled Register. Before toggling this on, you can set a custom Browser ID for this particular browser, in our case, work-chrome. You can also toggle the Enable camera setting, if your device has a camera browser mod can utilize (eg. tablet). After the browser has been registered, we need to clear the cache for browser mod to enable the available sensors and entities. You can do this quickly by pressing CTRL + F5 on Chrome Windows. For clearing cache on other devices and operating systems, see this guide.

Once the page has refreshed, you will notice your browser is listed under Registered Browsers. If you are using Home Assistant Cast to display a Lovelace view on a Chromecast device it will get a BrowserID of “CAST“. Since you can’t access the Browser Mod config panel from the device, clicking the Register Cast Browser button will register the CAST browser. Most Browser Mod services will work under Home Assistant Cast.

If you click the small settings icon next to it, it will take you to the page containing all the available entities.

Advertisement
  • media_player: Used to play sound and video through the browser
  • light: Used to turn off/on the screen of the device
    • If you are using Fully Kiosk Browser, the light entity can also control the screen brightness
    • If you are not using Fully Kiosk Browser, the turn off toggle will cover the screen with a black (or semitransparent) box
  • binary_sensor:
    • Motion detection by moving a mouse or pressing button on a keyboard
      • If you are using Fully Kiosk Browser, motion can be detected through the devices camera (eg. tablet)
    • dark_mode: Is the browser using dark mode or not
    • fully_kiosk: Is the browser Fully Kiosk Browser or not
  • camera: If you device has a camera (eg. tablet), it will be controllable with this entity
  • sensor:
    • height: The resolution height of the browser
    • width: The resolution width of the browser
    • browser_path: The current URL of the browser
    • browser_user: Logged in HA user in the browser
    • browser_useragent: Browser software
    • browser_visibility: Whether or not the browser is viewing a HA page/dashboard

You can use the media_player entity to cast audio or video to the devices directly from Home Assistant. The light entity is especially useful, as it can toggle the screen on/off, preferably with an automation when no motion is detected. The camera entity can provide video feedback from the device, so you can use it as a security camera if needed. The sensor and binary_sensor entities provide various information about the device, which can be also used in automations as conditions.

Frontend Settings

In version 2.0, Browser Mod introduced an easy to use UI for changing the default behavior of the Home Assistant Frontend. This is a set of features, which can be used to configure how Home Assistant looks for a specific user or device (browser). Most settings are pretty self explanatory and easy to adjust:

  • Title template: Used to change the tab/window title in a browser. Supports Jinja templating
  • Favicon template: Used to change the browser favicon. Support Jinja templating
  • Hide sidebar: Used to hide the sidebar
  • Hide header: Used to hide the header
  • Default dashboard: Used to set a default dashboard
  • Sidebar order: Used to rearrange the sidebar
  • Sidebar title: Used to set the sidebar title. Supports Jinja templating

Each of these frontend settings can be configured for a specific user, device or globally. For example, let’s say I want to hide the sidebar and header for a particular browser (work-chrome):

  • Expand the Hide Sidebar setting
  • Click + Add Browser Setting
  • Select your browser and click next
  • Toggle the Hide Sidebar option and click OK

If we repeat the same simple steps for the header also, whenever this particular browser opens any Home Assistant dashboard the sidebar and header will be hidden.

For the Title and Sidebar title, jinja templates can be used for dynamic content to be shown. For example, you could set a template to show current notifications count:

My Home - {{ states.persistent_notification | list | count}}
Code language: YAML (yaml)

The Favicon field also supports templating and will replace the browser tab/window icon at the top. Icons should be in .ico or .png format and uploaded to your config/www folder.

{% if is_state("light.living_room", "on") %} /local/smarthomescene-orange.ico {% else %} /local/smarthomescene-green.ico {% endif %}
Code language: YAML (yaml)

Perhaps one of the most useful features of Browser Mod is the ability to change the popup more-info dialog window of any entity. This can be used to create a custom card and have it shown whenever you call for the more-info window for that particular entity, whether through the dashboard or through a service call.

For example, lets say you have a light entity on your dashboard. When held, normally it would open the standard more-info dialog window but you want it to open a list of other light entities for quick toggling.

  • Open your dashboard, click the three dots in the top corner and click Edit dashboard
  • Press + Add Card and create the following card
type: custom:popup-card entity: light.kitchen card: type: vertical-stack cards: - type: custom:mushroom-light-card entity: light.dome_lights - type: custom:mushroom-light-card entity: light.door_light - type: custom:mushroom-light-card entity: light.dining_room
Code language: YAML (yaml)

This will create an invisible card in your dashboard view, which will be accessible only in edit mode. When held, instead of the normal more-info dialog window, it will show the list of entities we placed in the vertical stack. You can edit the cards within the vertical stack like you normally would in your dashboard.

The custom popup card can be heavily customized and adjusted for your dashboard.

Services

Browser Mod comes packed with a variety of services used to supercharge its functionality. Service calls are usually used in scripts, automations or dashboard actions. The dev defines two types of services for browser mod 2.0: server call and browser call.

  • Server call is used when a specific service is called from a script or automation, from the dev-services panel or from a dashboard call-service action.
  • Browser call is used when the service is called from a dashboard fire-dom-event action, as a part of a browser_mod.sequence call or as a browser_mod.popup _action.

The notable difference between the two is when no target (browser_id) is specified, in which case:

  • server call will perform the service on ALL REGISTERED BROWSERS.
  • browser call will perform the service on THE CURRENT BROWSER, i.e. the browser it was called from.

browser_mod.navigate

This service is used to navigate the corresponding to browser to a specific path.

service: browser_mod.navigate data: path: /lovelace/ browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

browser_mod.refresh

The refresh service call is simply used to reload the current page shown in the browser.

service: browser_mod.refresh data: browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

browser_mod.more_info

The more_info service call can be used to display a popup more_info dialog window for a specific entity on the browser.

service: browser_mod.more_info data: entity: light.living_room large: false #Optional ignore_popup_card: false #Optional, true/false browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

If a default popup card is set for the specific entity, it will show that instead. You can override this behavior with the ignore_popup_card variable. If you set the large variable to true, the dialog window will be stretched.

browser_mod.popup

The popup service call is highly versatile and adjustable, used to display a customized popup window in the browser. You could create a popup containing a list of entities or cards, html content, form content, actionable popups and adjust size and styling. For a full list of examples, see the official repo: Anatomy of a Popup. As an example, you can service-call a popup window on your browser containing a list of lights and two actionable buttons for turning all of them on/off.

service: browser_mod.popup data: title: Lights content: type: entities entities: - light.kitchen - light.living_room - light.dining_room right_button: All OFF left_button: All ON right_button_action: service: light.turn_off data: entity_id: - light.kitchen - light.living_room - light.dining_room left_button_action: service: light.turn_on data: entity_id: - light.kitchen - light.living_room - light.dining_room
Code language: YAML (yaml)

browser_mod.close_popup

The close_popup service call is used to close a more-info or popup dialog window.

service: browser_mod.close_popup data: browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

browser_mod.notification

This service call is used to show a popup notification and optionally assign an action to it.

service: browser_mod.notification data: message: Hello, World! duration: 5000 action_text: Open Lovelace action: service: browser_mod.navigate data: path: /lovelace/ browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

This will create an actionable notification in the Home Assistant frontend, with a button that will take you to your Lovelace dashboard.

browser_mod.set_theme

Themes can be changed effortlessly with the service call set_theme. You can provide a theme name, or specify primary and accent colors:

service: browser_mod.set_theme data: theme: waves #Optional, theme name dark: auto #Optional, auto, dark, light primaryColor: [0, 128, 128] #Optional, RGB color accentColor: "#800080" #Optional, RGB color
Code language: YAML (yaml)

Color can be either a list of three RGB values 0-255 (ex: [0, 128, 128]) or a six digit hex color value (ex: “#800080”).

browser_mod.sequence

A sequence can be used to fire one service call after another. If the BrowserID is omitted in the succeeding service calls, the sequence will be fired in the browser that’s active. Example:

service: browser_mod.sequence data: sequence: - service: browser_mod.more_info data: entity: light.living_room - service: browser_mod.delay data: time: 12500 #Number in miliseconds - service: browser_mod.close_popup data: browser_id: work-chrome #Replace BrowserID browser_id: work-chrome
Code language: YAML (yaml)

browser_mod.delay

The delay service call is used to wait for a specific period of time before executing another service call. It is most useful when developing more complex sequence service calls

service: browser_mod.delay data: time: 200 #Number in miliseconds browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

browser_mod.console

Console service call is used to print a message to the browsers JavaScript console.

service: browser_mod.console data: message: "Hello, World!" browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

browser_mod.javascript

Used to run arbitrary JavaScript code in the browser

service: browser_mod.javascript data: code: <string> browser_id: work-chrome #Replace BrowserID
Code language: YAML (yaml)

Using Service Calls

We will setup a few service calls to be executed from a dashboard card, script and automation. Hopefully, this will enable users to better understand the capabilities of Browser Mod 2.0.

Example 1: Service Calls from a card

Let’s say you have a light entity on your dashboard. When clicked, you want the light to toggle as usual. But you also like a popup notification announcing the lights’ state on your wall mounted tablet.

type: custom:mushroom-entity-card entity: light.kids_room tap_action: action: fire-dom-event browser_mod: service: browser_mod.sequence data: sequence: - service: light.turn_on data: entity_id: light.kids_room - service: browser_mod.notification data: message: Kids Room Light is on! duration: 10000
Code language: YAML (yaml)

We use a fire-dom-event action, to trigger the popup notification only on the browser in question. We setup the subsequent service calls within a sequence call, to be executed one after another. Additionally, you can add an action button with custom text, for example, to turn the light off.

Example 2: Service Calls from a script

You can setup service calls in a script and execute them from the dashboard. Lets say you want to change the theme on your wall mounted tablet:

alias: Set Tablet Theme sequence: - service: browser_mod.set_theme data: theme: waves browser-id: work-chrome mode: single icon: mdi:palette
Code language: YAML (yaml)

This will create a script.set_table_theme entity which can be added in a dashboard or used in an automation. Executing this script will change the theme for browser with id work-chrome.

Example 2: Service Calls from an automation

You can also execute Browser Mod service calls from automations. Let’s say you want your wall mounted tablet to navigate to a specific dashboard view: one during the day and another during the night. We can streamline this process by creating the following automations:

alias: "Tablet View: Day" description: Change View to Day when the sun rises trigger: - platform: sun event: sunrise action: - service: browser_mod.navigate data: path: /smarthomescene/day browser_id: work-chrome mode: single
Code language: YAML (yaml)
alias: "Tablet View: Night" description: Change View to Night when the sun rises trigger: - platform: sun event: sunset action: - service: browser_mod.navigate data: path: /smarthomescene/night browser_id: work-chrome mode: single
Code language: YAML (yaml)

When the sun rises, the tablet will shift to you day dashboard view, maybe containing some media_player entities and vacuum cleaner map for example. When the sun sets, the tablet will display your night dashboard, containing all your lights.

Advertisement

Summary

Browser Mod 2.0 is a supercharged set of features packed in a custom integration for controlling your Home Assistant server and applicable browsers. If you apply a little logic, many cool things can be achieved. For example, this integration is very useful when controlling a wall mounted tablet. You can fine-tune its operation and besides being a wall mounted dashboard, you can turn it into a security camera and motion sensor.

With version 2.0, the main settings and integration are a streamlined process. Everything can be setup through the easy to use user interface as opposed to YAML in version 1.0. If you have any questions or suggestions, feel free to leave them bellow. Developer thomasloven did an excellent job with this integration and as an intro, he left the following questions in the repository:

  • What if that tablet you have on your wall could open up a live feed from your front door camera when someone rings the bell?
  • And what if you could use it as an extra security camera?
  • Or what if you could use it to play music and videos from your Home Assistant media library?
  • What if you could permanently hide that sidebar from your kids and lock them into a single dashboard?
  • What if you could change the icon of the Home Assistant tab so it doesn’t look the same as the forum?
  • What if you could change the more-info dialog for some entity to a dashboard card of your own design?
  • What if you could tap a button and have Home Assistant ask you which rooms you want the roomba to vacuum?
thomasloven


By visiting the Amazon, AliExpress and Banggood stores through the links above, you are shopping through our affiliate links.
This incurs no additional cost to you and supports smarthomescene.com in the form of sales commission.
SmartHomeScene © 2022 All rights reserved Privacy Policy | Contact Us | Support


By visiting the Amazon, AliExpress and Banggood stores through the links above, you are shopping through our affiliate links. This incurs no additional cost to you and supports smarthomescene.com in the form of sales commission.
SmartHomeScene © 2022 All rights reserved
Privacy Policy | Contact Us | Support

2 thoughts on “How To Setup Browser Mod 2.0 in Home Assistant”

  1. Thanks for this article. I did not know about browser mode even if I’ve ran my home on homeassistant for quite a while. Will definitely check it out!

  2. great WORK boys and girls !

    but : wall mounted tablet i will use – cant use teh camera entity, not showing in HA…

    anyway GREAT WORK BOYS & GIRLS !!!

    THANK YOU

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top