šŸ”¹ Browser_mod - turn your browser into a controllable device, and a media_player

Thanks a LOT Darryn for your efforts! :bowing_man:

2 Likes

:mega: Browser Mod 2.7.1 released :mega:

Browser Mod 2.7.1 released.

This release address adds a configurable cameras resolution as a Frontend setting, as well as fixing up Frontend settings tables not showing for some users in some circumstances. The ultimate fix here being to stop using ha-data-table and its underlyng vritualizer which was problematic when used in expanders. You will now see a slight pause on opening Frontend settings expanders as the final table render is delayed until expander is opened.

2 Likes

Is there any known reason why browser mod popups wouldn’t be working in 2026.2.0bx? My beta instance is almost identical to my prod instance and using the same script it works in 2026.1.x but not even a blink or an error in 2026.2.0bx.

All working fine for me ith 2026.2.0b2. Perhaps Browser ID? What does your script look like?

No browser id used, still haven’t figured that out quite yet. This is the script that I first noticed with, but I have others that also are not working. Weird thing is that the traces shows everything as having gone off successfully, just no actual popup. This is called via a tap action from the UI on a badge.

script:
  popup_weather_multi_alerts_info:
    sequence:
      - variables:
          grey_colour: *grey_colour
          yellow_colour: *yellow_colour
          orange_colour: *orange_colour
          red_colour: *red_colour
      - action: browser_mod.popup
        data:
          dismissable: true
          initial_style: wide
          popup_styles:
            - style: centered
              include_styles:
                - wide
              styles: |
                ha-dialog {
                  --vertical-align-dialog: center !important;
                }
          content:
            type: markdown
            content: |
              # {{ states('sensor.environment_canada_multi_alerts') }}
              {% if states('sensor.active_weather_alerts') in ['0', 'unavailable', 'unknown'] %}
                {{ state_attr('sensor.environment_canada_multi_alerts', 'sections') }}
              {% else %}
                {% for section in state_attr('sensor.environment_canada_multi_alerts', 'sections') %}
                {% set colour_code = red_colour if section is search('<h2.*?>red', true) else
                                      orange_colour if section is search('<h2.*?>orange', true) else
                                      yellow_colour if section is search('<h2.*?>yellow', true) else
                                      grey_colour %}
                {{ section
                      |regex_replace('<strong>(In effect for:)<\/strong>',
                                      '<span>\\1</span>')
                      |regex_replace('(<strong>)(.*?)(<\/strong>)',
                                      '\\1<font color='~colour_code~'>\\2</font>\\3')
                      |regex_replace('(<h2.*?">)(.*?)(<\/h2>)',
                                      '\\1<font color='~colour_code~'>\\2</font>\\3') }}
                {{ '<hr/>' if not loop.last }}
                {% endfor %}
              {% endif %}
            text_only: true
            card_mod:
              style:
                ha-markdown $: |
                  span {
                    font-weight: bold;
                  }
                  p {
                    font-size: 1.2em;
                  }
          card_mod:
            style:
              ha-dialog$: |
                div.mdc-dialog div.mdc-dialog__scrim {
                  backdrop-filter: blur(5px);
                }
                div.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
                  background: rgba(0, 0, 0, 0.6);
                  border-style: solid;
                  border-color: rgba(255, 255, 255, 0.1);
                  border-width: 1px;
                }

And yes I know I have to fix the last card mod style.

The ā€˜#’ here will be treated as a literal string, and not commenting out this line like you may expect. If you wish to comment this out in the template use Jinja coments {# #}.

LOL, it’s a markdown heading :wink:

Of course. :man_facepalming: My bad. I was looking for what might be different.

No idea why any difference.

Chcecked your script and it runs fine for me with 2026.2.0b2. Of course I get no content but the template is spitting out ā€˜unknown’ as the header and ā€˜None’ as text. All styling working as expected.

Perhaps to check out where it might be failing, start with a fresh reload of Browser, run script, and check whether <browser-mod-popup> shows under <home-assistant> shadowRoot.

Next you can set in console window.browser_mod_log = true to log Browser Mod activity to see whether the call comes through from backend. Should be like below for your script…

