Jeep SQLite Browser

A Chrome DevTools extension for browsing and managing Jeep SQLite databases stored in IndexedDB.

Features

• 🔍 Database Detection - Automatically scans for Jeep SQLite databases in IndexedDB
• 📊 Table Browser - View all tables with row counts and structure
• 📝 Data Viewer - Browse table data with pagination and CRUD operations
• ✏️ Edit & Insert - Modify existing records or insert new ones
• 🗑️ Delete Records - Remove records with confirmation
• 🔧 SQL Query Editor - Execute custom SQL queries with results display
• 💾 Export Tools - Export as SQL dumps or CSV files
• 🌙 Dark/Light Mode - Toggle themes with preference persistence
• 🔄 Auto-Refresh - Monitor for database changes with configurable refresh
• 🎨 Modern UI - Built with shadcn/ui components

Screenshots

Installation

Prerequisites

• Node.js 22+
• Package manager: pnpm (recommended), yarn, or npm

From Source

1. Clone the repository:

   git clone https://github.com/pinguluk/jeep-sqlite-browser.git
   cd jeep-sqlite-browser

2. Install dependencies:

   pnpm install

3. Build the extension:

   pnpm build

4. Load in Chrome:

   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the .output/chrome-mv3 directory

Development

Available Commands

Command	Description
pnpm dev	Start development with hot reload (Chrome)
pnpm dev:firefox	Start development with hot reload (Firefox)
pnpm build	Build for production (Chrome)
pnpm build:firefox	Build for production (Firefox)
pnpm zip	Build and create zip package (Chrome)
pnpm zip:firefox	Build and create zip package (Firefox)
pnpm compile	Run TypeScript type checking

Development Mode

Run with hot reload:

pnpm dev

Build for Production

pnpm build

Usage

1. Navigate to a website using Jeep SQLite (e.g., Ionic/Capacitor apps)
2. Open Chrome DevTools (F12)
3. Click the "Jeep SQLite Browser" tab
4. Select a database from the sidebar
5. Browse tables, run queries, edit data, or export

Technology Stack

• Framework: WXT - Modern extension framework
• UI: React 19 with TypeScript
• State: Redux Toolkit
• Components: shadcn/ui
• Tables: TanStack React Table
• Database: SQL.js - SQLite compiled to WebAssembly
• Styling: Tailwind CSS v4
• Build Tool: Vite (via WXT)

Project Structure

src/
├── types.ts                        # TypeScript interfaces
├── utils/
│   ├── cn.ts                       # Classname utility (shadcn/ui)
│   ├── helpers.ts                  # Utility functions
│   ├── settings.ts                 # Settings persistence (localStorage)
│   ├── database-handler.ts         # SQL.js wrapper
│   └── devtools-comm.ts            # DevTools communication
├── store/                          # Redux store
│   ├── store.ts                    # Store configuration
│   ├── hooks.ts                    # Typed dispatch/selector hooks
│   └── slices/
│       ├── databaseSlice.ts        # Database state
│       ├── tableSlice.ts           # Table state
│       ├── querySlice.ts           # SQL query state
│       └── uiSlice.ts              # UI state
├── components/
│   ├── ui/                         # shadcn/ui components
│   ├── Header.tsx                  # App header with controls
│   ├── Sidebar.tsx                 # Database/table browser
│   ├── Toolbar.tsx                 # Table actions toolbar
│   ├── DataTable.tsx               # Data grid with pagination
│   ├── StructureTab.tsx            # Table structure view
│   ├── QueryTab.tsx                # SQL query editor
│   ├── StatusBar.tsx               # Status information
│   ├── InsertEditModal.tsx         # Insert/edit row modal
│   └── DeleteConfirmModal.tsx      # Delete confirmation
├── styles/
│   └── globals.css                 # Global styles & Tailwind
└── entrypoints/
    ├── content.ts                  # Content script (page injection)
    ├── background.ts               # Background service worker
    ├── devtools.ts                 # DevTools panel registration
    └── devtools-panel/             # React DevTools panel
        ├── index.html
        ├── main.tsx
        └── PanelApp.tsx

example/                            # Demo Vue app using Jeep SQLite
├── src/
│   ├── App.vue                     # Main CRUD demo
│   └── services/sqlite.ts          # SQLite service
└── package.json                    # Separate dependencies

Support

If you find this extension useful, consider supporting on Ko-fi ☕

License

This project is licensed under a Custom Attribution + NonCommercial + Substantial-Changes-Only Redistribution License. See LICENSE for details.

Key points:

• ✅ Personal, educational, and research use allowed
• ✅ Fork and contribute via pull requests
• ❌ No commercial use
• ❌ No redistribution without substantial changes
• ❌ No publishing to extension stores without permission

Credits

Original project by pinguluk.