🚀 Dev3 Toolkit

A Chrome extension with powerful utilities for developers and power users. Manage passwords, inspect IndexedDB, sniff HTTP packets, and clean browser data.

Introduction   ✦   Features   ✦   Tech Stack   ✦   Directory Structure   ✦   Getting Started   ✦   Roadmap

📝 Introduction

Dev3 Toolkit is a multi-tool Chrome extension designed for developers and power users. It includes features like a password manager, IndexedDB viewer, HTTP packet sniffer, and browser data cleaner. Built with Vite, React, Tailwind CSS, and Radix UI.

✨ Features

• Password Manager: Securely store and manage passwords locally within your browser.
• IndexedDB Viewer [WIP]: Inspect browser-stored data in IndexedDB.
• Packet Sniffer: Track HTTP requests made from your browser in real-time.
• Browser Data Cleaner: Clear cookies, cache, history, and other stored data from your browser with one click.

🛠️ Tech Stack

• Vite - Fast build tool for modern web projects
• React - Component-based UI library
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Accessible, unstyled UI components
• Chrome Extensions API - For interacting with browser data and functionality

📂 Directory Structure

.
├── public               # Public assets and static files
│   └── manifest.json    # Extension metadata and configuration
│
├── src                  # Main source code
│   ├── components       # UI and shared components, with Radix UI + Tailwind CSS
│   ├── contants         # Global contants
│   ├── pages            # Different pages of the extension
│   ├── types            # TypeScript types and interfaces
│   └── utils            # Utility functions and helper methods
│
├── vite.config.ts       # Vite configuration
└── package.json         # Project metadata and dependencies

🚀 Getting Started

Prerequisites

You will need the following to run this project:

1. Node.js

Install Node.js from here, or using your preferred package manager (Brew, Winget, Scoop, etc) with the following commands:

# On MacOS or Linux (using Brew)
brew install node@20

# On Windows
winget install OpenJS.NodeJS # or scoop install nodejs

2. Chrome or any Chromium-based browser

You can use any Chromium-based browser like Arc, Edge, or Brave to load the extension.

Installation

1. Clone the repo

   git clone https://github.com/dev3-extensions/toolkit.git
   cd toolkit

2. Setup environment variables:

   Copy .env.example to .env and set VITE_MASTER_KEY to a secure, random 32-character string:

   cp .env.example .env

   Head to https://generate-secret.vercel.app/24 to generate a secure key or use the following command to generate a random key from the terminal:

   openssl rand -base64 24

   For example, the .env file should look like this:

   VITE_MASTER_KEY = 'xcQ+U#LIDUS^kY&8BZPCKFV+Sy^xSX7A'

3. Install all dependencies

   npm install

4. (Optional) Run the development server

   npm run dev

5. Build the extension

    npm run build

6. Load the extension in Chrome (or any Chromium-based browser)

   1. Open the Extension Management page by navigating to chrome://extensions.
   2. Enable Developer Mode by clicking the toggle switch next to Developer mode.
   3. Click on the "LOAD UNPACKED" button and select the dist directory. This dist directory will only appear after running npm run build.

🖥️ Recommended VS Code Extensions

• Tailwind CSS IntelliSense - for autocomplete in Tailwind CSS classes
• Prettier - for code formatting
• ESLint - for linting and maintaining code quality
• Auto Complete Tag - for auto-renaming and auto-completing React tags

✌️ Team

• Aryan Prince
• Andrea La Fauci De Leo
• Lewis Mann
• Lewis Johnson

🎯 Roadmap

• Migrate to Manifest V3
• Complete the IndexedDB Viewer
• Add data export/import functionality
• Improve the user interface and performance
• See GitHub Issues for more details and upcoming features

🔑 License

• MIT License.