https://github.com/extend-chrome/menus
A powerful context menu API to take your Chrome extension to the next level.
https://github.com/extend-chrome/menus
alpha chrome-extension context-menu typescript
Last synced: about 1 year ago
JSON representation
A powerful context menu API to take your Chrome extension to the next level.
- Host: GitHub
- URL: https://github.com/extend-chrome/menus
- Owner: extend-chrome
- License: mit
- Created: 2019-08-22T15:50:58.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-16T17:32:00.000Z (over 2 years ago)
- Last Synced: 2025-05-12T14:12:15.536Z (about 1 year ago)
- Topics: alpha, chrome-extension, context-menu, typescript
- Language: TypeScript
- Homepage:
- Size: 564 KB
- Stars: 14
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@extend-chrome/menus
[](https://www.npmjs.com/package/@extend-chrome/menus)
[](https://github.com/extend-chrome/menus)
[](https://github.com/extend-chrome/menus/blob/master/LICENSE)
[](#typescript)
[](https://www.youtube.com/channel/UCVj3dGw75v8aHFYD6CL1tFg)
[](https://ko-fi.com/jacksteam)
---
A powerful context menu API to take your Chrome extension to the next level.
> This library is in alpha until further notice. Things may not work. The API may change between minor versions.
## Table of Contents
- [Getting Started](#getting_started)
- [Usage](#usage)
- [Features](#features)
- [API](#options-api)
You will need to use a bundler like [Rollup](https://rollupjs.org/guide/en/), Parcel, 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/menus
```
```js
// background.js
import { menus } from '@extend-chrome/menus'
const id = 'my-menu'
// Create a menu
menus.create({ id, title: 'My Menu' })
// Use the included Observable of menu item clicks
menus.clickStream.subscribe(([clickData, tab]) => {
console.log('They clicked', clickData.id)
console.log('In tab', tab.id)
menus.update({ id, title: 'Another Title' })
})
```
### Dynamic Context Menus
A dynamic context menu is only available on HTML elements that match the CSS selector defined in its options.
```js
import { menus } from '@extend-chrome/menus'
menus.create({
id: 'my-dynamic-menu',
title: 'I only show on H1 tags',
selector: 'h1',
})
```
This feature uses `chrome.tabs.executeScript` under the hood, so it only works on pages found in the manifest `permissions` field.
```jsonp
// manifest.json
{
...
permissions: ['https://www.youtube.com/*']
...
}
```
### RxJs Observables
Chrome extensions and RxJs are a match made in heaven. Take advantage of ready-made Observables of menu item clicks, creations, updates, and removals.
```js
import { menus } from '@extend-chrome/menus'
menus.clickStream.subscribe(([clickData, tab]) => {
console.log('Menu Item Id', clickData.id)
console.log('Tab Id', tab.id)
})
```
### Convenience Function `useMenu`
The function `useMenu` creates a menu item and returns a tuple array of an updater function and an Observable of clicks for that menu item.
```js
import { useMenu } from '@extend-chrome/menus'
const menuOptions = {
id: 'menu1',
title: 'Menu Item One',
type: 'checkbox',
checked: false,
}
const [
// Updates only this menu item
updateMenu,
// Emits only clicks for this menu item
menuClickStream,
] = useMenu(menuOptions)
menuClickStream.subscribe(([clickData, tab]) => {
// No need to include menu id
// Toggle menu item checkbox
updateMenu({ checked: !clickData.checked })
})
```
### Full TypeScript Support
`@extend-chrome/menus` is written in TypeScript and includes type definitions. Functions and Observables are fully typed, so Intellisense works well.
```typescript
import { useMenu, ContextMenuOptions } from '@extend-chrome/menus'
const menuOptions: ContextMenuOptions = {
id: 'menu1',
title: 'Menu Item One',
}
const [updateMenu, menuClickStream]: [
(options: Partial) => void
Observable<[ContextMenuClickData, chrome.tabs.Tab]>
] = useMenu(menuOptions)
```
Full documentation coming soon!
There's great TypeScript support however, so Intellisense is your friend in the meantime.
