|
| 1 | +# Development Guide |
| 2 | + |
| 3 | +## Prerequisites |
| 4 | + |
| 5 | +- Node.js 20+ |
| 6 | +- npm |
| 7 | + |
| 8 | +## Scripts |
| 9 | + |
| 10 | +| Command | Description | |
| 11 | +|---------|-------------| |
| 12 | +| `npm run dev` | Start development mode (watch) | |
| 13 | +| `npm run build` | Type-check and build for production | |
| 14 | +| `npm run test` | Run tests | |
| 15 | +| `npm run test:watch` | Run tests in watch mode | |
| 16 | +| `npm run test:coverage` | Run tests with coverage | |
| 17 | +| `npm run lint` | Lint the codebase | |
| 18 | +| `npm run lint:fix` | Lint and auto-fix issues | |
| 19 | +| `npm run format` | Format all files with Prettier | |
| 20 | +| `npm run format:check` | Check formatting without changes | |
| 21 | + |
| 22 | +## Project Structure |
| 23 | + |
| 24 | +``` |
| 25 | +src/ |
| 26 | +├── background/ # Chrome service worker (omnibox, context menu, navigation) |
| 27 | +├── popup/ # Extension popup UI |
| 28 | +├── resolve/ # Full resolution page with DNS records |
| 29 | +├── favorites/ # Favorites management page |
| 30 | +├── recent/ # Recently resolved keys page |
| 31 | +├── history/ # Resolution history with stats and charts |
| 32 | +├── relays/ # Relay management and testing page |
| 33 | +├── settings/ # Extension settings page |
| 34 | +├── how-it-works/ # Help and documentation page |
| 35 | +├── lib/ # Shared libraries |
| 36 | +│ ├── pkarr.ts # Key validation and parsing |
| 37 | +│ ├── resolver.ts # Resolution logic (fetch, verify, cache) |
| 38 | +│ ├── dns.ts # DNS packet parsing and formatting |
| 39 | +│ ├── storage.ts # Chrome storage abstraction |
| 40 | +│ ├── cache.ts # Caching layer with TTL |
| 41 | +│ ├── history.ts # Resolution history and statistics |
| 42 | +│ ├── i18n.ts # Internationalization engine |
| 43 | +│ └── constants.ts # Relay URLs, storage keys, limits |
| 44 | +├── locales/ # Translation files (9 languages) |
| 45 | +└── styles/ # Global styles and Tailwind configuration |
| 46 | +``` |
| 47 | + |
| 48 | +## Tech Stack |
| 49 | + |
| 50 | +- **TypeScript** — Type-safe codebase |
| 51 | +- **Vite** — Fast builds with multi-entry support |
| 52 | +- **Tailwind CSS** — Utility-first styling with dark mode |
| 53 | +- **dns-packet** — Pure JS DNS wire-format parser |
| 54 | +- **Chart.js** — Resolution history charts |
| 55 | +- **Vitest** — Unit testing |
| 56 | +- **ESLint + Prettier** — Code quality and formatting |
| 57 | +- **Chrome Extension Manifest V3** — Modern extension platform |
| 58 | + |
| 59 | +## Features |
| 60 | + |
| 61 | +- **Omnibox** — Type `pk` in the address bar followed by a public key to resolve it instantly |
| 62 | +- **Popup** — Click the extension icon to paste a key, view DNS records, and navigate |
| 63 | +- **Context Menu** — Right-click selected text to resolve it as a PKDNS key |
| 64 | +- **Auto-redirect** — Automatically navigate when A/CNAME/HTTPS records are found |
| 65 | +- **Favorites** — Save and label frequently used keys |
| 66 | +- **History** — Track resolution history with stats and charts |
| 67 | +- **Relay Management** — Configure, add, remove, and test Pkarr HTTP relays |
| 68 | +- **Internationalization** — 9 languages (EN, PT-BR, ES, DE, FR, IT, ZH, JA, AR) |
| 69 | +- **Dark Mode** — Full dark theme support |
| 70 | + |
| 71 | +## Configuration |
| 72 | + |
| 73 | +### Default Relays |
| 74 | + |
| 75 | +| Relay | URL | |
| 76 | +|-------|-----| |
| 77 | +| Pubky App | `https://pkarr.pubky.app` | |
| 78 | +| Pubky Org | `https://pkarr.pubky.org` | |
| 79 | + |
| 80 | +Relays can be customized through the **Relays** page in the extension settings. |
| 81 | + |
| 82 | +## How It Works |
| 83 | + |
| 84 | +1. You provide a 52-character z-base32 Pkarr public key |
| 85 | +2. The extension fetches the signed DNS packet from Pkarr HTTP relays |
| 86 | +3. The binary payload is parsed to extract DNS records (A, AAAA, CNAME, TXT, HTTPS, etc.) |
| 87 | +4. Records are displayed in a clean UI, with an option to visit the resolved website |
| 88 | + |
| 89 | +No WASM or heavy dependencies — pure JavaScript DNS parsing for maximum compatibility and minimal footprint. |
| 90 | + |
| 91 | +## Contributing |
| 92 | + |
| 93 | +1. Fork the repository |
| 94 | +2. Create a feature branch (`git checkout -b feature/my-feature`) |
| 95 | +3. Commit your changes |
| 96 | +4. Push to the branch and open a pull request |
| 97 | + |
| 98 | +Make sure all checks pass before submitting: |
| 99 | + |
| 100 | +```bash |
| 101 | +npm run lint && npm run format:check && npm test && npm run build |
| 102 | +``` |
0 commit comments