Development Guide

Setting Up

1. Install dependencies:

   npm install react react-dom #react
   npm install -D webpack webpack-cli copy-webpack-plugin html-webpack-plugin #bundler and plugins
   npm install -D babel-loader @babel/core @babel/preset-env webpack #to load JSX files
   npm install -D css-loader file-loader style-loader #to load styling and images

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

Injected Script

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