🔹 Browser_mod - turn your browser into a controllable device, and a media_player

smartmatic · January 7, 2025, 5:05pm

I am new with Browser Mod and try to add a Button to PopUp but doesn’t work

action: browser_mod.popup
data:
  browser_id:
    - be0f884a9453ba6bf097ad840b66ab2c
  right_button: Licht
  content:
    type: entities
    entities:
      - light.wiz_rgbw_tunable_4051da
  right_button_action:
    action: light.turn_on
    data:
      entity_id: light.wiz_rgbw_tunable_4051da

The PopUp appears but the button does work.
What i am doing wrong?

Edit: Replaced action: light.turn on with service: light.turn_on and it works. So the former service calls are not adapted to action calls in Browser Mod?

HappyCadaver · January 7, 2025, 5:10pm

Sweet, thanks for the info.

MrNorth45 · January 7, 2025, 5:41pm

MrNorth45:

Hi there! I have spent the past hours trying to animate my popup cards. I dont want them just to appear in the middle of the screen, but rather fill screen, slide in from the right and stop at about 20% from the left. I got it working quite easily using css animations… BUT. There is something wierd about the popup card. First I thought it was the animations, but now I can see the issue even with the most basic example. It ALWAYS work the first time I summon the popup. Then I close it, and summon it again, then there is a quick “flicker” in the middle of the screen. It is there even without animations, and it looks way worse with the animation enabled, because then the center of the screen is empty, and the popup card appears and disappears for like 0.1 second before it slides in as it should. I disabled the animations and it is the same.

Has anyone seen this? Is there a way to solve it? Here is the code I use, a most basic example. You have to tap the button a few times before it start acting wierd.
  tap_action:
    action: fire-dom-event
    browser_mod:
      service: browser_mod.popup
      data:
        title: 'My title '
        card_mod:
          style:                              
            ha-dialog$: >                                
              div.mdc-dialog__surface  {                                
                animation: slide-in 2.3s forwards;
              }                           
              @keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }

Just to let you know, I gave up on browser-mod and ended up using bubble card pop-up. Works like a charm.

cloudbr34k · January 8, 2025, 9:45am

My browser mod is still not working on desktop after the update? When I inspect the page it still says the below.

Uncaught (in promise) TypeError: document.createElement(...).getRoutes is not a function

I checked the file and its using _getRoutes?

I have cleared cache, restarted etc. It works on my phone fine, but not browser?

neoraptor123 · January 8, 2025, 9:53am

Hello,

I have 2 questions concerning browser_mod:

Is it possible to fallback to a default page after x min without activity on a specific device?
Is it possible to use a separate dashboard for each device ?

Thanks in advance for your help !

Protoncek · January 8, 2025, 10:53am

Did you clear cache AND scripts? In windows - chrome/edge this is done by pressing F12 (open developer tools) then right-click on refresh icon and select “Empty cache and hard restart”. Just pressing ctrl+F5 usually doesn’t help, since this only clears cache, but not js files etc.

mboarman · January 10, 2025, 6:00pm

So I rolled back my install from 2025.1.1 after having some issues with browser_mod and a couple other integrations. I see there is a new update for Browser Mod, I’m still on 2.3.1, however I’m not seeing it on my update list. Do I need to install HA Core 2025.1 for it to appear?? Any thoughts?

Nick4 · January 11, 2025, 11:11am

Yes to both.
TBH, for the first one I don’t have the solution at hand so you’ll have to do some searching on how to determine when a device has no activity for x time.

For the second one: you don’t even need browser_mod for this.
In your profile settings (bottom of the side bar) you can define the default dashboard for that device which is stored in your browser session.

neoraptor123 · January 11, 2025, 3:34pm

Thanks for your answer.
There are indeed functions call available to know when device become inactive:
I followed this post which seems to be working: Switch back to default dashboard after some time - #4 by Ldc2335
I’ll probably end up to make another one to dim/wake the screen based on movement as well.

Thanks for the second point ! I totally forgot that this was available.

briodan · January 12, 2025, 1:56am

has anyone seen issues with browser_mod not reconnecting to HA after an HA reboot? currently need to manually go and refresh the browser for it to reconnect.

marounalkattar · January 12, 2025, 7:04pm

Hello,

I’m trying to use a popup that activates when pressing a button. On my PC/tablet, it works perfectly and displays in three columns. However, on my phone, I want it to display as one column per card because three columns result in awkwardly sized cards. How can I make the popup responsive so it automatically shows three columns on PCs/tablets and one column on phones?
this is the code so far

type: custom:mushroom-entity-card
entity: sensor.brew_door_sensor_battery
grid_options:
  columns: 3
  rows: 1
