# Project export: Bramble This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: Shop wild, shop local - Devpost: https://devpost.com/software/bramble-4cegjm - GitHub: https://github.com/JosePerezIV/bramble - Video: https://www.youtube.com/embed/w6dZJnNeMos?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Team: 2 GitHub contributor(s) β€” JosePerezIV (48 commits), Claude Sonnet 4.5 (25 commits) ## Devpost submission (written by the team) ### Inspiration I heard a co-host on the WAN Show mention wanting a browser extension that helps you avoid mega-corporations and find local alternatives. I thought it sounded like a fun hackathon project, so I built it. ### What it does Bramble is a Chrome extension that works when you're shopping on Amazon, Walmart, Target, or Best Buy. It identifies who actually owns the brand you're looking at, shows you local stores nearby that might carry the item, and suggests small online retailers as alternatives. You can set which brands you want to avoid and see everything on a map with directions. How I built it It's a Chrome extension using Claude API to analyze products and identify parent companies, Google Places API to find local stores, Brave Search API to find small online retailers, and Leaflet for the interactive map. The background service worker handles all the API calls to avoid CORS issues. I used Claude Code to speed up development during the 24-hour time crunch. Challenges Google and Bing both deprecated their web search APIs right when I needed them, so I had to switch to Brave Search API. Getting the extension to work across different retail sites was tricky since they all use different page structures. The biggest challenge was keeping it honest. Early versions just showed nearby stores without knowing if they had the product, which felt misleading. I changed it to say "call to confirm" instead of pretending to have data I don't have. What I learned I learned how Chrome extensions actually work, how to handle API calls in browser extensions without CORS errors, and how to integrate multiple APIs into one project. I also learned that building something mission-driven means saying no to shortcuts, like suggesting Target as an "alternative" to Amazon when they're both mega-corporations. ### What's next Add real inventory data where possible, let users submit their own local store recommendations, and maybe expand to other browsers. The goal is to make it actually easier to shop locally instead of just telling people they should. ## README (from the GitHub repository) # Bramble 🌿 Shop independently - find local alternatives to mega-corporations. A Chrome extension that helps you discover local businesses and ethical alternatives when shopping on major retail sites. ## Features - **Product Detection**: Automatically detects products on Amazon, Walmart, Target, and Best Buy - **Side Panel UI**: Beautiful, collapsible side panel with smooth animations - **Company Analysis**: Identifies parent companies and provides ethical scores - **Alternative Recommendations**: Suggests local businesses, sustainable options, and fair-trade alternatives - **Cost-Benefit Analysis**: Shows the positive impact of choosing ethical alternatives - **Customizable Settings**: Toggle preferences for local businesses, avoiding specific corporations, and sustainable products - **Impact Tracking**: Keep track of your ethical shopping contributions ## Installation ### Development Mode 1. Clone or download this repository 2. Open Chrome and navigate to `chrome://extensions/` 3. Enable "Developer mode" in the top right corner 4. Click "Load unpacked" 5. Select the `treehacks-project` directory 6. The Bramble extension is now installed! ### Using the Extension 1. Visit any product page on: - Amazon.com - Walmart.com - Target.com - BestBuy.com 2. Wait for the extension to detect the product (you'll see a green checkmark badge) 3. Click the floating toggle button on the right side of the page to open the side panel 4. Browse ethical alternatives and make informed decisions! 5. Click the extension icon in the toolbar to customize your preferences ## File Structure ``` treehacks-project/ β”œβ”€β”€ manifest.json # Extension manifest (Manifest V3) β”œβ”€β”€ content.js # Content script for product detection β”œβ”€β”€ sidepanel.html # Side panel UI structure β”œβ”€β”€ sidepanel.js # Side panel controller β”œβ”€β”€ popup.html # Extension settings popup β”œβ”€β”€ popup.js # Popup controller β”œβ”€β”€ background.js # Service worker for messaging β”œβ”€β”€ styles.css # Cohesive design system β”œβ”€β”€ icons/ β”‚ β”œβ”€β”€ icon16.png # 16x16 icon β”‚ β”œβ”€β”€ icon48.png # 48x48 icon β”‚ └── icon128.png # 128x128 icon └── README.md # This file ``` ## Design System Bramble uses a cohesive earth-tone color palette: - **Primary Green**: `#7ba05b` - Main brand color - **Dark Green**: `#5d7e47` - Hover states and emphasis - **Light Green**: `#9cb87f` - Accents - **Cream**: `#f5f3ed` - Background - **Warm Gray**: `#d4d0c8` - Borders and subtle elements - **Text Dark**: `#2d4a2b` - Primary text ## Settings Configure your preferences in the extension popup: - **πŸͺ Support Local Businesses** - Prioritize local shops in recommendations - **🌱 Sustainable Products** - Prioritize eco-friendly alternatives - **🚫 Brands to Avoid** - Add any brands or companies you want to avoid (e.g., Amazon, NestlΓ©, Walmart, etc.) ## Future Enhancements - Integration with real alternative product databases - User reviews and ratings for alternatives - Price comparison tools - Carbon footprint calculator - Community-sourced alternatives - Browser extension for Firefox - Mobile app version ## Technology Stack - **Manifest V3**: Latest Chrome extension standard - **Vanilla JavaScript**: Modern ES6+ syntax - **CSS3**: Animations and responsive design - **Chrome Storage API**: Settings and data persistence - **Chrome Messaging API**: Inter-component communication ## Privacy Bramble respects your privacy: - No data collection or tracking - No external API calls (in current version) - All data stored locally on your device - Settings synced via Chrome Sync (optional) - Open source and transparent ## Contributing Contributions are welcome! Please feel free to submit issues or pull requests. ## License MIT License - Feel free to use and modify as needed. ## Credits Created for TreeHacks 2026 🌲 --- **Note**: This is a prototype with placeholder data for alternatives. In production, this would integrate with real databases of ethical businesses and product alternatives. ## Detected evidence (automated analysis) Indexed codebase: 12 recognized source files, 312 KB. - CSS (language) β€” detected in the code - HTML (language) β€” detected in the code - JavaScript (language) β€” detected in the code - AI coding agent: Claude Code β€” evidence: commit authorship or trailers ## Codebase structure (from repository index) ### Files (14 of 14) ``` .gitignore api.js background.js config.example.js content.js lib/leaflet.css lib/leaflet.js manifest.json popup.html popup.js README.md sidepanel.html styles.css utils.js ``` ### Dependencies No dependency index available. ### Recent commits (newest first) - Fix values match: Robust brand matching + better debugging - Major performance boost: Show company analysis instantly - Performance + UX: Faster analysis with Haiku + fix values match for avoided brands - Rebrand: Vinegar β†’ Bramble - Shop Wild, Shop Local - Fix: Add chrome.storage safety checks to prevent undefined errors - Simplify stats: Remove CO2 and local economy, keep only alternatives viewed - Implement preference toggles: Support Local & Sustainable Products - Add debug logging to diagnose filter issue - Stricter filtering: Block generic eco shops and irrelevant results - Fix price scraping: Handle cents correctly + better filtering - Fix console errors: Silence tab-related errors and attempt CORS fix - Quality over quantity: Limit to top 5 alternatives with better filtering - Fix formatting: Truncate long descriptions from search results - Fix CORS issue: Add Brave Search API to host_permissions - Switch to Brave Search API (Bing was decommissioned) - Switch from Google Custom Search to Bing Web Search API - Implement real data strategy: web search + price scraping (NO HALLUCINATION) - Major UX fixes: location prompt, filter big box retailers, fix undefined - Fix 'undefined' showing in alternative address - Fix critical issues: filter current store and improve price detection ## Key source files (fetched from GitHub, selected and truncated for size) ### config.example.js ```javascript /** * Bramble Configuration Template * Copy this file to config.js and add your actual API key. */ const CONFIG = { ANTHROPIC_API_KEY: "your-api-key-here" }; ``` ### sidepanel.html ```html Bramble Side Panel

