#StackBounty: #vue.js #electron How to create an "always on top Component" for an electron app

Bounty: 100

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:

enter image description here

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.