RateFlix

IMDb ratings, instantly on Netflix and Prime Video.

A lightweight Chrome Extension that overlays IMDb rating badges directly on movie and TV show posters — so you can gauge quality at a glance while browsing.

---

Supported Platforms

Platform	Status
Netflix	Supported
Amazon Prime Video	Supported
Prime Video (primevideo.com)	Supported

---

Features

• Instant ratings — IMDb scores appear as badges on every poster
• Multi-platform — Works on Netflix, amazon.com, and primevideo.com
• Color-coded — Green (8+), Yellow (6–7.9), Red (<6), Grey (N/A)
• Smart caching — Ratings stored locally for 30 days; N/A retried after 6 hours
• Infinite scroll — New posters detected automatically via MutationObserver
• Lazy loading — Only visible posters are processed (IntersectionObserver)
• Deduplication — One API call per unique title, even across multiple poster elements
• Zero dependencies — Pure vanilla JavaScript, no build step

---

Quick Start

1. Get an OMDb API Key

1. Go to omdbapi.com/apikey.aspx
2. Sign up for a free key (1,000 requests/day)
3. Click the activation link in the verification email

2. Configure

cp src/config.example.json src/config.json

Edit src/config.json and replace the placeholder with your key:

{
  "OMDB_API_KEY": "your_key_here"
}

3. Load in Chrome

1. Navigate to chrome://extensions/
2. Enable Developer mode (top-right toggle)
3. Click Load unpacked
4. Select the RateFlix/ folder

4. Browse

Open netflix.com or primevideo.com — rating badges appear automatically on posters.

---

Architecture

RateFlix/
├── manifest.json              Manifest V3 configuration
├── LICENSE                    MIT license
├── icons/
│   ├── icon16.png             Toolbar icon
│   ├── icon48.png             Extensions page icon
│   ├── icon128.png            Store icon
│   └── icon.svg               Source vector
└── src/
    ├── config.example.json    API key template (committed)
    ├── config.json            Your API key (git-ignored)
    ├── background.js          Service worker: API calls, caching, message handling
    ├── constants.js           Shared constants (CSS classes, timings, message types)
    ├── utils.js               Helpers: normalizeTitle, debounce, safeQuerySelector
    ├── overlay.js             Badge DOM creation and injection
    ├── domObserver.js         MutationObserver for dynamic content
    ├── platform.js            Platform detection and adapter dispatch
    ├── content.js             Main content script: poster detection and orchestration
    ├── styles.css             Badge styling with color-coded accents
    └── adapters/
        ├── netflix.js         Netflix-specific selectors and title extraction
        └── primevideo.js      Prime Video-specific selectors and title extraction

Data Flow

Streaming platform page (Netflix / Prime Video)
  │
  ├─ platform.js detects hostname → selects adapter
  │
  ├─ content.js scans for poster elements using adapter selectors
  │
  ├─ IntersectionObserver triggers when poster is visible
  │
  ├─ adapter.extractTitle() reads title from platform-specific attributes
  │
  ├─ chrome.runtime.sendMessage → background.js
  │   │
  │   ├─ Cache HIT → return immediately
  │   │
  │   └─ Cache MISS → OMDb API (title → movie → series → search)
  │       └─ Cache result → return
  │
  └─ injectBadge() renders ⭐ 8.7 on poster

---

Configuration

Setting	Location	Default
API Key	src/config.json	— (required)
Cache TTL (valid)	src/background.js	30 days
Cache TTL (N/A)	src/background.js	6 hours
Observer debounce	src/constants.js	300 ms
Intersection threshold	src/constants.js	0.1

---

Badge Colors

Rating Range	Color	Meaning
8.0 and above	Green	Excellent
6.0 – 7.9	Yellow	Good
Below 6.0	Red	Below average
N/A	Grey	Not found

---

Adding a New Platform

RateFlix uses an adapter pattern. To add support for another streaming platform:

1. Create src/adapters/yourplatform.js exporting: getPosterSelector(), getSecondarySelector(), shouldSkipSecondary(), extractTitle(), findBadgeContainer()
2. Add the hostname mapping in src/platform.js
3. Add a content_scripts entry in manifest.json with the platform URL and adapter file

---

Tech Stack

Component	Technology
Extension standard	Manifest V3
Language	Vanilla JavaScript (ES2020+)
Storage	Chrome Storage API
DOM detection	MutationObserver
Lazy processing	IntersectionObserver
API	OMDb (omdbapi.com)
Build step	None

---

Troubleshooting

Symptom	Fix
No badges appear	Check src/config.json has a valid, activated API key
All badges show N/A	Verify key at omdbapi.com
Badges on wrong position	Platform DOM may have changed; open an issue
Rate limited	Free tier = 1,000 req/day; cached ratings don't count

---

License

MIT