Keepix 📸

Keepix is a Chrome Extension (Manifest V3) that displays real-time resolution overlays (width × height) for images and videos on web pages, along with convenient one-click download buttons.

---

✨ Features

• 📐 Media Dimension Overlay: Displays natural image and video dimensions (Width × Height).
• ⬇️ One-Click Downloads: Direct download button attached to media items for quick saving.
• ⚙️ Configurable Display: Choose between showing dimensions always or only when hovering over media.
• 🔄 Dynamic Content Support: Automatically detects new media elements dynamically added to web pages using a MutationObserver.
• 🎨 Modern Popup Interface: Built with Vite and styled using Tailwind CSS v4.

---

🛠️ Built With

• Manifest Version: Manifest V3
• Frontend Stack: JavaScript (ES Modules), HTML5, CSS3
• Styling: Tailwind CSS v4
• Bundler: Vite 6

---

🚀 Getting Started

Prerequisites

Ensure you have Node.js installed on your machine.

Installation

1. Clone the repository:

   git clone https://github.com/your-username/keepix.git
   cd keepix

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

Loading in Google Chrome

1. Open Google Chrome and navigate to chrome://extensions/.
2. Enable Developer mode using the toggle switch in the top-right corner.
3. Click Load unpacked.
4. Select the project directory (or dist folder depending on your build target).

---

💻 Development

Run the Vite development server:

npm run dev

Build production assets:

npm run build

Preview build output:

npm run preview

---

📄 Disclaimer & License

This extension is intended for personal use only. Please respect copyright laws and website terms of service when downloading media from the web. Distributed under the GPL-3.0 License. See LICENSE for more information.