This repository contains a React application written in TypeScript for use as a browser extension. Follow the instructions below to set up, develop, and build the project.
- Node.js (v20 or above recommended)
- npm (v9 or above recommended)
- A modern web browser that supports installing extensions in development mode (e.g., Chrome, Firefox)
- Clone the repository to your local machine.
- Navigate into the project directory.
- Install the necessary dependencies:
npm install
In the project’s package.json, the following scripts are available:
- dev: Starts the development server using Vite.
npm run dev
- build: Runs TypeScript type checking (tsc -b) and bundles the app for production using Vite.
npm run build
- lint: Lints the source files using ESLint.
npm run lint
- preview: Previews the production build locally.
npm run preview
To launch a development server and continuously rebuild on changes:
npm run devThis will start your app at a local development URL (usually http://localhost:3000 by default), allowing you to test the browser extension’s UI.
When ready to create a production build of the extension:
npm run buildThis command compiles the TypeScript code, bundles it with Vite, and outputs production-ready files (typically in the dist folder). You can then load these files into your browser of choice in developer/extension mode.
- Open Chrome and navigate to chrome://extensions/.
- Enable "Developer mode" (toggle in the top right corner).
- Click "Load unpacked" and select the dist folder generated by the build.
- The extension should now appear in Chrome’s extension panel.
- If using Firefox or another browser, follow that browser’s guidelines for loading unpacked or temporary extensions.
- Ensure your manifest.json file matches the required format for a browser extension in your target browser(s).
Feel free to submit issues or pull requests if you find any bugs or want to suggest improvements.
Happy coding!