{"id":20138448,"url":"https://github.com/nexovadev/electron-taskbar-badge","last_synced_at":"2025-04-09T18:08:49.192Z","repository":{"id":175427262,"uuid":"653881014","full_name":"NexovaDev/electron-taskbar-badge","owner":"NexovaDev","description":"An easy way for electron apps to add app badges to the taskbar to indicate notifications and other countable things, with maximum compatibility and customizability.","archived":false,"fork":false,"pushed_at":"2023-11-19T04:51:27.000Z","size":521,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-23T20:05:37.362Z","etag":null,"topics":["badge","electron","nodejs","npm","taskbar","windows"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/electron-taskbar-badge","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NexovaDev.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}},"created_at":"2023-06-15T00:22:49.000Z","updated_at":"2025-01-29T07:31:58.000Z","dependencies_parsed_at":"2023-11-19T05:27:05.104Z","dependency_job_id":"707cff8e-52dc-4ea0-b143-5cca63e2e153","html_url":"https://github.com/NexovaDev/electron-taskbar-badge","commit_stats":null,"previous_names":["kk-designs/electron-taskbar-badge","nexovadev/electron-taskbar-badge"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NexovaDev%2Felectron-taskbar-badge","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NexovaDev%2Felectron-taskbar-badge/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NexovaDev%2Felectron-taskbar-badge/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NexovaDev%2Felectron-taskbar-badge/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NexovaDev","download_url":"https://codeload.github.com/NexovaDev/electron-taskbar-badge/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248084972,"owners_count":21045135,"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":["badge","electron","nodejs","npm","taskbar","windows"],"created_at":"2024-11-13T21:38:12.530Z","updated_at":"2025-04-09T18:08:49.167Z","avatar_url":"https://github.com/NexovaDev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![version](https://img.shields.io/npm/v/electron-taskbar-badge?color=blueviolet\u0026style=for-the-badge \"Version\")](https://github.com/NexovaDev/electron-taskbar-badge/releases/latest)\n‎\n[![weekly_downloads](https://img.shields.io/npm/dw/electron-taskbar-badge?color=blue\u0026style=for-the-badge \"Weekly Downloads\")](https://www.npmjs.com/package/electron-taskbar-badge#:~:text=Weekly%20Downloads)\n‎\n![downloads](https://img.shields.io/npm/dt/electron-taskbar-badge?style=for-the-badge\u0026logo=npm\u0026color=%23ca0000\u0026link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Felectron-taskbar-badge \"Downloads\")\n‎\n[![issues](https://img.shields.io/github/issues/NexovaDev/electron-taskbar-badge?style=for-the-badge \"Issues\")](https://github.com/NexovaDev/electron-taskbar-badge/issues)\n‎\n[![license](https://img.shields.io/github/license/NexovaDev/electron-taskbar-badge?color=important\u0026style=for-the-badge \"License\")](https://github.com/NexovaDev/electron-taskbar-badge/blob/master/LICENSE)\n‎\n[![electron-taskbar-badge](https://nodei.co/npm/electron-taskbar-badge.png \"electron-taskbar-badge on NPM\")](https://www.npmjs.com/package/electron-taskbar-badge)\n---\n\n# Electron Taskbar Badge\nAn easy way for electron apps to add app badges to the taskbar to indicate notifications and other countable things, with maximum compatibility and customizability.\n\n---\n\n# Changelog (`v1.1.2`)\n\n• Fixed non win32 environments detection \\\n• And more bug fixes\n\n---\n\n# Installation\n\n```sh-session\nnpm i electron-taskbar-badge\n```\n\n---\n\n# Basic Usage\n\n\u003e ⚠ **This library is ONLY compatible with node version 14 and above! Only supports Windows at the moment**\n\nFirst, you must import the library using the following code:\n```javascript\nconst Badge = require('electron-taskbar-badge');\n// or `import * as Badge from 'electron-taskbar-badge';` for ESM users\n```\n\\\nFor basic usage, all you have to do is call the function with the options:\n### Process: [**Main**](https://www.electronjs.org/docs/latest/glossary#main-process \"Main\")\n```javascript\nconst Badge = require('electron-taskbar-badge');\n// or `import * as Badge from 'electron-taskbar-badge';` for ESM users\n\n// NOTE: Although the font size 62px seems large, it is not. It is relative to the radius. Lowering both of these values can decrease quality significantly. Increasing them can reduce performance. Leave the font size and the radius as is for basic usage\nconst badgeOptions = {\n\tfontColor: '#FFFFFF', // The font color\n\tfont: '62px Microsoft Yahei', // The font and its size. You shouldn't have to change this at all\n\tcolor: '#FF0000', // The background color\n\tradius: 48, // The radius for the badge circle. You shouldn't have to change this at all\n\tupdateBadgeEvent: 'notificationCount', // The IPC event name to listen on\n\tbadgeDescription: 'Unread Notifications', // The badge description\n\tinvokeType: 'handle', // The IPC event type\n\tmax: 9, // The maximum integer allowed for the badge. Anything above this will have \"+\" added to the end of it.\n\tfit: false, // Useful for multi-digit numbers. For single digits keep this set to false\n\tadditionalFunc: (count) =\u003e {\n\t\t// An additional function to run whenever the IPC event fires. It has a count parameter which is the number that the badge was set to.\n\t\tconsole.log(`Received ${count} new notifications!`);\n\t},\n};\n\n// \"win\" would be your Electron BrowserWindow object\nnew Badge(win, badgeOptions);\n```\n### Process: [**Renderer**](https://www.electronjs.org/docs/latest/glossary#renderer-process \"Renderer\")\n```js\n// If invokeType is set to \"handle\"\n// Replace 8 with whatever number you want the badge to display\nipcRenderer.invoke('notificationCount', 8);\n\n// If invokeType is set to \"send\"\nipcRenderer.sendSync('notificationCount', 8);\n```\n\n**That's it! Now you have it running!**\n\n## More examples\n### Native look\nIf you want your badge to look native to the operating system, which means that it follows the default OS's font and color, you can use the `useSystemAccentTheme` option. Here's an example:\n\n```javascript\n// DO NOT change the font or the radius\n// fontColor and color will be overridden. The background color would be the system accent color, and the font color would be automatically chosen between black or white, whichever looks best.\nconst badgeOptions = {\n\tfontColor: '#000000',\n\tfont: '62px Microsoft Yahei',\n\tcolor: '#000000',\n\tradius: 48,\n\tupdateBadgeEvent: 'notificationCount',\n\tbadgeDescription: 'Unread Notifications',\n\tinvokeType: 'handle',\n\tmax: 9,\n\tfit: false,\n\tuseSystemAccentTheme: true,\n\tadditionalFunc: (count) =\u003e {\n\t\tconsole.log(`Received ${count} new notifications!`);\n\t},\n};\n\nnew Badge(win, badgeOptions);\n```\n\n**Examples**\n\n![Taskbar Badge Purple](assets/taskbarBadgePurple.gif?raw=true) \\\n![Taskbar Badge Blue](assets/taskbarBadgeBlue.gif?raw=true) \\\n![Taskbar Badge Green](assets/taskbarBadgeGreen.gif?raw=true)\n\n### Auto font color\nIf you want your badge's font color to be automatically chosen, simply set `fontColor` to `auto`. This will choose the font color between black or white, whichever looks best. Here's an example:\n\n```javascript\nconst badgeOptions = {\n\tfontColor: 'auto',\n\tfont: '62px Microsoft Yahei',\n\tcolor: '#00FF00',\n\tradius: 48,\n\tupdateBadgeEvent: 'notificationCount',\n\tbadgeDescription: 'Unread Notifications',\n\tinvokeType: 'handle',\n\tmax: 9,\n\tfit: false,\n\tadditionalFunc: (count) =\u003e {\n\t\tconsole.log(`Received ${count} new notifications!`);\n\t},\n};\n\nnew Badge(win, badgeOptions);\n```\n\n# Options\n### Options info for `Badge(options)`\n\n| Parameters    | Type    | Description                            | Default    |\n|---------------|---------|----------------------------------------|---------|\n| `fontColor`    | string (required) | The font color in hex or RGB color format. Pretty self-explanatory.  | auto |\n| `font`    | string | The font for the badge icon. The format is [size]px [Font family name] **ALWAYS SET THE FONT SIZE TO 62px FOR BEST QUALITY** | 62px Microsoft Yahei |\n| `color` | string (required) | The background color for the badge icon in hex or RGB color format. | `null` |\n| `radius` | number | The radius for the badge icon **ALWAYS SET TO 48 FOR BEST QUALITY** | 48 |\n| `updateBadgeEvent` | string (required) | The IPC event name to listen on | `null` |\n| `badgeDescription` | string | A description that will be provided to Accessibility screen readers | `this.updateBadgeEvent` |\n| `invokeType` | string | The IPC event type. Can be `send` or `handle`. | send |\n| `max` | number | The maximum integer allowed for the badge. Anything above this will have \"+\" added to the end of it. | 99 |\n| `fit` | boolean | Automatically sizes large numbers to fit in the badge icon. Set to true only for large 3-digit numbers (including the \"+\"!) | `false` |\n| `useSystemAccentTheme` | boolean | Whether to use the system accent color for the background color. fontColor and color will be overridden. It would be automatically chosen between black or white, whichever looks best. | `false` |\n| `additionalFunc` | function(count) | An additional function to run whenever the IPC event fires. It has a count parameter which is the number that the badge was set to. | `null` |\n\n#\n[![](assets/backToTop.png?raw=true \"Back to top\")](#readme)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnexovadev%2Felectron-taskbar-badge","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnexovadev%2Felectron-taskbar-badge","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnexovadev%2Felectron-taskbar-badge/lists"}