Development Guide

Setting Up

1. Install dependencies:

   npm install

Making Changes

1. Make your changes in the code.
2. Build and compile extension:

   npm run watch

3. Reload the extension in Chrome to see the updates.

How Chrome DevTools Extensions Work

Chrome DevTools extensions consist of several key components:

• Manifest File: Defines the extension’s permissions, background scripts, and DevTools page.
• DevTools Page: HTML and JavaScript files that create the custom DevTools panel.
• Content Scripts: Scripts that run in the context of the web page being inspected.
• Background Scripts: Handle events and manage the extension's background logic.

Structure of Rapid DevTools

MLH.Fellowship.-.24.SUM.A.Rapid.1.mp4

1. A script is injected into the inspected page from the panel.
2. The injected script will send a message upon first opening the locally deployed version of Rapid and whenever it observes a change in Rapid’s Edit System.
3. The extension’s content script has access to the DOM and DOM events, but its window does not point to the inspected page’s window object. It listens for messages from the inspected page.
4. The content script passes this message to the service worker, which communicates with the content script and devtools.