# beaverjs

> An abstraction around WebExtension messaging

Latest version **0.3.1** (published 2022-03-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install beaverjs
pnpm add beaverjs
yarn add beaverjs
bun add beaverjs
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2022-03-11 |
| First published | 2021-02-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 46.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Nerixyz |
| Maintainers | nerix |
| Keywords | webextension, postmessage, extension, event, eventhandler, messaging |

## Links

- npm: https://www.npmjs.com/package/beaverjs
- npm.io page: https://npm.io/package/beaverjs

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 0.3.1 (latest) — 2022-03-11
- 0.3.0 (alpha) — 2022-03-11
- 0.2.0 — 2021-04-03
- 0.1.0 — 2021-02-20

## README

# BeaverJs

This is a library to simplify the messaging between different components in the browser.
It's best used for extensions needing to communicating from different contexts.

## Usage

### Browser-Context

This is where the website is.

```typescript
import { ContextEventHandler } from 'beaverjs';

interface EventMap {
  click: undefined;
  tabChanged: string;
  store: {key: string, value: boolean};
}

const listener = new ContextEventHandler<EventMap>();

document.addEventHandler('click', () => listener.emitBackground('click'));
document.addEventHandler('playing', () => 
  listener.emitContent('store', { key: 'playing', value: true }));

listener.on('tabChanged', tabName => console.log('Tab Changed:', tabName));
```


### Content-Script

```typescript
import { ContentEventHandler } from 'beaverjs';

interface EventMap {
  click: undefined;
  tabChanged: string;
  store: { key: string, value: boolean };
}

const listener = new ContentEventHandler<EventMap>();

listener.on('store', ({key, value}) => {
  browser.storage.local.set({[key]: value});
});
```

### Background-Script

```typescript
import { BackgroundEventHandler } from 'beaverjs';

interface EventMap {
  click: undefined;
  tabChanged: string;
  store: { key: string, value: boolean };
}

const listener = new BackgroundEventHandler<EventMap>();

listener.on('click', () => console.log('click'));

browser.tabs.onUpdated.addListener((id, changeInfo, tab) => 
  listener.emit('tabChanged', tab.title));
```

---
_Source: https://npm.io/package/beaverjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._