Богатое HTML-меню в трее в настольном веб-приложении

Необходимые элементарные файлы:

• index.html
• main.js
• пакет.json

В index.html вы должны были разработать свое приложение так, как вы хотели, чтобы оно выглядело. В моем примере выше я просто использовал пару полей ввода и стилизовал их с помощью CSS.

В файле main.js вы поместите свой основной код для запуска приложения.

В файле package.json вы размещаете информацию о своем приложении, зависимостях разработчиков и т. д.

Главный файл, с которым вам следует иметь дело, это файл main.js. Ниже приведен пример файла main.js для приложения выше. Я добавил комментарии, чтобы помочь вам понять:

// Sets variables (const)
const {app, BrowserWindow, ipcMain, Tray} = require('electron')
const path = require('path')

const assetsDirectory = path.join(__dirname, 'img')

let tray = undefined
let window = undefined

// Don't show the app in the doc
app.dock.hide()

// Creates tray & window
app.on('ready', () => {
  createTray()
  createWindow()
})

// Quit the app when the window is closed
app.on('window-all-closed', () => {
  app.quit()
})

// Creates tray image & toggles window on click
const createTray = () => {
  tray = new Tray(path.join(assetsDirectory, 'icon.png'))
  tray.on('click', function (event) {
    toggleWindow()
  })
}

  const getWindowPosition = () => {
  const windowBounds = window.getBounds()
  const trayBounds = tray.getBounds()

  // Center window horizontally below the tray icon
  const x = Math.round(trayBounds.x + (trayBounds.width / 2) - (windowBounds.width / 2))

  // Position window 4 pixels vertically below the tray icon
  const y = Math.round(trayBounds.y + trayBounds.height + 3)

  return {x: x, y: y}
}

// Creates window & specifies its values
const createWindow = () => {
  window = new BrowserWindow({
        width: 250,
        height: 310,
        show: false,
        frame: false,
        fullscreenable: false,
        resizable: false,
        transparent: true,
        'node-integration': false
    })
    // This is where the index.html file is loaded into the window
    window.loadURL('file://' + __dirname + '/index.html');

  // Hide the window when it loses focus
  window.on('blur', () => {
    if (!window.webContents.isDevToolsOpened()) {
      window.hide()
    }
  })
}

const toggleWindow = () => {
  if (window.isVisible()) {
    window.hide()
  } else {
    showWindow()
  }
}

const showWindow = () => {
  const position = getWindowPosition()
  window.setPosition(position.x, position.y, false)
  window.show()
  window.focus()
}

ipcMain.on('show-window', () => {
  showWindow()
})

Ниже приведен пример файла package.json:

{
  "name": "NAMEOFAPP",
  "description": "DESCRIPTION OF APP",
  "version": "0.1.0",
  "main": "main.js",
  "license": "MIT",
  "author": "NAME OF AUTHOR",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron-packager": "^8.2.0"
  }
}

Итак, если вы создаете простой файл index.html с надписью Hello World, поместите приведенные выше коды в файл main.js и файл package.json соответственно и запустите приложение, которое будет запускаться из трея.

Если вы понятия не имеете, как использовать электрон, вам нужно сначала понять это (это не так уж сложно понять). Тогда станет ясно, где какие файлы размещать и как запускать приложение.