An example web extension, using MockRTC to intercept & debug your own WebRTC traffic

Overview

MockRTC WebExtension Example

Part of HTTP Toolkit: powerful tools for building, testing & debugging HTTP(S), WebRTC, and more

This is an example web extension you can use as a base to build your own WebRTC-intercepting web extensions for debugging.

This is a proof-of-concept example to start from, not something you'd immediately use out of the box. To intercept WebRTC using this repo:

  • Clone this repo
  • npm install
  • Modify the logic in background.ts to configure MockRTC however you'd like
  • Launch the extension
    • You may be able to run npm start to launch a MockRTC backend, build the code in this repo into a usable web extension, and open a new Chrome window with that extension temporarily installed.
    • Or this may fail, if you don't have Chrome in your PATH as google-chrome, if you're using Windows, if Chrome is already running, or probably in various other cases.
    • As an alternative, you can run npm run start:backend, and then install the extension manually in any Chromium-based browser by going to chrome://extensions/, enabling developer mode, clicking 'Load unpacked' and then selecting the public folder in this repo on your machine.
    • Should also work in Safari & Firefox and anywhere else supporting web extensions, although I haven't tested.
  • Test it on the official samples at https://webrtc.github.io/samples/, for example:
    • Go to chrome://extensions and click the 'service worker' link on the MockRTC extension open the console for your extension.
    • Open https://webrtc.github.io/samples/src/content/datachannel/messaging/ for a convenient chat demo.
    • Click connect, which will open two MockRTC connections in that one page, connected together.
    • Send a message in either direction - you'll see 'Sent: X' & 'Received: X' (from the two connections) appear in your extension console.

Once you've got the basics working, you can extend the code in background.ts to monitor any WebRTC events or define any rules you'd like to do anything you're interested in. If you run into limitations in MockRTC and there's more capabilities you need there, please open an issue.


This‌ ‌project‌ ‌has‌ ‌received‌ ‌funding‌ ‌from‌ ‌the‌ ‌European‌ ‌Union’s‌ ‌Horizon‌ ‌2020‌‌ research‌ ‌and‌ ‌innovation‌ ‌programme‌ ‌within‌ ‌the‌ ‌framework‌ ‌of‌ ‌the‌ ‌NGI-POINTER‌‌ Project‌ ‌funded‌ ‌under‌ ‌grant‌ ‌agreement‌ ‌No‌ 871528.

The NGI logo and EU flag

You might also like...

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

zkPoB is a mobile compatible tool that lets anyone prove they own a Bufficorn (or any NFT) without revealing which Buffi they own or the address they are verifying themselves with

Aug 25, 2022

A GitHub Action that allows to debug GitHub workflows using VS Code.

A GitHub Action that allows to debug GitHub workflows using VS Code.

VS Code Server Action A GitHub Action that allows to debug GitHub workflows using VS Code. Failing CI builds can be annoying especially since we don't

Dec 23, 2022

Debug your Jest tests. Effortlessly.🛠🖼

Debug your Jest tests. Effortlessly.🛠🖼

Jest Preview Debug your Jest tests. Effortlessly. 🛠 🖼 Try Jest Preview Online. No downloads needed! Why jest-preview When writing tests using Jest,

Jan 4, 2023

I built a full-stack project using Node, Express, Mongo, webRTC, socket.io, and of course React JS. This project is inspired by the awesome Clubhouse 😊

codershouse-mern - This Project is Under Development. Below are some of the implemented interface and the remaining features will be updated in future

Nov 18, 2022

Low cost, low effort P2P WebRTC serverless signalling using Cloudflare Workers

Low cost, low effort P2P WebRTC serverless signalling using Cloudflare Workers

P2PCF P2PCF enables free (or cheap) serverless WebRTC signalling using a Cloudflare worker and a Cloudflare R2 bucket. The API is inspired by P2PT, bu

Jan 8, 2023

Debug express.js server code with Ray to fix problems faster

Debug express.js server code with Ray to fix problems faster

express-ray Install this package in any Express.js project to provide an exceptional debugging experience using the Ray app by Spatie. Installation In

Nov 3, 2022

Debug Adapter Protocol for Amiga development with FS-UAE or WinUAE

UAE Debug Adapter Protocol Debug Adapter Protocol for Amiga assembly development with FS-UAE or WinUAE. Adapted from @prb28's vscode-amiga-assembly ex

Jul 7, 2022

Quo is a (free) debugging companion app to help you debug dumped variables, the dumped variables will appear in this Quo client instead of the traditional way which is often tedious.

Quo is a (free) debugging companion app to help you debug dumped variables, the dumped variables will appear in this Quo client instead of the traditional way which is often tedious.

Quo is a debugging companion to help you debug dumped variables, the dumped variables will appear in this Quo client instead of via the traditional way which is often tedious.

Dec 25, 2022

A professional truffle solidity template with all necessary libraries that support developer to develop, debug, test, deploy solidity smart contract

solidity-truffle-template A professional truffle solidity template with necessary libraries that support to develop, compile, test, deploy, upgrade, v

Nov 4, 2022
Owner
HTTP Toolkit
Beautiful & open-source tools to debug, test and develop with HTTP(S)
HTTP Toolkit
Prop-Proxy allows you to intercept getters and setters of class attributes through decorators

Prop-Proxy Proxy for class properties Prop-Proxy allows you to intercept getters and setters of class attributes through decorators Installation This

Leonardo Kaynan 6 Dec 15, 2022
mirrord lets you easily mirror traffic from your production environment to your development environment.

mirrord lets you easily mirror traffic from your Kubernetes cluster to your development environment. It comes as both Visual Studio Code extension and a CLI tool.

MetalBear 2.1k Dec 24, 2022
Jonathan Parker 6 Nov 23, 2022
This is a boilerplate for creating your own languages for various use cases. You can even create your own programming language from scratch!

Bootstrap compiler This is a bootstrap compiler that can be used to compile to compiler written in the target language. You can write a compiler in th

Kaan 3 Nov 14, 2022
Debug Extension for debugging backseat (.bs) and bssembler (.bsm) applications.

Backseat Debug Debug Extension for debugging backseat (.bs) and bssembler (.bsm) applications. This project is still a work in progress as are the bac

null 4 Oct 15, 2022
MagicSniffer is a amazing tool could help you decrypt GI traffic by MAGIC of WindSeedClientNotify

MagicSniffer We have posted an article about this on sdl.moe: 原神 2.8 KCP 验证密钥交互流程解析与流量解密 As everyone knows, RSA is the most secure way to encrypt data

Sorapointa 49 Dec 29, 2022
Real-time traffic data of Wiener Linien monitors.

WienerTime wiener-time.vercel.app Real-time traffic data of Wiener Linien monitors. Features Built with the t3-stack, this web app shows real-time tra

Jan Müller 6 Nov 11, 2022
This is an example of a web app for adding books to your own library

This is an example of a web app for adding books to your own library. You can add or delete books. It will be saved on local storage, so when you refresh the page, the books will not be deleted.

Sanja Mandic 10 Jun 24, 2022
Github action to collect metrics (CPU, memory, I/O, etc ...) from your workflows to help you debug and optimize your CI/CD pipeline

workflow-telemetry-action A GitHub Action to track and monitor the resource metrics of your GitHub Action workflow runs. If the run is triggered via a

Thundra 32 Dec 30, 2022
This React-Based WebPage allows the client/user system to create their own blog, where users can publish their own opinions.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Gauri Bhand 4 Jul 28, 2022