web extension message passing wrapped

functional interface web extension message passing wrapped

Example

Refer to this repository for an example of how to use it

Installation

Using npm:

npm install --save web-ext-msg-passing

or using yarn:

yarn add web-ext-msg-passing

Usage

Basic Usage

background:

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("<YOUR API URI>").then(res => res.json())
})

// listen multiple event
listenGroup({
  callApi2(parameter) {
    return fetch("<YOUR API URI>", {
      body: JSON.stringify(parameter)
    }).then(res => res.json())
  },
  otherFn(parameter) {
    // do something...
  }
})

content script or popup:

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:

import { sendToContent } from "web-ext-msg-passing"

sendToContent("getContentHtml").then(response => {
  // response will get current page html
})

content script:

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 for an example of how use in typescript