https://github.com/ckaznable/web-ext-msg-passing
functional interface web extension message passing wrapped
https://github.com/ckaznable/web-ext-msg-passing
browser-extension chrome-extension message-passing typescript
Last synced: about 1 month ago
JSON representation
functional interface web extension message passing wrapped
- Host: GitHub
- URL: https://github.com/ckaznable/web-ext-msg-passing
- Owner: ckaznable
- License: mit
- Created: 2022-06-16T09:05:26.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-23T08:15:10.000Z (over 3 years ago)
- Last Synced: 2025-10-25T15:42:59.268Z (8 months ago)
- Topics: browser-extension, chrome-extension, message-passing, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/web-ext-msg-passing
- Size: 82 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/web-ext-msg-passing)
# web extension message passing wrapped
functional interface web extension message passing wrapped
## Example
Refer to this [repository](https://github.com/ckaznable/web-ext-msg-passing-example) for an example of how to use it
## Installation
Using npm:
```shell
npm install --save web-ext-msg-passing
```
or using yarn:
```shell
yarn add web-ext-msg-passing
```
## Usage
### Basic Usage
background:
```javascript
import { listen, listenGroup, installListener } from "web-ext-msg-passing"
// installListener is required if you want listen event
installListener()
// listen one event
listen("callApi", () => {
return fetch("").then(res => res.json())
})
// listen multiple event
listenGroup({
callApi2(parameter) {
return fetch("", {
body: JSON.stringify(parameter)
}).then(res => res.json())
},
otherFn(parameter) {
// do something...
}
})
```
content script or popup:
```javascript
import { send } from "web-ext-msg-passing"
// get api background response.
await send("callApi")
// get api background response with payload.
await send("callApi2", {id: 123})
// call background listener but not need response.
send("otherFn", {id: 3})
```
### Send event to content script from background or popup
background or popup:
```javascript
import { sendToContent } from "web-ext-msg-passing"
sendToContent("getContentHtml").then(response => {
// response will get current page html
})
```
content script:
```javascript
import { installListener, listen } from "web-ext-msg-passing"
// installListener is required if you want listen event
installListener()
// listen event
listen("getContentHtml", () => document.documentElement.innerHTML)
```
## Typescript
Refer to this [repository](https://github.com/ckaznable/web-ext-msg-passing-example/tree/main/src/typescript) for an example of how use in typescript