For Developers

For Developers

Better Tiptop is an open-source project developed with modern technologies. We welcome contributions from the community!

Tech Stack

Better Tiptop is built with the following technologies:

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

Better Tiptop source code is available at: GitHub

Project Structure

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

Development Setup

Prerequisites

# Node.js 18+ and npm/pnpm
node --version  # v18.0.0 or newer
npm --version   # v9.0.0 or newer

Setup

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

# Install dependencies
npm install
# or
pnpm install

# Development mode
npm run dev
# or
pnpm dev

Build for Production

# Build extension
npm run build
# or
pnpm build

# Output will be in .output/ folder

Load to Chrome (Development)

  1. Open chrome://extensions/
  2. Enable Developer mode
  3. Click Load unpacked
  4. Select the .output/chrome-mv3 folder

Architecture

Background Service Worker

Manages asynchronous tasks and global state:

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

Content Script

Interacts with Tiptop Shop DOM:

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

User interface with SolidJS:

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

Contribution Guide

We really appreciate contributions! Here’s how to contribute:

Reporting Issues

When reporting a bug, include:

  • Clear description of the issue
  • Steps to reproduce
  • Expected vs actual behavior
  • Environment (OS, Chrome version, Better Tiptop version)
  • Screenshot if relevant

Pull Request Guidelines

  1. Fork repository
  2. Create branch for feature/fix
    git checkout -b feature/feature-name
  3. Commit changes with clear messages
    git commit -m "feat: add new feature"
  4. Push to your fork
    git push origin feature/feature-name
  5. Create Pull Request with clear description

Code Style

  • Use Prettier for formatting
  • Follow ESLint rules
  • Write TypeScript types for all functions
  • Add comments for complex logic

Commit Convention

Follow 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 is licensed under MIT License. See LICENSE file for details.

Credits

Thanks to all contributors who have contributed to Better Tiptop!

Key Contributors

  • [Your Name] - Initial development
  • Tiptop Shop - The platform we automate
  • SolidJS Team - Excellent reactive framework
  • WXT Team - Great web extension framework

Resources

Contact

For technical questions or discussion: