How to create an "always on top Component" for an electron app

Question

I wanted to create a button that is always on top off the operating system and controls funtions in an electron app. I figured out how to do that with the whole app with the alwaysOnTop option, but this is obvoiusly not the solution that I am looking for. Would I have to start a second electron process to achieve something like that? I want it to be connected to the original App, of course. I am a targeting windows and osx and I am using vue with typescript, if that makes a difference.

I managed to start a second process, but it renders the same app in the new windows aswell, like so:

I achieved that by just starting a new window in the background.ts, but I did not figure how to use a different entry point for this new window, even though I am pointing to a different index.html, which I called fab.html. e.g.:

fab = new BrowserWindow({
width: 100,
height: 100,
alwaysOnTop: true,
})

if (process.env.WEBPACK_DEV_SERVER_URL) {
  // Load the url of the dev server if in development mode
  fab.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string)
  if (!process.env.IS_TEST) fab.webContents.openDevTools()
 } else {
  createProtocol('app')
  // Load the index.html when not in development
  fab.loadURL('app://./fab.html')
}

The issues I am having then is, that the main.ts that starts the Vue App does not inject the Vue Stuff, so I can not use my vuex and all the other things I am using. I tried to just import electron and use the ipc stuff from electron to communicate with my actual app, but I can not import ipcmain for some reason and accodring to the documentation, i need ipcmain to send messages to the render process.

This is what it looks like:

<html lang="en">
    <style>
      ...
    </style>

    <body>
        <div id="fabApp" class="hotkeys-inactive fab" onclick="sendToMain();"></div>
    </body>

    <script>
        const { ipcRenderer } = require('electron')

        const fab = document.getElementById("fabApp");

        console.log(fab);
        ipcRenderer.on('fab-clicks', (event, arg) => {
            if (arg === "on") {
                fab.classList.remove("hotkeys-inactive")
                fab.classList.add("hotkeys-active")
                console.log("turn ON")
            } else {
                fab.classList.add("hotkeys-inactive")
                fab.classList.remove("hotkeys-active")
                console.log("turn OFF")
            }
        })

        function sendToMain() {
            ipcRenderer.send('fab-clicks', 'clicked');
            console.log(`sent`)
        }
    </script>

</html>

Appart that it is not working, I would also just like to use vue, not do all this native js stuff here :/ Seems pretty hacky and all.

I want to run a different App there, basically just a button. But in this config, I just render the whole app twice. What I would need is, to render a different vue entry point in another index.html. I managed to run a "fab.html" in a second BrowserWindow, but then I do not have access to electron, my node_modules or the rest of my app (like vuex and stuff). Here is the repo if you want to see how I mean it. It feels super hacky and also does not work ^^ github.com/w3champions/w3champions-launcher/tree/hotkey-fab — modmoto

farincz farincz · Accepted Answer · 2020-11-25T08:24:20

Open child window with different endpoint (you did it already) And then use messages to get/update vuex store

In parent window, use postMessage

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

you can combine it with eg with component's watch method bound to value from vuex

and listen for it in child

window.addEventListener("message", msg => {
   ...
}, false)

How to create an "always on top Component" for an electron app

1 Answers