JR Logo
AF Buddy
Updated Sep 2023Vue3

AF Buddy - Appframe Dev Toolkit

Chrome DevTools extension for Appframe development. Built with Vue3 and Monaco editor.

Chrome extension providing development tools for Appframe web development. Built with Vue3, TypeScript, and Chrome Extension APIs.

Build Key Features

  1. 01

    Code Management

    Monaco-based code editor with theme support and auto-formatting. Includes snippet saving and history tracking.

    Code Management
  2. 02

    Tab Management

    Chrome tab control with configurable limits and auto-close features. Supports tab exclusion and custom filters.

    Tab Management
  3. 03

    Development Tools

    Geolocation spoofing, user agent switching, and JSON editing with Monaco integration.

    Development Tools
  4. 04

    UI Customization

    Theme switching with 50+ Monaco themes, custom layouts, and font selection. GSAP-powered animations.

    UI Customization

Friction Challenges

  1. 1

    Extension Architecture

    Building multi-context extension with background scripts, content scripts, and devtools integration.

  2. 2

    Build Process

    Setting up Parcel bundling for multiple extension entry points while maintaining hot reload.

  3. 3

    Editor Integration

    Integrating Monaco editor with Vue components and handling theme/font dynamic loading.

Takeaways Learnings

Extension Development

  • Chrome extension architecture and messaging systems
  • DevTools panel integration and debugging protocols

Vue Patterns

  • Vuex store management across extension contexts
  • Component organization with lazy loading

Build Systems

  • Multi-target Parcel configuration for extension builds
  • Hot module replacement in extension context