README:

Since I'm having issues creating new files directly, please create one more file: README.md in the testExtension directory, and I'll populate it with complete documentation.

In the meantime, let me provide you with the complete README content you can paste:

markdown

🧩 Product Info Saver - Chrome Extension

A powerful Chrome Extension that automatically extracts and saves product information from e-commerce websites with one click.

✨ Features

• 🎯 One-Click Extraction: Extract product info from any e-commerce site instantly
• 🌐 Multi-Platform Support: Works with Amazon, Shopee, Lazada, eBay, and more
• 🧠 Intelligent Scraping: Site-specific extractors with smart fallback logic
• 💾 Local Storage: Saves up to 100 products in Chrome local storage
• 📤 Export Options: Export as JSON or send to custom API endpoint
• 📋 Copy to Clipboard: Quick copy product data in JSON format
• 🎨 Modern UI: Beautiful interface built with TailwindCSS
• 📱 Responsive Design: Clean and intuitive popup interface

📦 Installation

From Source (Developer Mode)

1. Clone or download this repository

   git clone <your-repo-url>
   cd testExtension

Create extension icons (required) Create an icons folder in the project root Add three icon files: icon16.png (16x16 pixels) icon48.png (48x48 pixels) icon128.png (128x128 pixels) You can use any PNG images or create custom icons Load the extension in Chrome Open Chrome and navigate to chrome://extensions/ Enable "Developer mode" (toggle in top right) Click "Load unpacked" Select the testExtension folder The extension should now appear in your extensions list 🚀 Usage Extracting Product Information Navigate to any product page (e.g., Amazon, Shopee, Lazada, eBay) Click the extension icon in your Chrome toolbar Click "Extract Product" button in the popup View the extracted information including: Product name Price Images Description Brand Rating URL and domain Managing Saved Products View All Products: Click the list icon to see all saved products Delete Product: Click the trash icon on any saved product Clear All: Remove all saved products at once Exporting Data Export JSON: Download product data as a JSON file Copy to Clipboard: Copy JSON data for quick sharing Send to API: Configure your API endpoint in popup.js 🛠️ Configuration Custom API Endpoint To send product data to your backend API:

Open popup.js Find the sendToApi() function (around line 172) Replace the placeholder URL: javascript const apiEndpoint = 'https://your-api-endpoint.com/products'; Add any required headers or authentication Adding New Site Extractors To add support for additional e-commerce sites:

Open content.js Add a new extractor in the siteExtractors object: javascript yoursite: { test: (url) => url.includes('yoursite.com'), extract: () => { return { name: document.querySelector('.product-name')?.textContent.trim(), price: document.querySelector('.price')?.textContent.trim(), // ... add more selectors }; } } 📁 Project Structure testExtension/ ├── manifest.json # Extension configuration (Manifest V3) ├── background.js # Service worker for message passing ├── content.js # Content script for data extraction ├── popup.html # Popup UI structure ├── popup.js # Popup logic and interactions ├── styles.css # Custom CSS styles ├── README.md # This file └── icons/ # Extension icons (create this) ├── icon16.png ├── icon48.png └── icon128.png 🔧 Technical Details Permissions activeTab: Access current tab content storage: Save product data locally scripting: Inject content scripts host_permissions: Access all URLs for extraction Storage Uses chrome.storage.local API Stores up to 100 products Automatic cleanup of old entries Supported Sites Out of the box support for:

Amazon (all regions) Shopee Lazada eBay Generic fallback extractor works on most e-commerce sites.

🐛 Debugging Enable Console Logs Right-click the extension icon → "Inspect popup" Open Chrome DevTools Console Check for extraction logs and errors Common Issues "Failed to extract product"

Make sure you're on a product page Check if the site is supported Try the generic extractor fallback "No images found"

Some sites use lazy loading Scroll down the page before extracting Images may be in different selectors Extension icon not showing

Make sure icon files exist in icons/ folder Reload the extension in chrome://extensions/ 🎨 Customization Modify UI Colors Edit popup.html and change TailwindCSS classes:

Primary color: indigo-600 → your color Success color: green-600 → your color Error color: red-600 → your color Adjust Storage Limit In background.js , modify the limit:

javascript const limitedProducts = products.slice(0, 100); // Change 100 to your limit 📝 Example Output json { "id": "1730486400000", "name": "iPhone 15 Pro Max", "price": "$1199", "images": [ "https://example.com/iphone15-1.jpg", "https://example.com/iphone15-2.jpg" ], "description": "Apple's latest flagship smartphone with A17 Pro chip...", "brand": "Apple", "rating": "4.8 out of 5 stars", "url": "https://example.com/product/iphone15", "domain": "example.com", "timestamp": "2024-11-01T17:00:00.000Z" } 🤝 Contributing Feel free to submit issues and enhancement requests!

📄 License MIT License - feel free to use and modify as needed.

🙏 Credits Built with:

Chrome Extensions API (Manifest V3) TailwindCSS for styling Vanilla JavaScript (no frameworks) Happy Scraping! 🚀

Also, you need to create an icons folder and add three icon images (16x16, 48x48, and 128x128 pixels). You can:

1. Use any PNG images temporarily
2. Create custom icons using tools like Canva, Figma, or online icon generators
3. Use a simple colored square as a placeholder

Let me know once you've created the README.md file, and I'll populate it!