https://github.com/guesant/webext-rpc-contentscript-v3-parcel

Web Extension (manifest v3) template that implements a high level API for comunication between content script and page using window.postMessage.
https://github.com/guesant/webext-rpc-contentscript-v3-parcel

contentscript dispatch-event manifest-v3 parcel postmessage promise rpc webextension window

Last synced: 6 days ago
JSON representation

Web Extension (manifest v3) template that implements a high level API for comunication between content script and page using window.postMessage.

• Host: GitHub
• URL: https://github.com/guesant/webext-rpc-contentscript-v3-parcel
• Owner: guesant
• License: mit
• Created: 2023-01-17T19:51:33.000Z (about 2 years ago)
• Default Branch: dev
• Last Pushed: 2023-01-17T23:27:41.000Z (about 2 years ago)
• Last Synced: 2025-01-13T01:37:44.128Z (11 days ago)
• Topics: contentscript, dispatch-event, manifest-v3, parcel, postmessage, promise, rpc, webextension, window
• Language: TypeScript
• Homepage:
• Size: 62.5 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# webext-rpc-contentscript-v3-parcel

Web Extension (manifest v3) template that implements a high level API for comunication between content script and page using window.postMessage.

## Development

### Getting the source code

```sh

git clone https://github.com/legacybiel/webext-rpc-contentscript-v3-parcel.git

cd webext-rpc-contentscript-v3-parcel

```

```sh

npm install

```

### Development scripts

```sh

npm run start

```

```sh

npm run build

```

Output directory: `dist`.

### Usage

#### ContentScript/client

Main: [`src/ContentScript/client/main.ts`](src/ContentScript/client/main.ts).

This script have access to the `chrome` and `browser` APIS.

```ts

// src/ContentScript/client/main.ts

console.log("ping", await invokeAction({ type: "ping" }));

// output: ping pong

console.log("sum", await invokeAction({ type: "sum", data: [2, 2] }));

// output: sum 4

```

#### ContentScript/server

Main: [`src/ContentScript/server/main.ts`](src/ContentScript/server/main.ts).

This script have access to the page window API.

---

Handle Actions util: [`src/ContentScript/server/handleActions.ts`](src/ContentScript/server/handleActions.ts).

```ts

// src/ContentScript/server/handleActions.ts

export const handleActions = async (payload) => {

  switch (payload.type) {

    case "ping": {

      return "pong";

    }

    case "sum": {

      return payload.data.reduce((acc, i) => acc + i, 0);

    }

    default: {

      return "not implemented";

    }

  }

};

```