Netflix show IMDb ratings

Add a display of IMDb ratings below movie and show titles while browsing Netflix.
当前为 2019-09-01 提交的版本，查看最新版本。
换行
// ==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;
`
    );

})();