https://github.com/extend-chrome/notify
Create notifications in your Chrome extension with ease.
https://github.com/extend-chrome/notify
chrome-extension chrome-extensions javascript notifications npm-module
Last synced: about 2 months ago
JSON representation
Create notifications in your Chrome extension with ease.
- Host: GitHub
- URL: https://github.com/extend-chrome/notify
- Owner: extend-chrome
- License: mit
- Created: 2019-03-05T21:00:48.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T22:00:18.000Z (over 1 year ago)
- Last Synced: 2025-05-04T10:38:45.170Z (2 months ago)
- Topics: chrome-extension, chrome-extensions, javascript, notifications, npm-module
- Language: JavaScript
- Size: 646 KB
- Stars: 12
- Watchers: 0
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@extend-chrome/notify
[](https://www.npmjs.com/package/@extend-chrome/notify)
[](https://github.com/extend-chrome/notify)
[](/LICENSE)
[](#typescript)
[](https://www.youtube.com/channel/UCVj3dGw75v8aHFYD6CL1tFg)
[](https://ko-fi.com/jacksteam)
---
This is a simpler API for [`chrome.notifications`](https://developer.chrome.com/extensions/notifications) to use in Chrome extensions.
Add the [`notifications` permission](#permissions) and [create a notification](#usage) with as little as a string. `@extend-chrome/notify` will [do the rest](#manifest)! ✨
```javascript
notify('This is too easy')
```
## Table of Contents
- [Getting Started](#getting_started)
- [Usage](#usage)
- [Features](#features)
- [API](#api)
You will need to use a bundler like [Rollup](https://rollupjs.org/guide/en/) or Webpack to include this library in the build of Chrome extension.
See [`rollup-plugin-chrome-extension`](https://github.com/extend-chrome/rollup-plugin-chrome-extension) for an easy way use Rollup to build your Chrome extension!
### Installation
```sh
$ npm i @extend-chrome/notify
```
```javascript
import { notify } from '@extend-chrome/notify'
notify('The most simple notification').then((id) => {
console.log('notification id', id)
})
notify
.create({
message: 'You have been notified.',
})
.then((id) => {
console.log('notification id', id)
})
```
The function `notify.create` takes any of the [official notification options](https://developer.chrome.com/extensions/notifications#type-NotificationOptions) for `chrome.notifications.create`, without trying to type `"notifications"` every time.
The `"notifications"` permission must be included in `manifest.json`.
```json
// manifest.json
{
"permissions": ["notifications"]
}
```
TypeScript definitions are included, so no need to install an additional `@types` library!
### Gets Name and Icon from `manifest.json`
This library will use `chrome.runtime.getManifest()` to include the [name](https://developer.chrome.com/extensions/manifest/name#name) and [icon](https://developer.chrome.com/extensions/manifest/icons) of your extension in your notifications!
### `notify(message: string)`
Returns: `Promise`
Create a simple notification with an icon and the name of the Chrome extension, if they are supplied in `manifest.json`.
Returns a promise which resolves to the notification id, which you can use in the `notify.onClick` and `notify.onButtonClick` events.
```javascript
const myId = await notify('This is my notification')
notify.onClicked.addListener((clickedId) => {
if (myId === clickedId) {
console.log('My notification was clicked.')
}
})
```
### `notify.create(options: NotificationOptions)`
Returns: `Promise`
Create a [basic notification](https://developer.chrome.com/extensions/notifications#type-TemplateType) by default using as little as `options.message`, or any of the other properties in [NotificationOptions](https://developer.chrome.com/extensions/notifications#type-NotificationOptions).
Returns a promise which resolves to the notification id, which you can use in [notification events](#api-events).
```javascript
const myId = await notify.create({
message: 'This is my notification',
})
notify.onClicked.addListener((clickedId) => {
if (myId === clickedId) {
console.log('My notification was clicked.')
}
})
```
### Other methods and events
All the other methods and events from [`chrome.notifications`](https://developer.chrome.com/extensions/notifications) are promisified using [`chrome-promise`](https://github.com/tfoxy/chrome-promise) and assigned to `notify`, so you can use `notify` as if it is `chrome.notifications` with promises. These include the following:
Methods return promises but are otherwise the same as the Chrome API.
```javascript
notify
.update('my-notification', updateOptions)
.then((wasUpdated) => {
if (wasUpdated) {
console.log('my notification was updated')
}
})
```
- [`update(id) => Promise`](https://developer.chrome.com/extensions/notifications#method-update)
- [`clear(id) => Promise`](https://developer.chrome.com/extensions/notifications#method-clear)
- [`getAll() => Promise`](https://developer.chrome.com/extensions/notifications#method-getAll)
- [`getPermissionsLevel() => Promise<'granted'|'denied'>`](https://developer.chrome.com/extensions/notifications#method-getPermissionLevel)
Events are exacly the same as the Chrome API. Register a listener by calling `addListener` on an event:
```javascript
notify.onClosed.addListener((id) => {
console.log('This notification was closed', id)
})
```
- [`onClosed`](https://developer.chrome.com/extensions/notifications#event-onClosed)
- [`onClicked`](https://developer.chrome.com/extensions/notifications#event-onClicked)
- [`onButtonClicked`](https://developer.chrome.com/extensions/notifications#event-onButtonClicked)
- [`onPermissionLevelChanged`](https://developer.chrome.com/extensions/notifications#event-onPermissionLevelChanged)
- [`onShowSettings`](https://developer.chrome.com/extensions/notifications#event-onShowSettings)