🌈 Sentiment Highlighter - Chrome Extension

A dynamic Chrome Extension that performs real-time sentiment analysis on any webpage using the Hugging Face API and visually highlights text as positive, neutral, or negative with custom styling.

---

🔄 Project Flow Overview

1. 📦 Extension Initialization (Manifest)

• Configured via manifest.json:

  • Declares name, version, icons, and permissions (activeTab, storage, etc.).
  • Registers background.js, content.js, and optional popup.html.
  • Enables injection of content scripts on any website.

2. 🖼️ Popup & User Interface

• Files: popup/popup.html, popup/popup.js

• Users can:

  • Enable/disable sentiment highlighting.
  • Customize highlight colors.
  • Adjust highlight intensity.

• Uses Chrome's local storage to save preferences.

3. 🧠 Content Script (Text & Sentiment)

• File: content.js

• Injected into web pages:

  • Traverses visible DOM text nodes.
  • Sends chunks of text to Hugging Face API.
  • Applies highlights based on sentiment results.

4. 📡 Sentiment Analysis (Hugging Face API)

• Uses models like distilbert-base-uncased-finetuned-sst-2-english.

• Maps labels:

  • LABEL_2 → Positive ✅
  • LABEL_1 → Neutral ⚪
  • LABEL_0 → Negative ❌

5. 🎨 Text Highlighting (DOM + CSS)

• Dynamically wraps text nodes with <span class="sentiment-highlight">.

• Applies inline styles or loads highlight.css with background color + opacity.

• Color mapping based on sentiment:

  • Green: Positive
  • Red: Negative
  • Gray: Neutral

6. ⚙️ Background Script

• File: background.js
• Manages persistent extension state.
• Communicates between popup and content scripts.
• Stores/retrieves settings using Chrome’s storage API.

7. ✨ Highlighting Styles

• File: highlight.css

• Controls appearance:

  • Background color
  • Opacity
  • Transition animations

8. 🔁 Communication Flow

• Popup → Background → Content: Send settings and commands.
• Content → Hugging Face API: Analyze text sentiment.
• Content → DOM: Apply highlight styles dynamically.

9. 🧩 Enabling/Disabling Highlights

• Toggle switch in popup
• Settings saved and applied instantly
• Highlights removed if disabled

10. 🚧 Error Handling

• API failures → Fallback to neutral or skipped text
• No text found → Skip
• Offline → Silent fail

---

🧱 File Structure

Sentiment-Highlighter-Extension/
├── assets/                # Optional images/assets
├── icons/                 # Extension icons
├── popup/
│   ├── popup.html         # Popup UI
│   └── popup.js           # Popup logic
├── background.js          # Background script
├── content.js             # Content script
├── highlight.css          # Styling for highlights
├── manifest.json          # Extension config
└── Project Flow.md        # Technical documentation

---

📡 Technologies Used

Feature	Stack
Frontend UI	HTML, JS, Chrome APIs
Sentiment Analysis API	Hugging Face Transformers API
Communication	Chrome Runtime Messaging
Extension Framework	Chrome Extension Manifest v3
State Persistence	Chrome Storage API

---

🚀 Getting Started

1. Clone the repo:

git clone https://github.com/vedantmpatil/Sentiment-Highlighter-Extension.git

2. Replace the Hugging Face API key inside content.js:

headers: {
  'Authorization': 'Bearer YOUR_HF_TOKEN',
  ...
}

3. Load Extension into Chrome:

• Go to chrome://extensions
• Enable Developer Mode
• Click Load unpacked and select the project folder

4. Test on any website and toggle sentiment highlighting via the popup.

---

🧠 Concepts Demonstrated

• Chrome Extension development (Manifest v3)
• DOM traversal and node manipulation
• Asynchronous JavaScript + API integration
• State persistence with Chrome Storage
• Real-time UX enhancements

---

✍️ Author

Vedant M. Patil 💼 GitHub: vedantmpatil

---

🌟 Star this repo if you found it helpful!