Tiny-Notes

Tiny Notes

A lightweight Chrome extension for quick note-taking with a sticky note aesthetic. Simple, colorful, and always accessible from your browser.

Features

• Quick Note Creation: Add notes instantly with a floating action button
• Color-Coded Notes: Choose from 6 different colors for each note
• Search Functionality: Find your notes quickly with built-in search
• Edit & Delete: Manage your notes with simple controls
• Custom Fonts: Select from 9 handwriting and display fonts
• Sticky Note Design: Classic sticky note appearance with gradient backgrounds
• Export/Import: Backup and restore your notes as JSON files
• Persistent Storage: All notes are saved locally in your browser

Installation

1. Clone or download this repository:

   git clone https://github.com/bluenchanter/Tiny-Notes.git
   

2. Load the extension in Chrome:
   • Navigate to chrome://extensions/
   • Enable Developer mode (top right corner)
   • Click Load unpacked
   • Select the Tiny-Notes folder
3. The extension icon will appear in your toolbar

Usage

• Click the extension icon to open the note panel
• Click the + button to create a new note
• Choose a color for your note from the color picker
• Write your note and click Save Note
• Use the search bar to filter notes
• Edit or delete notes using the controls on each note
• Customize font style in Settings

Technical Details

• Built with vanilla JavaScript, HTML, and CSS
• Uses Chrome Storage API for data persistence
• Manifest V3 compliant
• Google Fonts integration for typography
• No external dependencies or frameworks

Files

• manifest.json - Extension configuration
• popup.html - Main UI structure
• popup.js - Note management logic
• styles.css - Sticky note styling
• settings.html / settings.js - Settings page
• background.js - Background script

License

Free to use and modify.