Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How do I call a javascript function from Google Chrome Dev console?

When I change the theme of Home Assistant (by clicking radio button at user’s profile, demo), it calls fireEvent, if I read the source correctly.

I would like to call it from the browser’s console, but if I do

fireEvent(this, "settheme", { dark: true });

I get

VM1775:1 Uncaught ReferenceError: fireEvent is not defined
    at <anonymous>:1:1

How can I access this function? Later I will call this function from the TamperMonkey script.

The following code is used in JS files:

https://raw.githubusercontent.com/home-assistant/frontend/20240906.0/src/common/dom/fire_event.ts:

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

export type ValidHassDomEvent = keyof HASSDomEvents;
  ...

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

https://raw.githubusercontent.com/home-assistant/frontend/20240906.0/src/panels/profile/ha-pick-theme-row.ts:

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

The Dev tools shows also the following info:
enter image description here

Tags:

2

Answers


  1. 0

    The function should exist within in the ‘global’ scope, in a browser that’s window. So temporarily adding fireEvent to the window scope within the [ha-pick-theme-row.ts I suppose] script should do the trick.

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

    After the page is loaded, fireEvent or window.fireEvent should be available in the developer console.

    Login or Signup to reply.
  2. 0

    The GitHub link you’ve provided points to a TypeScript file. TypeScript cant run in browsers so you’ll need to transpile it to JavaScript first. You’ll also need to remove the "export" declaration for the fireEvent function; the "import" and "export" keywords can only be used in modules.

    Your transpiled code:

        // Polymer legacy event helpers used courtesy of the Polymer project.
    //
    // Copyright (c) 2017 The Polymer Authors. All rights reserved.
    //
    // Redistribution and use in source and binary forms, with or without
    // modification, are permitted provided that the following conditions are
    // met:
    //
    //    * Redistributions of source code must retain the above copyright
    // notice, this list of conditions and the following disclaimer.
    //    * Redistributions in binary form must reproduce the above
    // copyright notice, this list of conditions and the following disclaimer
    // in the documentation and/or other materials provided with the
    // distribution.
    //    * Neither the name of Google Inc. nor the names of its
    // contributors may be used to endorse or promote products derived from
    // this software without specific prior written permission.
    //
    // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
    // "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
    // LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
    // A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
    // OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
    // SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
    // LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
    // DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
    // THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
    // (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
    // OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

    // Define your function:
    const fireEvent = (node, type, detail, options) => {
        options = options || {};
        detail = detail === null || detail === undefined ? {} : detail;
        const event = new Event(type, {
            bubbles: options.bubbles === undefined ? true : options.bubbles,
            cancelable: Boolean(options.cancelable),
            composed: options.composed === undefined ? true : 
            options.composed,
        });
        event.detail = detail;
        node.dispatchEvent(event);
        return event;
    };

    // Call your function:
    fireEvent(this, "settheme", { True });

    You can then save the above into your browsers developer tools, under Sources > Snippets > New snippet. (Dev Tools Snippets).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search