FloatNote - Web Highlighter & Minimal Notes

A sleek, context-aware floating notebook and web highlighter built for modern browsers.

---

Screenshots

Feature Overview	Highlighting in Action

---

Features

• Floating Sidebar: Quickly accessible on any web page with the Ctrl+Shift+X (Cmd+Shift+X on Mac) keyboard shortcut.
• Web Highlighter: Seamlessly highlight text on any webpage and save it directly to your notes.
• Context-Aware: Automatically captures the URL and page context when you make a note.
• Minimalist & Sleek UI: Built with Framer Motion for buttery-smooth animations and Tailwind CSS for a gorgeous, responsive, out-of-the-way design.
• Local Storage: All your notes and highlights are securely and instantly stored locally using Chrome's Storage API.

Tech Stack

This project is built using modern web development tools to guarantee performance, scalability, and an excellent developer experience. It demonstrates a solid understanding of modern extension architecture and UI/UX implementation:

• Frontend Framework: React 19
• Language: TypeScript for end-to-end type safety and better developer tooling.
• Styling: Tailwind CSS v4 for a utility-first, highly maintainable design system.
• Animations: Framer Motion powering fluid micro-interactions and transitions.
• Icons: Lucide React for crisp, scalable vectors.
• Build Tooling: Vite with @crxjs/vite-plugin providing a lightning-fast HMR (Hot Module Replacement) Chrome Extension developer experience.

Getting Started

🌟 Install from the Chrome Web Store

The easiest way to use FloatNote is to install it directly from the Chrome Web Store:

👉 Install FloatNote on Chrome 👈

---

🛠️ Local Development Setup

If you want to modify, build, or test the extension locally, follow these instructions.

Prerequisites

• Node.js (v18 or higher recommended)
• npm, yarn, or pnpm

Installation

1. Clone the repository:

   git clone https://github.com/shubhamshettyy/FloatNote.git
   cd minimal-notes-chrome-extension

2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

   This will run Vite in development mode and generate a dist folder that auto-updates when you modify the code.

Loading the Extension locally for Development

1. Open Google Chrome and navigate to chrome://extensions/.
2. Enable Developer mode using the toggle in the top right corner.
3. Click on the Load unpacked button.
4. Select the dist folder generated by the build process.
5. The development version of FloatNote is now installed! You can pin it to your toolbar for easy access.

Keyboard Shortcuts

• Toggle Sidebar: Ctrl + Shift + X (Windows/Linux) or Command + Shift + X (Mac)

Permissions Used

• storage: For securely saving user notes and highlights locally on the device.
• activeTab: To extract page context and enable seamless highlighting on the currently viewed page.

---

If you find this project interesting or useful, please consider giving it a ⭐!