Add a display of IMDb ratings below movie and show titles while browsing Netflix.
As of
// ==UserScript==
// @name Netflix show IMDb ratings
// @namespace driver8.net
// @version 0.1.1
// @description Add a display of IMDb ratings below movie and show titles while browsing Netflix.
// @author driver8, TeluguGameboy
// @match *://*.netflix.com/*
// @grant GM_xmlhttpRequest
// @grant GM_addStyle
// @grant GM_getValue
// @grant GM_setValue
// @connect omdbapi.com
// @connect imdb.com
// ==/UserScript==
(function() {
'use strict';
const APIKEY = ''; //get API key here: https://www.omdbapi.com/apikey.aspx
console.log('hi netflix');
var pending = new Set();
var apikey = APIKEY || GM_getValue('omdb_apikey', '');
// Adds CSS which displays the score in a circular div.
function addDiv(data) {
// Makes sure that we only add the div once.
if (document.getElementById(data.id)) return;
const el = document.querySelector('.bob-title');
// Styling the div to be red, circluar, and have large white text.
const div = document.createElement("div");
div.classList.add('imdb-rating');
div.textContent = data.rating;
div.id = data.id;
el.parentNode.insertBefore(div, el.nextSibling);
}
// OMDb basically contains all IMDb scores in an API format
// so that users can get easy access to the scores.
// This function gets the actual score and adds to the CSS.
function getIMDbScore(movieOrShowTitle) {
//console.log('movieOrShowTitle', movieOrShowTitle);
var data = GM_getValue(movieOrShowTitle);
if (data instanceof Object && data.hasOwnProperty('rating')) {
//console.log('EXISTS', data);
addDiv(data);
} else if (pending.has(movieOrShowTitle)) {
//do nothing
console.log(movieOrShowTitle, 'pending');
} else {
console.log(movieOrShowTitle, 'starting');
pending.add(movieOrShowTitle);
GM_xmlhttpRequest({
method: 'GET',
responseType: 'json',
url: `https://www.omdbapi.com/?t=${movieOrShowTitle}&apikey=${apikey}`,
onload: (resp) => {
console.log('resp', resp);
const json = resp.response;
const data = {
id: json.imdbID,
title: json.Title,
rating: json.imdbRating,
votes: json.imdbVotes
};
GM_setValue(movieOrShowTitle, data);
addDiv(data);
}
});
}
}
// If no API key is set, prompt the user for it.
if (apikey == '') {
var key = prompt('To make this script work, get an API key from https://www.omdbapi.com/apikey.aspx and enter it here now, or as the value of APIKEY at the top of this script', '').trim();
// API keys should be 8 character hexadecimal numbers
if (key.match(/[0-9a-f]{8}/)) {
GM_setValue('omdb_apikey', key);
apikey = key;
} else {
// Without API key, the script must abort.
return -1;
}
}
// Main code!
// Allows extension to observe changes to the dom.
var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
// Define an observer that looks for a specific change.
var observer = new MutationObserver(function(mutations, observer) {
let titleEl = document.querySelector('.bob-title');
if (titleEl) {
//console.log('titleEl', titleEl);
let movieOrShowTitle = titleEl.textContent;
//Some shows have (U.S.) after the title, and omdb doesn't like this.
movieOrShowTitle = movieOrShowTitle.replace(/\s+\(U\.S\.\)/, '').trim();
// Display score by getting imdb score and adding to dom.
getIMDbScore(movieOrShowTitle);
}
});
console.log('observer', observer);
// Define what element should be observed by the observer
// and what types of mutations trigger the callback.
// The change we wish to observe.
var target = document; //document.querySelector(".mainView");
//console.log('target', target);
observer.observe(target, {
subtree: true,
childList: true
});
GM_addStyle(
`
.imdb-rating {
width: 36px;
height: 28px;
line-height: 28px;
border-radius: 18%;
background: #f5c518;
color: black;
text-align: center;
font-size: 18px;
font-weight: bold;
`
);
})();