🔹 A Home Assistant integration to turn your browser into a controllable entity - and also an audio player
A Home Assistant integration to turn your browser into a controllable entity - and also an audio player and a security camera (WIP).
For more usage examples, see the cookbook.
Copy the contents of
Add the following to your
Note: If you want to use browser_mod with Home Assistant Cast, you need to also add:resources: - url: /browser_mod.js type: module
to yourui_lovelace.yaml. Don't worry about where to put browsermod.js, the integration will handle that automatically, and please note that it's not `/local/browsermod.js`.
Here's a fantastic video summary of all
browser_modfunctions by Pinkywafer: Youtube link.
The most important concept of
browser_modis the device.
A device is a machine-browser combination identified by a unique
deviceIDis randomly generated and may look like
In the two latter cases, the last loaded tab/window will be the active one.
Note: Incognito mode will generate a new
deviceIDand thus a new device every time it's started.
Since the deviceID can be a bit hard to remember for devices you use often, you can specify an alias in
browser_mod: devices: 99980b13-dabc9563: name: arrakis d2fc860c-16379d23: name: dashboard
This binds the aliases
Note: Aliases must be unique.
You can change the deviceID of your device by adding a
browser-playercard to your lovelace interface and clicking the deviceID at the bottom of the card. Set it to
clearto generate a new random one.
You can also set a deviceID by adding
?deviceID=mydeviceIDto the end of the URL you're using to access Home Assistant. Be careful - I have no idea what could happen if several devices were to have the same ID. Use
?deviceID=clearto generate a new random one.
Take care to avoid deviceID collissions. There's no telling what could happen if more devices share the same ID.
You can add a custom prefix to all entity ids in
E.g. to give entities default names like
yaml browser_mod: prefix: "browser_"This does not apply to devices with an alias.
browser_modcreates a number of entities, which is explained below. In some cases, you may not want to do that. If so, add a list of entity types you do not want to add to a
disablesection, either for each device, or globally to ignore for all unknown devices:
E.g. to disable the
media_playerfor the device aliased to
arrakis, AND disable all entities for all devices which don't have an alias:
browser_mod: devices: 99980b13-dabc9563: name: arrakis disable: - light - media_player disable: - all
browser_modis installed, loading up your Home Assistant frontend on a new device will create three to five new devices.
deviceIDof the device but with the dash (
-) replaced by an underscore (
_). If you've defined an alias, it will be that instead.
Connecting your phone with
deviceID: ded3b4dc-abedd098will create the entities
deviceID: 99980b13-dabc9563will create the entities
sensorwill display the number of connected views (tabs/windows) of the device. Note that using multiple view isn't really recommended, and any action targeting a device will happen in the last loaded view.
The sensor also has the following attributes:
| attribute | content | | --- | --- | |
last_seen| The time when the device was last seen | |
deviceID| The deviceID of the device. | |
path| The currently displayed path on the device. | |
visibility| Whether the frontend is currently visible on the device. | |
userAgent| The User Agent of the associated browser. | |
currentUser| The user currently logged in on the device. | |
fullyKiosk| True if the device is a Fully Kiosk browser. Undefined otherwise. | |
width| The current width of the browser window in pixels. | |
height| The current height of the browser window in pixels. | |
battery_level| The current battery level of your device - if supported | |
charging| The current charging state of your device - if supported |
media_playercan be used to play sounds on the device.
NOTE: Because Apple is Apple; on iOS you need to touch the screen once after loading the frontend before any playback will work.
lightcan be used to blackout the screen. For Fully Kiosk Browser, the screen will actually turn off. For other browsers, the interface will just be covered with black (the screen is still on, will have a visible glow in the dark, and you won't save any battery).
For security and UX reasons, the camera must be enabled manually on a device by device basis.
Enabling the camera is done by adding
camera: trueto the devices configuration in
yaml browser_mod: devices: 99980b13-dabc9563: name: arrakis camera: true d2fc860c-16379d23: name: dashboardAfter restarting Home Assistant (and clearing cache), the next time you load your interface your browser will ask you if you want Home Assistant to be able to access your camera. Some browsers (e.g. mobile Safari) will ask every time you make a hard refresh.
Be aware that keeping the camera on may make your device run hot and drain your battery.
The camera does not work well with Fully Kiosk Browser. If you're using FKB, use the built-in camera functionality instead. It's better in every way.
binary_sensorwill only be available for Fully Kiosk Browser PRO devices. It's state will be the state of the camera motion detector of the device (5 second cooldown).
browser_modregisters a number of services.
All service calls have one parameter in common;
deviceIDwhich is a list of devices to execute the comand on. If
deviceIDis omitted, the command will be executed on all currently connected devices.
deviceIDmay also contain aliases.
You can also activate any service from the frontend by using the
service: browser_mod.set_theme data: theme: clear_light
will set the current theme to
clear_lighton all devices.
service: browser_mod.navigate data: navigation_path: /lovelace/1 deviceID: - ded3b4dc-abedd098
will open your second lovelace view on just the device
navigation_pathdoes not have to be a lovelace path. All paths in Home Assistant works. (E.g.
service: browser_mod.more_info data: entity_id: camera.front_door deviceID: - ded3b4dc-abedd098 - dashboard
will show the more-info dialog of
camera.front_dooron the devices
The optional parameter
large: truewill make the popup wider.
service: browser_mod.toast data: message: Short message
Display a toast notification on all devices. The optional parameter
duration:determines the time (in ms) that the toast is shown. Set to 0 for persistent display. Default is 3000.
service: browser_mod.popup data: title: Popup example card: type: entities entities: - light.bed_light - light.kitchen_lights - light.ceiling_lights deviceID: - this - dashboard
will display the specified
entitiescard as a popup on the current device and on
The optional parameter
large: truewill make the popup wider.
hide_header: truewill hide the header bar and close button.
auto_close: truewill make the popup close automatically when the mouse is moved or a key is pressed on the keyboard. This also removes the header bar.
time:(only useable if
auto_close: trueis also set) will turn the popup into a "screensaver". See the
If card-mod is installed, the popup can be styled by the optional
styleparameter, or by the
will close all more-info dialogs and popups that are open on all connected devices.
service: browser_mod.blackout data: deviceID: this
Will cover the entire window (or screen if in full screen mode) with black on the current device. Moving the mouse, touching the screen or pressing any key will restore the view.
The optional parameter
time:will make the blackout turn on automatically after the specified number of seconds. It works kind of like a screensaver and will keep turning on until
blackoutis called again with
Note: This will not turn off your screen backlight. Most screens will still emit light in a dark room.
Remove a blackout. The optional parameter
brightnesswill set the screen brightness of a device running Fully Kiosk Browser to a value between 0 and 255.
Refreshes the lovelace config. Same as clicking "Refresh" in the top right menu in lovelace.
Forces the browser to reload the page. Same as clicking your browsers refresh button.
service: browser_mod.command data: command:
This can be used to send any command to a device by setting
command:to the service name and appending any other options.
service: browser_mod.command data: command: toast message: Hello World!
service: browser_mod.toast data: message: Hello World!
service: browser_mod.commands data: commands: - command: - command:
This service can be used to call several services listed in the
service: browser_mod.delay data: seconds:
Do nothing forseconds.
To run a command from the frontend, you can use the tapaction
fire-dom-eventwith a `browsermod` parameter.
type: button icon: mdi:star tap_action: action: fire-dom-event browser_mod: command: toast message: Hello, world!
There's also a special command which is only useful from the frontend:
command: call-service: service: service_data:
This works exactly like a
call_servicetapaction, but if `servicedata
contains the parameterdeviceID
and that contains the wordthis`, that will be replaced with the current deviced deviceID. This may be useful for e.g. calling scripts if you want to know from where it was triggered.
To control the playback in the current device,
browser_modincludes a custom lovelace card. Just add
anywhere in your lovelace configuration.
The player card also displays the
entityID. Click it to select, so you can copy it.
If you are using a device running Fully Kiosk Browser (PLUS version only) you will have access to a few more functions.
For this to work you need to activate
Settings->Motion Detection (PLUS)->Enable Visual Motion Detection.
First of all the commands
no-blackoutwill control the devices screen directly.
no-blackoutalso has an optional parameter
brightnessthat can set the screen brightness between 0 and 255.
Second, there are a few more attributes available
| attribute | content | | --- | --- | |
fullyKiosk| True. | |
brightness| The current screen brightness. | |
battery_level| The current charge percentage of the devices battery. | |
charging| Whether the battery is currently charging. | |
motion| Whether the devices camera has detected any motion in the last five seconds. |
With browser_mod, you can replace any more-info dialog with any lovelace card you choose yourself. This can be done either per lovelace view, or globally (even outside of lovelace).
The replacement is included in your lovelace or lovelace view configuration, and the syntax is exactly like the
popupservice, except you can't use
yaml views: - title: Home view icon: mdi:house popup_cards: light.ceiling_light: title: My popup card: type: entities entities: - light.ceiling_light_bulb1 - light.ceiling_light_bulb2 - light.ceiling_light_bulb3 - light.ceiling_light_bulb4
This would show an entities card with four bulbs any time the more-info dialog for
light.ceiling_lightwould normally be shown when you're on the Home view in lovelace.
title: My home resources: - url: /local/card-mod.js type: module popup_cards: sensor.sensor1: title: First sensor card: type: gauge entity: sensor.sensor1 sensor.sensor2: title: Second sensor card: type: gauge entity: sensor.sensor2
This would replace the more-info dialogs of
sensor.sensor2anywhere in your interface. Even outside of lovelace - be careful about that.
The easiest way is to go to
/developer-tools/serviceand call the
But you can also find the device id on the
browser-playercard, if you added one to your lovelace config.
An alternative way is to type
localStorage["lovelace-player-device-id"]into your browsers console.
browser_moddoes the same things as both of those, but better.
browser_moduses a service for executing commands rather than events, the commands can be easily triggered by any lovelace element which has a
tap_actionsetting. This actually means it pretty much replaces
browser_moduses websockets to get immediate feedback from the device to the backend and much better tracking of disconnects.
browser_modworks outside of
Yes. You need the paid version, btw.
No*. The device is stored in your browsers localStorage - a data store which is sandboxed only to Home Assistant. That means only Home Assistant can access it. Furthermore, different Home Assistant installations cannot acces each others localStorage.
Some of my lovelace plugins use the device to do different things for different devices.
*There is one exception. If you are using Fully Kiosk Browser, the deviceID is taken from the browser instead of being randomly generated. This deviceID will be the same for each website that asks for it.
This seems to be a problem with Android, and not much to do about it. As a workaround you can add the following to your configuration:
browser_mod: devices: d2fc860c-16379d23: # DeviceID of your FKB device force_stay_awake: true
That will make the screen turn on and off again for a second regularly to stop the five minute timer from running out.