More specific settings browser tab (document) titles

[chen-ye]

Describe the enhancement

I made a quick and dirty userscript to give my Home Assistant settings tabs more specific titles (see below)

I would love for this to be an official feature.

Use cases

When authoring automations for example, there are many cases where I have multiple tabs open to multiple items within settings--the automation trace, the automation editor itself, a relevant script, a device/entity view, etc. Having more specific titles really helps disambiguate these many tabs.

Visual examples

Before:

After:

Anything else?

Here's the userscript:

// ==UserScript==
// @name         Home Assistant Settings Title
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Sets the Home Assistant title to a more specific name within Settings (config/hassio).
// @author       Chen Ye
// @match        https://{home assistant endpoint}/config/*
// @match        https://{home assistant endpoint}/hassio/*
// @grant        none
// @run-at       document-idle
// ==/UserScript==

(async function() {
    'use strict';

    const { querySelectorDeep } = await import('https://cdn.jsdelivr.net/npm/query-selector-shadow-dom@1.0.1/+esm');

    let debounceTimer;

    /**
     * Finds the active conversation title and updates the browser tab title.
     */
    function updateTitle() {
        // This selector finds the nav item that is marked as the "current page"
        // and then gets the title element within it.
        const selectors = ['.main-title', 'ha-tab[active] .name', 'hass-subpage .title h1'];
        for (const selector of selectors) {
            const titleElement = querySelectorDeep(selector);

            if (titleElement && titleElement.textContent) {
                const newSubTitle = titleElement.textContent.trim();
                const newTitle = `${newSubTitle} – Home Assistant`;

                // Only update the title if it's new and not empty.
                if (newSubTitle && document.title !== newTitle) {
                    document.title = newTitle;
                    break;
                }
            }
        }
    }

    /**
     * A debounced version of updateTitle.
     * Switching chats can cause many DOM mutations, so we wait for them
     * to settle before checking the title.
     */
    function debouncedUpdateTitle() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(updateTitle, 250); // 250ms delay
    }

    // We use a MutationObserver to watch for any changes to the document.
    const observer = new MutationObserver(debouncedUpdateTitle);

    // We observe the entire body for:
    // - childList: nodes being added or removed
    // - subtree: changes deep within the DOM
    // - characterData: text changes (like when renaming a chat)
    const config = {
        childList: true,
        subtree: true,
        characterData: true
    };

    // Start observing the document body.
    // We use document.body because we can't be sure a more specific
    // container element won't be replaced by the app's framework.
    observer.observe(document, config);

    // Run the function once at the start,
    // in case the page loads directly into an existing chat.
    debouncedUpdateTitle();

})();

Happy to try to author this change myself, if I could get some pointers as to how the app router/title system works.

[AnodeCathode]

Curious how you implement this? Would love to have this feature in my own instance(s)

[azizLIGHT]

This is not something you modify on your instance, it is something you do in your browser to act on your instance. You install a browser extension like Tampermonkey or Violentmonkey or Greasemonkey or equivalent from your browser's extension store. Whichever one you get will be your userscript manager where you create a new blank userscript. Then copy paste the above userscript in there and modify the two @match lines to where your instance is. For me it's:

// @match        http://192.168.0.2:8123/config/*
// @match        http://192.168.0.2:8123/hassio/*

Save the userscript and then reload your home assistant pages and you should see some new slightly more descriptive tab titles. If you like it, and want it on other browsers, you'll have to get userscript managers there too and paste the above userscript in every single place. So it would be nice to have this integrated into Home Assistant directly so we don't have to rely on a userscript.

[stonedsquirrel]

+1
I frequently use multiple tabs when messing with my Home Assistant. I have e.g. opened Automations, Helpers, Integrations or Logs for cross referencing, and they are all titled "Settings - Home Assistant" in the tab bar. Makes it hard to navigate.

[renarena]

related to https://github.com/orgs/home-assistant/discussions/2604

[AllardKatan]

Nice! Would love to see this improved from the side of HA instead of browser.