primary_info: none
secondary_info: none
tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      large: true
      title: CCTV
      size: wide
      auto_close: true
      timeout: 20000
      content:
        type: grid
        cards:
          - entities:
              - binary_sensor.brew_door_sensor_opening
              - entity: sensor.brew_door_sensor_battery
                positions:
                  icon: "off"
                  name: "off"
                entity_row: true
                type: custom:bar-card
              - entity: binary_sensor.brew_door_sensor_battery_plus_low
                name: Status
              - entity: sensor.brew_door_sensor_battery_last_replaced
                name: Last Replaced
              - entity: sensor.brew_door_sensor_battery_type
                name: Type
            title: Chalet Door Sensor Battery
            grid_options:
              rows: auto
              columns: 9
            type: entities
          - entities:
              - binary_sensor.brew_door_sensor_opening
              - entity: sensor.brew_door_sensor_battery
                positions:
                  icon: "off"
                  name: "off"
                entity_row: true
                type: custom:bar-card
              - entity: binary_sensor.brew_door_sensor_battery_plus_low
                name: Status
              - entity: sensor.brew_door_sensor_battery_last_replaced
                name: Last Replaced
              - entity: sensor.brew_door_sensor_battery_type
                name: Type
            title: Chalet Door Sensor Battery
            type: entities
hold_action:
  action: none
double_tap_action:
  action: none
fill_container: true

and this is the result:

Nick4 · January 12, 2025, 8:30pm

John, there is an update of BM that seems to fix your issue.

v2.3.3 - Attempt to avoid caching problems after updates

fmon · January 18, 2025, 12:26am

Simple question apparently not with an easy answer… how do I style the title text of a popup? Literally I just want to change the color, but digging through the shadow DOM and so forth defies me. This is the closest that I’ve gotten, though it only styles the button text:

          card_mod:
            style: |
              ha-dialog {
                --mdc-theme-primary: red;
                --ha-dialog-header-color: red;
              }

danwie · January 24, 2025, 9:41am

How can I register a TLC Google TV in browser_mod? My goal is to use the Dashboard Screen Saver app (Google Play) to show a a Home Assistant Dashboard as a screensaver without needing to login.

basovink · January 29, 2025, 4:35pm

I am trying to get a browser_mod.more_info to work only on the browser where I clicked. it currently pops up on all browsers in the house. I found browser_id: this and deviceID: this but they don’t do anything. Can somebody help me get this working?

type: entity
show_state: true
show_icon: true
entity: sensor.woonkamer_temperatuur
name: Woonkamer
state_content:
  - name
  - state
tap_action:
  action: perform-action
  perform_action: browser_mod.more_info
  target: {}
  data:
    large: false
    ignore_popup_card: false
    entity: climate.woonkamer_thermostaat_2
    deviceID: this
hold_action:
  action: more-info

basovink · January 29, 2025, 8:14pm

Solved it myself

type: heading
icon: mdi:sofa
heading_style: subtitle
heading: Begane grond
badges:
  - type: entity
    show_state: true
    show_icon: true
    entity: sensor.woonkamer_temperatuur
    name: Woonkamer
    state_content:
      - name
      - state
    tap_action:
      action: more-info
      entity: climate.woonkamer_thermostaat_2
      data:
        browser_id: this

gisljohn · February 5, 2025, 6:45pm

I am running the latest 2.3.3 but no sensors are working.
Battery. charging etc.
It will only update battery sensors when the browser is started, but then failes to update over time…
The screen on/off and screen sensor seems to always work.
Am I missing something?

c-kick · February 6, 2025, 2:48pm

I wanted to share a quick CSS addition for browser_mod that I just implemented, which considerably improves the visual attractiveness of blacking out a browser screen.

Create a .css file (I named it browser_mod_extra_css.css) and place this in it:

body > .browser-mod-blackout {
	transition: background .2s ease-in-out;
}
body > .browser-mod-blackout[dark] {
	transition: background 2s ease-in-out;
}

Save it, and store it in your home assistant /www folder.
Then add it as an extra Stylesheet resource (/local/browser_mod_extra_css.css).
Refresh your browser mod device, and try turning off its screen.

Now, the black fades in smoothly instead of a ‘hard cut to black’, and when you ‘wake’ again, it fades out faster (.2s, or 200ms). You can change the durations to whatever you like! (and ofcourse, you can try setting other easing methods)

Froghut · February 7, 2025, 8:38pm

I tried playing TTS audio to the browser via the browser mod created media player, but there’s no output. When I use the “Browse Media” button on the media player popup and select a radio station for example it works, but if I try to play TTS (either via action or via the Browse Media popup) it just stays silent. I can play TTS on my google home speakers, it’s just the browser media player thats not working. Also no errors in HA logs or in the browser dev console. Am I missing something?

skank · February 11, 2025, 4:47pm

I’m having some problems
I have made a picture elements card, and some elements have an icon.
When i press the icon, i want it to toggle a script.
Turning the script on, should show a browser mod popup containing some info (for now a button)

However, i want it to popup where it was launched from… meaning one time from a tablet, the other time from al laptop.
So i think i need the device_id: THIS ?

I tried, but its not doing anything.
Heres my code:

sequence:
  - data:
      browser_id: THIS
      size: normal
      content:
        type: custom:button-card
        show-state: false
        show-name: false
        custom_fields: null
        icon: mdi:sofa
        show_icon: true
        name: Living
      card_mod:
        style:
          ha-dialog$: |
            div.mdc-dialog div.mdc-dialog__scrim {
              background: rgba(28, 28, 28, 0.9);
              secondary-background-color: rgba(0,0,0,0.5);
              ha-card-background: rgba(0,0,0,0.5);
            }  
    action: browser_mod.popup

Whats wrong?