如何在Chrome控制台及TamperMonkey中调用Home Assistant的fireEvent函数？

问题描述 #

在Home Assistant用户资料页（示例地址：https://demo.home-assistant.io/#/profile/general）通过单选按钮切换主题时，系统会调用fireEvent函数（对应源码：https://github.com/home-assistant/frontend/blob/dev/src/common/dom/fire_event.ts#L57，调用位置：https://github.com/home-assistant/frontend/blob/dev/src/panels/profile/ha-pick-theme-row.ts#L180）。我尝试在浏览器控制台执行代码fireEvent(this, "settheme", { dark: true });时，出现错误：VM1775:1 Uncaught ReferenceError: fireEvent is not defined。希望了解如何访问该函数，后续将在TamperMonkey脚本中调用它。

相关源码片段：

• fire_event.ts部分代码：

declare global {
  // eslint-disable-next-line
  interface HASSDomEvents {}
}

export type ValidHassDomEvent = keyof HASSDomEvents;
  ...

export const fireEvent = <HassEvent extends ValidHassDomEvent>(
  ...

• ha-pick-theme-row.ts部分代码：

import { fireEvent } from "../../common/dom/fire_event";

解决方案 #

Home Assistant前端采用模块化构建，fireEvent是内部导出函数，未挂载到全局对象，因此直接调用会报错。可通过以下两种方式解决：

1. 手动实现等效逻辑

fireEvent核心是封装DOM自定义事件触发，自己实现一个完全等效的函数即可，稳定性最高：

function fireEvent(element, eventName, detail) {
  const event = new CustomEvent(eventName, {
    bubbles: true,
    cancelable: true,
    detail: detail,
    composed: true // 确保事件穿透Shadow DOM
  });
  element.dispatchEvent(event);
}

调用示例（切换深色主题）：

const hassRoot = document.querySelector("ha-app");
fireEvent(hassRoot, "settheme", { dark: true });

2. 从内部模块获取官方实现

依赖Home Assistant前端暴露的内部对象，可直接获取官方函数，但可能随版本更新失效：

// 动态导入模块获取fireEvent
const { fireEvent } = await import("/src/common/dom/fire_event.ts");
const hassRoot = document.querySelector("ha-app");
fireEvent(hassRoot, "settheme", { dark: true });

TamperMonkey脚本示例 #

// ==UserScript==
// @name         Home Assistant 主题切换脚本
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  自动切换Home Assistant主题
// @match        https://你的HA地址/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function fireEvent(element, eventName, detail) {
        const event = new CustomEvent(eventName, {
            bubbles: true,
            cancelable: true,
            detail: detail,
            composed: true
        });
        element.dispatchEvent(event);
    }

    // 切换到深色主题
    function switchToDarkTheme() {
        const hassRoot = document.querySelector("ha-app");
        if (hassRoot) {
            fireEvent(hassRoot, "settheme", { dark: true });
        }
    }

    // 页面加载完成后执行
    window.addEventListener('load', () => {
        setTimeout(switchToDarkTheme, 1000); // 延迟确保元素加载完成
    });
})();

内容的提问来源于stack exchange，提问作者LA_