{"id":13602233,"url":"https://github.com/sfatihk/electron-tray-window","last_synced_at":"2025-04-06T20:13:22.413Z","repository":{"id":33935422,"uuid":"160168210","full_name":"sfatihk/electron-tray-window","owner":"sfatihk","description":"🖼️ Generates custom tray windows with Electron.js","archived":false,"fork":false,"pushed_at":"2023-10-02T18:22:10.000Z","size":3524,"stargazers_count":165,"open_issues_count":5,"forks_count":16,"subscribers_count":9,"default_branch":"master","last_synced_at":"2024-03-14T16:04:54.369Z","etag":null,"topics":["electron","electronjs","hacktoberfest","menu","popup","tray","tray-icon","window"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sfatihk.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-12-03T09:47:45.000Z","updated_at":"2024-03-12T14:35:34.000Z","dependencies_parsed_at":"2024-01-14T05:09:26.235Z","dependency_job_id":"e4f49b1e-5062-49b2-a631-aacddab2fb1b","html_url":"https://github.com/sfatihk/electron-tray-window","commit_stats":{"total_commits":38,"total_committers":6,"mean_commits":6.333333333333333,"dds":0.3421052631578947,"last_synced_commit":"03e561b52f96cb4a2b5b991f183ae39ca38b216d"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Felectron-tray-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Felectron-tray-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Felectron-tray-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sfatihk%2Felectron-tray-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sfatihk","download_url":"https://codeload.github.com/sfatihk/electron-tray-window/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247543595,"owners_count":20955865,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","electronjs","hacktoberfest","menu","popup","tray","tray-icon","window"],"created_at":"2024-08-01T18:01:17.304Z","updated_at":"2025-04-06T20:13:22.387Z","avatar_url":"https://github.com/sfatihk.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"[![npm version](https://badge.fury.io/js/electron-tray-window.svg)](https://www.npmjs.com/package/electron-tray-window)\n[![npm version](https://img.shields.io/github/languages/code-size/sfatihk/electron-tray-window)](https://github.com/sfatihk/electron-tray-window)\n[![npm version](https://img.shields.io/npm/dt/electron-tray-window)](https://github.com/sfatihk/electron-tray-window)\n[![npm version](https://img.shields.io/github/issues/sfatihk/electron-tray-window)](https://github.com/sfatihk/electron-tray-window)\n[![npm version](https://img.shields.io/github/license/sfatihk/electron-tray-window)](https://github.com/sfatihk/electron-tray-window)\n\n\n\n\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"resources/icon.png\" style=\"max-width:100%; width:300px\"/\u003e\n\u003c/p\u003e\n\u003ch2 align=\"center\"\u003eQuickly create customizable  menu/pop-up for your application in system tray.\u003c/h2\u003e\n\n---\n\nElectron Tray Window, basically places the window near the tray icon. While these happening, you can customize window / tray or tracking the events.\n\n## Preview [demo project](https://github.com/sfatihk/electron-tray-window/tree/master/examples)\n\n\u003cimg src=\"https://raw.githubusercontent.com/sfatihk/electron-tray-window/master/resources/showcase-short.gif\" style=\"max-width:100%; width:300px\"  /\u003e \u003cimg src=\"https://raw.githubusercontent.com/sfatihk/electron-tray-window/master/resources/showcase.gif\" style=\"max-width:100%; width:550px\"/\u003e\n\n## Install\n\n```\nnpm install electron-tray-window\n```\n\nor\n\n```\nyarn add electron-tray-window\n```\n\n## Usage\n\n```js\nconst trayWindow = require(\"electron-tray-window\");\n```\n\nYou can use different ways. \"setOptions()\" function accepts object value.\n\nIf you have already created tray or window outside **TrayWindow**, you can pass as arguments to **.setOptions()** function,\n\n```js\n//...\n\ntray = new Tray(...);\nwindow = new BrowserWindow(...);\nwindow.loadUrl(...);\n\ntrayWindow.setOptions({tray: tray,window: window});\n\n//...\n```\n\nor if you pass just tray icon path or window url, it prepare automatically.\n\n```js\n//...\n\ntrayWindow.setOptions({\n  trayIconPath: \"...\",\n  windowUrl: \"...\"\n});\n\n//...\n```\n\nBy the way you can make different combines. But object must contains;\n\n- **tray** or **trayIconPath**\n- **window** or **windowUrl**\n\n```js\n\n//...\n\ntray = new Tray(...);\ntrayWindow.setOptions({\n  tray: tray,\n  windowUrl: \"...\"\n});\n\n//...\n\nwindow = new BrowserWindow(...);\n\ntrayWindow.setOptions({\n  trayIconPath: \"...\",\n  window: window\n});\n\n//...\n```\n\n## Other Functions\n\nYou can always change **TrayWindow** with setOptions() and you can use different functions after setOptions().\n\n## .setTray( tray )\n\n```js\n//...\n\ntrayWindow.setOptions({...});\n\n//...\n\ndifferentTray = new Tray(...);\n\ntrayWindow.setTray(differentTray); //now, follows different tray\n\n//..\n```\n\n## .setWindow( window )\n\n```js\n//...\n\ntrayWindow.setOptions({...});\n\n//...\n\ndifferentWindow = new BrowserWindow(...);\n\ntrayWindow.setWindow(differentWindow); //now, shows different window\n\n//..\n```\n\n## .setWindowSize( object )\n\n```js\n//...\n\ntrayWindow.setOptions({...});\n\n//...\n\ndifferentWindow = new BrowserWindow(...);\n\ntrayWindow.setWindowSize({\n    width    : 200,    //optional\n    height   : 300,   //optional\n    margin_x : 10,  //optional\n    margin_y : 10   //optional\n});\n\n//..\n```\n\n## Events\n\nYou can listen events. All event contains window and tray objects\n\n```js\n//...\nconst { ipcMain } = electron;\n\nipcMain.on(\"tray-window-ready\", (e, a) =\u003e {\n  console.log(\"tray window is ready\");\n  //console.log(e.window)\n  //console.log(e.tray)\n});\n\nipcMain.on(\"tray-window-clicked\", (e, a) =\u003e {\n  console.log(\"clicked the tray icon\");\n  //console.log(e.window)\n  //console.log(e.tray)\n});\n\nipcMain.on(\"tray-window-visible\", (e, a) =\u003e {\n  console.log(\"tray window is visible now\");\n  //console.log(e.window)\n  //console.log(e.tray)\n});\n\nipcMain.on(\"tray-window-hidden\", (e, a) =\u003e {\n  console.log(\"tray window is hidden now\");\n  //console.log(e.window)\n  //console.log(e.tray)\n});\n\n//..\n```\n\n## Overview\n\n### All parameters of setOptions()\n\n| parameter    | description                                      | default |\n| ------------ | ------------------------------------------------ | ------- |\n| tray         | Electron's tray object type                      |         |\n| trayIconPath | Image file path                                  |         |\n| window       | Electron's BrowserWindow object type             |         |\n| windowUrl    | Html etc. file path or website url               |         |\n| width        | Window width                                     | 200px   |\n| height       | Window height                                    | 200px   |\n| margin_x     | Vertical distance between window and tray icon   | 0px     |\n| margin_y     | Horizontal distance between window and tray icon | 0px     |\n| framed       | Is it window framed?                             | false   |\n\n### Other functions\n\n| function      | description                                                       |\n| ------------- | ----------------------------------------------------------------- |\n| setTray       | Electron's tray object type.                                      |\n| setWindow     | Electron's BrowserWindow object type                              |\n| setWindowSize | Object type. Optional arguments width, height, margin_x, margin_y |\n\n### IPC (Inter-Process Communication) Events\n\n| event               | description              |\n| ------------------- | ------------------------ |\n| tray-window-ready   | when created TrayWindow. |\n| tray-window-clicked | when clicked tray icon   |\n| tray-window-visible | when window show up      |\n| tray-window-hidden  | when window close down   |\n\n### Default Window Properties\n\n| properties                           | default in TrayWindow |\n| ------------------------------------ | --------------------- |\n| width                                | 200px                 |\n| height                               | 300px                 |\n| maxWidth                             | 200px                 |\n| maxHeight                            | 300px                 |\n| show                                 | false                 |\n| frame                                | false                 |\n| fullscreenable                       | false                 |\n| resizable                            | false                 |\n| useContentSize                       | true                  |\n| transparent                          | true                  |\n| alwaysOnTop                          | true                  |\n| webPreferences{backgroundThrottling} | false                 |\n\nP.S. : if you use this way `setOptions({windowUrl:\"...\"})`, default window values uses.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfatihk%2Felectron-tray-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsfatihk%2Felectron-tray-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsfatihk%2Felectron-tray-window/lists"}