09:32:34 Command: 
{command: 'popup', dismissable: true, initial_style: 'wide', popup_styles: Array(1), 
...

Just did a quicky of those and got no <browser-mod-popup> under the <home-assistant> shadowRoot and then no output from window.browser_mod_log = true in console. I’m out of time now but will try again later.

Just to be sure I start this off right what exactly do you mean by ā€œa fresh reload of Browserā€? I’ll update when I have time.

Just load page so no dialogs have been loaded as Home Assistant dialog manager (which popups use) will keep dialog elements to be reused. That way you can tell if the dialog has been created but not shown for some reason.

:mega: Browser Mod 2.7.2-beta.1 :mega:

Browser Mod 2.7.2-beta.1 is available and most noteable fixes an issue with Home Assistant 2026.2.0(b3) where popup dialog surface will be transparent.

2.7.2 will be released tomorrow in line with Home Assistant 2026.2.0


  • Fix transparent dialog surface with Home Assistant 2026.2.0
  • Update mobile dialog size to be 100vw minus safe areas
  • Update dialog width for viewport between 560 to 600
1 Like

You know, I’ve done this dozens of times yet 1 in 3 bites me in the ass. I don’t know why but whenever I create a second instance of HA and restore from a backup that new instance assigns a different browser id despite it being the same browser, this is a good thing. But it does mean that I have to remember to register the dam browser before Browser Mod will work.

Sorry for wasting your time on a brain fart, all is working good now.

1 Like

:mega: Browser Mod 2.7.2 Released :mega:

Browser Mod 2.7.2 Released. Importantly, 2.7.2 fixes an issue with Home Assistant 2026.2.0 where popups would have a transparent dialog surface.

2 Likes

Updated just now! :bowing_man:

1 Like

Hi everyone, I have just updated Core to 2026.2 and Browser mod to latest, the changes on browser mod popup, even if now browser mod is much more powerful, are so annoying…
does it means that on custom size popups I have to check all my popup’ styles? I have about 10 popups on tablet, that did work also on mobile pretty well. Now they are badly sized and formatted… :frowning:

I’ve checked the new documentation, I can’t find a step-by-step guide to convert my previous popup style, can someone please explain, do I have to stop using card-mod?

action: fire-dom-event
browser_mod:
  service: browser_mod.popup

  data:
    hide_header: true
    card_mod:
      style: |
        ha-dialog {
          --mdc-dialog-min-width: 70vW !important;
          --mdc-dialog-max-width: 90vw !important;
          --mdc-dialog-min-height: auto !important;
          --mdc-dialog-max-height: 90vh !important;
          padding: 0 !important;
          margin: 0 !important;
        }
        .content {
          width: 100% !important;
          height: 100% !important;      
          padding: 0 !important;
          margin: 0 !important;
        }
        ha-card {
          box-shadow: none !important;
          border: none !important;
          height: 100% !important;        
        }
        @media (max-width: 768px) {
          ha-dialog {
            --mdc-dialog-min-width: 95vw !important;
            --mdc-dialog-min-height: auto !important;
          }
        }

EDIT: clear cache at the moment fixed the appearance

There sholud be no need for changes. What version did you updgrade from before now? What specifically is not working as expected - perhaps a screenshot pointing out what is not working as expected.

For some time, I have the problem on iPad, that after each HA restart, the media queries on Companion app are not taken into account anymore. I have to clear companion cache and then it is working again


tap_action:
  action: fire-dom-event
  browser_mod:
    service: browser_mod.popup
    data:
      allow_nested_more_info: true
      title: Licht
      style: |
        ha-dialog {
          --vertical-align-dialog: center;
          --dialog-surface-margin-top: 0px;
          scrollbar-color: #2e2e2e transparent;
          scrollbar-width: 1px;              
        }
        @media (min-width: 812px) {
          ha-dialog {
            --popup-min-width: 90vw;              
            --popup-max-width: 90vw;
          }
        }
        @media (min-width: 1400px) {
          ha-dialog {
            --popup-min-width: 75vw;                            
            --popup-max-width: 1500px;
          }
        }
        ha-dialog > ha-dialog-header {
          margin-bottom: -20px !important;
        }      

HA 2026.1, newest stable browsermod, but same problem with versions from HA and browsermod before.

Known issue or some change, I didn’t adjusted yet?

No idea on this one. Not sure how caching can affect media queries.

To confirm, no known issues known and no changes I can think of that would affect media queries. They should just work.

Same. Don’t understand it at all. Both in the example are not taken into account then and the normal width is displayed instead. Perhaps it is not the query, but that variable is not set or used after reboot of HA. Cannot check in ipad companion as would do on desktop. I will test some more things.