🌿 Bramble

Shop Wild, Shop Local

Current Product

Company Analysis

🏒 Parent Company: Amazon Inc.
Ethical Score:
35/100

Ethical Alternatives

Cost-Benefit Analysis

πŸ’° Support local economy
🌱 Reduced carbon footprint
🀝 Fair labor practices
πŸ“¦ Sustainable packaging
``` ### utils.js ```javascript /** * Bramble Utility Functions * Distance calculations and location helpers */ /** * Calculate distance between two coordinates using Haversine formula * @param {number} lat1 - Latitude of first point * @param {number} lon1 - Longitude of first point * @param {number} lat2 - Latitude of second point * @param {number} lon2 - Longitude of second point * @returns {number} Distance in miles */ function calculateDistance(lat1, lon1, lat2, lon2) { const R = 3959; // Radius of Earth in miles const dLat = toRadians(lat2 - lat1); const dLon = toRadians(lon2 - lon1); const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRadians(lat1)) * Math.cos(toRadians(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2); const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a)); const distance = R * c; return distance; } /** * Convert degrees to radians */ function toRadians(degrees) { return degrees * (Math.PI / 180); } /** * Categorize distance into ranges * @param {number} distance - Distance in miles * @returns {string} Distance category */ function categorizeDistance(distance) { if (distance < 5) { return '< 5 mi'; } else if (distance < 20) { return '5-20 mi'; } else if (distance < 50) { return '20-50 mi'; } else { return '> 50 mi'; } } /** * Get formatted distance string * @param {number} distance - Distance in miles * @returns {string} Formatted distance (e.g., "3.2 mi", "45.7 mi") */ function formatDistance(distance) { if (distance < 0.1) { return '< 0.1 mi'; } return `${distance.toFixed(1)} mi`; } /** * Calculate ethical score bonus based on distance * @param {number} distance - Distance in miles * @returns {number} Score bonus (0-20 points) */ function getDistanceBonus(distance) { if (distance < 10) { return 20; } else if (distance < 25) { return 10; } return 0; } /** * Get rough location description from coordinates * In production, this would use a reverse geocoding API * For now, just returns formatted coordinates * @param {number} lat - Latitude * @param {number} lon - Longitude * @returns {string} Location description */ function getLocationDescription(lat, lon) { // Format coordinates nicely const latDir = lat >= 0 ? 'N' : 'S'; const lonDir = lon >= 0 ? 'E' : 'W'; return `${Math.abs(lat).toFixed(2)}Β°${latDir}, ${Math.abs(lon).toFixed(2)}Β°${lonDir}`; } /** * Estimate city/state from coordinates (mock implementation) * In production, this would use a reverse geocoding API like Google Maps or Nominatim * For now, returns rough estimates based on known coordinates * @param {number} lat - Latitude * @param {number} lon - Longitude * @returns {string} City, State */ function estimateCityState(lat, lon) { // Mock implementation - in production, use reverse geocoding API // This is just for demonstration purposes // San Francisco Bay Area if (lat > 37 && lat < 38 && lon > -123 && lon < -121) { return 'San Francisco, CA'; } // Los Angeles Area else if (lat > 33 && lat < 35 && lon > -119 && lon < -117) { return 'Los Angeles, CA'; } // New York Area else if (lat > 40 && lat < 41 && lon > -75 && lon < -73) { return 'New York, NY'; } // Seattle Area else if (lat > 47 && lat < 48 && lon > -123 && lon < -121) { return 'Seattle, WA'; } // Chicago Area else if (lat > 41 && lat < 42 && lon > -88 && lon < -87) { return 'Chicago, IL'; } // Default: return coordinates else { return getLocationDescription(lat, lon); } } /** * Validate coordinates * @param {number} lat - Latitude * @param {number} lon - Longitude * @returns {boolean} True if valid */ function isValidCoordinates(lat, lon) { return ( typeof lat === 'number' && typeof lon === 'number' && lat >= -90 && lat <= 90 && lon >= -180 && lon <= 180 && !isNaN(lat) && !isNaN(lon) ); } // Export functions for use in other scripts if (typeof module !== 'undefined' && module.exports) { module.exports = { calculateDistance, categorizeDistance, formatDistance, getDistanceBonus, getLocationDescription, estimateCityState, isValidCoordinates }; } ``` ### api.js ```javascript /** * Bramble API Integration * Claude API for product analysis and ethical scoring */ /** * Analyze product using Claude API * @param {string} productName - Name of the product * @param {Object} userPreferences - User's preferences (avoided brands, location, etc.) * @returns {Promise} Analysis results */ async function analyzeProduct(productName, userPreferences = {}) { console.log('Bramble API: Analyzing product:', productName); try { // Build the prompt const prompt = buildAnalysisPrompt(productName, userPreferences); // Call Claude API const response = await fetch('https://api.anthropic.com/v1/messages', { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-api-key': CONFIG.ANTHROPIC_API_KEY, 'anthropic-version': '2023-06-01' }, body: JSON.stringify({ model: 'claude-haiku-4-5-20251001', max_tokens: 1200, messages: [ { role: 'user', content: prompt } ] }) }); if (!response.ok) { const errorData = await response.json().catch(() => ({})); console.error('Bramble API: API error:', errorData); if (response.status === 429) { throw new Error('API_RATE_LIMIT'); } else { throw new Error(`API_ERROR: ${response.status}`); } } const data = await response.json(); console.log('Bramble API: Raw response:', data); // Extract text from Claude's response const text = data.content[0].text; // Parse JSON, stripping markdown if present const analysis = parseClaudeResponse(text); console.log('Bramble API: Parsed analysis:', analysis); return analysis; } catch (error) { console.error('Bramble API: Error:', error); throw error; } } /** * Build analysis prompt for Claude */ function buildAnalysisPrompt(productName, userPreferences) { const avoidedBrands = userPreferences.avoidedBrands || []; const location = userPreferences.location || null; return `You are analyzing a product for ethical shopping purposes. The user is considering buying: "${productName}" User's preferences: - Brands to avoid: ${avoidedBrands.length > 0 ? avoidedBrands.join(', ') : 'None specified'} - Location: ${location ? `${location.display}` : 'Not provided'} Analyze this product and provide information about: 1. The parent company that manufactures or owns this product 2. An ethical score (0-100) based on labor practices, environmental impact, corporate ethics 3. Key ethical concerns (if any) 4. Product category 5. Types of ethical alternatives available 6. Cost-benefit analysis explaining why choosing alternatives matters 7. Keywords for finding local alternatives Return ONLY valid JSON with this exact structure (no markdown, no code blocks, no explanation): { "parentCompany": "Company Name", "ethicalScore": 0-100, "concerns": ["concern1", "concern2", "concern3"], "productCategory": "category name", "alternativeTypes": ["Local businesses", "Sustainable brands", "Fair trade options"], "costBenefitAnalysis": "A persuasive 2-3 sentence explanation of why choosing ethical alternatives for this product matters, focusing on real-world impact.", "suggestedStoreKeywords": ["keyword1", "keyword2", "keyword3"] } Important: Return ONLY the JSON object, no other text.`; } /** * Parse Claude's response, stripping markdown if present */ function parseClaudeResponse(text) { try { // Remove markdown code blocks if present let cleanText = text.trim(); // Remove ```json and ``` markers cleanText = cleanText.replace(/^```json\s*/i, ''); cleanText = cleanText.replace(/^```\s*/, ''); cleanText = cleanText.replace(/```\s*$/, ''); // Trim again cleanText = cleanText.trim(); // Parse JSON const parsed = JSON.parse(cleanText); // Validate required fields if (!parsed.parentCompany || typeof parsed.ethicalScore !== 'number') { throw new Error('Invalid response structure'); } // Ensure arrays exist parsed.concerns = parsed.concerns || []; parsed.alternativeTypes = parsed.alternativeTypes || []; parsed.suggestedStoreKeywords = parsed.suggestedStoreKeywords || []; // Clamp ethical score to 0-100 parsed.ethicalScore = Math.max(0, Math.min(100, parsed.ethicalScore)); return parsed; } catch (error) { console.error('Bramble API: Failed to parse response:', error); console.error('Bramble API: Raw text:', text); throw new Error('PARSE_ERROR'); } } /** * Get fallback analysis when API fails */ function getFallbackAnalysis(productName) { return { parentCompany: 'Unknown', ethicalScore: 50, concerns: ['Unable to analyze - API unavailable'], productCategory: 'General', alternativeTypes: ['Local businesses', 'Sustainable options', 'Fair trade alternatives'], costBenefitAnalysis: 'Supporting local and ethical businesses helps build stronger communities, promotes fair labor practices, and reduces environmental impact.', suggestedStoreKeywords: ['local', 'sustainable', 'ethical'] }; } // Export functions if in module context if (typeof module !== 'undefined' && module.exports) { module.exports = { analyzeProduct, getFallbackAnalysis }; } ``` ### popup.html ```html Bramble Settings