Netflix display IMDb ratings

Greasy Fork is available in English.
Netflix display IMDb ratings

Add a display of IMDb ratings below movie and show titles while browsing Netflix.
当前为 2019-09-14 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         Netflix display IMDb ratings
// @namespace    driver8.net
// @version      0.2.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
// @require      http://greasyfork.icu/scripts/390115-imdb-utility-library-api/code/IMDb%20Utility%20Library%20(API).js?version=733074
// @connect      omdbapi.com
// @connect      imdb.com
// ==/UserScript==

(function() {
    'use strict';

    console.log('hi netflix');

    const pending = new Set(),
          MAX_RESULT_AGE = 30;

    // Adds CSS which displays the score in a circular div.
    function addDiv(movieOrShowTitle, data) {
        // Makes sure that we only add the div once.
        if (document.getElementById(data.id)) return;

        const el = document.querySelector('.bob-title');
        if (el && el.textContent.trim() === movieOrShowTitle) {
            // Styling the div to be red, circluar, and have large white text.
            const div = document.createElement("div");
            div.classList.add('imdb-rating');
            div.dataset.title = movieOrShowTitle;
            div.textContent = data.rating;
            div.id = data.id;

            el.parentNode.insertBefore(div, el.nextSibling);
        }
    }

    // This function gets the data from imdb and calls the function to display it.
    function getIMDbScore(movieOrShowTitle) {
        var data = GM_getValue(movieOrShowTitle);

        let age_check = true;
        try {
            age_check = Date.now() - new Date(data.dateFetched).getTime() < MAX_RESULT_AGE * 24 * 60 * 60 * 1000; // Update data for results older than X days
        } catch (e) {
            age_check = false;
        }
        if (data instanceof Object && data.hasOwnProperty('rating') && age_check) {
            console.log('EXISTS', data);
            addDiv(movieOrShowTitle, data);
        } else if (pending.has(movieOrShowTitle)) {
            // Do nothing
            //console.log(movieOrShowTitle, 'pending');
        } else {
            console.log(movieOrShowTitle, 'starting');
            pending.add(movieOrShowTitle);

            // Use IMDb Utility Library function to get the data
            getImdbInfoFromTitle(movieOrShowTitle).then((data) => {
                console.log('got data', data);
                GM_setValue(movieOrShowTitle, data);
                addDiv(movieOrShowTitle, data);
            }).catch((err) => {
                console.log(`Error getting data for ${movieOrShowTitle}: ${err}`);
            });
        }
    }

    // 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) {
            let movieOrShowTitle = titleEl.textContent.trim(),
                ratingDiv = document.querySelector('.imdb-rating');

            // If a div exists for this title, do nothing
            if (!(ratingDiv && ratingDiv.dataset.title && ratingDiv.dataset.title === movieOrShowTitle)) {
                // Display score by getting imdb score and adding to dom.
                getIMDbScore(movieOrShowTitle);
            }
        }
    });

    // Define what element should be observed by the observer and what types of mutations trigger the callback.
    var target = document; // document.querySelector(".mainView");
    observer.observe(target, {
        subtree: true,
        childList: true
    });

    GM_addStyle(
`
.imdb-rating {
width: 36px;
height: 28px;
line-height: 29px;
border-radius: 18%;
background: #f5c518;
color: black;
text-align: center;
font-size: 18px;
font-weight: bold;
`
    );

})();