Untuk Pengembang

Untuk Pengembang

Better Tiptop adalah proyek open-source yang dikembangkan dengan teknologi modern. Kami menyambut kontribusi dari komunitas!

Tech Stack

Better Tiptop dibangun dengan teknologi berikut:

Frontend Framework

  • SolidJS - Reactive UI framework
  • TypeScript - Type-safe JavaScript
  • WXT - Web Extension Tools framework
  • TailwindCSS - Utility-first CSS framework

Build Tools

  • Vite - Fast build tool
  • ESLint - Linting utilities
  • Prettier - Code formatter

Chrome Extension

  • Manifest V3 - Latest extension manifest
  • Chrome APIs - Storage, Tabs, Scripting
  • Content Scripts - DOM manipulation
  • Background Service Worker - Task orchestration

GitHub Repository

Kode sumber Better Tiptop tersedia di: GitHub

Struktur Proyek

better-tiptop/
├── src/
│   ├── background/      # Background service worker
│   ├── content/         # Content scripts
│   ├── popup/           # Extension popup UI
│   ├── components/      # Reusable UI components
│   ├── utils/           # Helper functions
│   └── types/           # TypeScript types
├── public/              # Static assets
├── wxt.config.ts        # WXT configuration
├── tsconfig.json        # TypeScript config
└── package.json         # Dependencies

Pengaturan Development

Prerequisites

# Node.js 18+ dan npm/pnpm
node --version  # v18.0.0 atau lebih baru
npm --version   # v9.0.0 atau lebih baru

Setup

# Clone repository
git clone https://github.com/apraditya/better-tiptop-ext.git
cd better-tiptop

# Install dependencies
npm install
# atau
pnpm install

# Development mode
npm run dev
# atau
pnpm dev

Build untuk Production

# Build extension
npm run build
# atau
pnpm build

# Output akan di folder .output/

Load ke Chrome (Development)

  1. Buka chrome://extensions/
  2. Enable Developer mode
  3. Klik Load unpacked
  4. Pilih folder .output/chrome-mv3

Arsitektur

Background Service Worker

Mengelola task asynchronous dan state global:

// src/background/index.ts
export default defineBackground(() => {
  console.log('Background service worker started');
  // Setup event listeners
  // Manage state
  // Handle messaging
});

Content Script

Berinteraksi dengan DOM Tiptop Shop:

// src/content/index.ts
export default defineContentScript({
  matches: ['*://shop.tiptop.co.id/*'],
  main() {
    // DOM manipulation
    // Event handling
    // Product extraction
  },
});

Antarmuka pengguna dengan SolidJS:

// src/popup/App.tsx
export default function App() {
  const [products, setProducts] = createSignal([]);
  // Component logic
  return (
    <div class="popup-container">
      {/* UI elements */}
    </div>
  );
}

Panduan Kontribusi

Kami sangat menghargai kontribusi! Berikut cara berkontribusi:

Reporting Issues

Saat melaporkan bug, sertakan:

  • Deskripsi jelas masalah
  • Langkah untuk reproduce
  • Expected vs actual behavior
  • Environment (OS, Chrome version, Better Tiptop version)
  • Screenshot jika relevan

Pull Request Guidelines

  1. Fork repository
  2. Create branch untuk fitur/fix
    git checkout -b feature/nama-fitur
  3. Commit changes dengan pesan yang jelas
    git commit -m "feat: add new feature"
  4. Push ke fork Anda
    git push origin feature/nama-fitur
  5. Create Pull Request dengan deskripsi yang jelas

Code Style

  • Gunakan Prettier untuk formatting
  • Ikuti ESLint rules
  • Tulis TypeScript types untuk semua functions
  • Tambahkan comments untuk logic kompleks

Commit Convention

Ikuti Conventional Commits:

  • feat: New feature
  • fix: Bug fix
  • docs: Documentation changes
  • style: Code style changes (formatting, etc)
  • refactor: Code refactoring
  • test: Adding or updating tests
  • chore: Maintenance tasks

Testing

# Run unit tests
npm run test

# Run E2E tests
npm run test:e2e

# Type checking
npm run type-check

License

Better Tiptop dilisensikan under MIT License. Lihat file LICENSE untuk detail.

Kredit

Terima kasih kepada semua kontributor yang telah berkontribusi pada Better Tiptop!

Kontributor Utama

  • [Your Name] - Initial development

Pihak Terkait

  • Tiptop Shop - Platform yang kami automatisasi
  • SolidJS Team - Excellent reactive framework
  • WXT Team - Great web extension framework

Resources

Kontak

Untuk pertanyaan teknis atau diskusi: