dzcpy / sprout-test

Sprout Test

Table of Contents

• Table of Contents
• Intro
  • Key challenges and highlights
• Toolchain
• Installation
  • Procedures
• Screenshots
  • Popup
• Documentation

Intro

This is the test project for Sprout.

Key challenges and highlights

• Well structured and reusable code
• Uses best practices whenever is possible, detail oriented
• Faster build time and smaller bundle size (compares to Webpack), made possible with vite and rollup. Is it a pun? :)
• Pixel perfect style as per Figma design
• The content panel is written in an iframe, to avoid CSS pollution from both sides
• Flexible iframe height, which is done by observing the inner content box's height and then send to parent frame with window.postMessage
• Coded with ❤

Toolchain

• React 18
• TypeScript
• Jest
• React Testing Library
• Vite
• Tailwind CSS
• SASS
• ESLint
• Prettier
• Chrome Extension Manifest Version 3

Installation

Procedures

1. Clone this repository.
2. Change name and description in package.json => Auto synchronize with manifest
3. Run yarn or npm i (check your node version >= 16)
4. Run yarn dev or npm run dev
5. Load Extension on Chrome
   1. Open - Chrome browser
   2. Access - chrome://extensions
   3. Check - Developer mode
   4. Find - Load unpacked extension
   5. Select - dist folder in this project (after dev or build)
6. If you want to build in production, Just run yarn build or npm run build.

Screenshots

Popup

Documentation

• Vite Plugin
• ChromeExtension
• Rollup
• Tailwind CSS
• React 18
• rollup-plugin-chrome-extension

---

dzcpy