☰

Netflix display IMDb ratings

Add a display of IMDb ratings below movie and show titles while browsing Netflix.

当前为 2019-09-14 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Netflix display IMDb ratings
  3. // @namespace    driver8.net
  4. // @version      0.2.1
  5. // @description  Add a display of IMDb ratings below movie and show titles while browsing Netflix.
  6. // @author       driver8, TeluguGameboy
  7. // @match        *://*.netflix.com/*
  8. // @grant        GM_xmlhttpRequest
  9. // @grant        GM_addStyle
  10. // @grant        GM_getValue
  11. // @grant        GM_setValue
  12. // @require      https://greasyfork.org/scripts/390115-imdb-utility-library-api/code/IMDb%20Utility%20Library%20(API).js?version=733074
  13. // @connect      omdbapi.com
  14. // @connect      imdb.com
  15. // ==/UserScript==
  16.  
  17. (function() {
  18.     'use strict';
  19.  
  20.     console.log('hi netflix');
  21.  
  22.     const pending = new Set(),
  23.           MAX_RESULT_AGE = 30;
  24.  
  25.     // Adds CSS which displays the score in a circular div.
  26.     function addDiv(movieOrShowTitle, data) {
  27.         // Makes sure that we only add the div once.
  28.         if (document.getElementById(data.id)) return;
  29.  
  30.         const el = document.querySelector('.bob-title');
  31.         if (el && el.textContent.trim() === movieOrShowTitle) {
  32.             // Styling the div to be red, circluar, and have large white text.
  33.             const div = document.createElement("div");
  34.             div.classList.add('imdb-rating');
  35.             div.dataset.title = movieOrShowTitle;
  36.             div.textContent = data.rating;
  37.             div.id = data.id;
  38.  
  39.             el.parentNode.insertBefore(div, el.nextSibling);
  40.         }
  41.     }
  42.  
  43.     // This function gets the data from imdb and calls the function to display it.
  44.     function getIMDbScore(movieOrShowTitle) {
  45.         var data = GM_getValue(movieOrShowTitle);
  46.  
  47.         let age_check = true;
  48.         try {
  49.             age_check = Date.now() - new Date(data.dateFetched).getTime() < MAX_RESULT_AGE * 24 * 60 * 60 * 1000; // Update data for results older than X days
  50.         } catch (e) {
  51.             age_check = false;
  52.         }
  53.         if (data instanceof Object && data.hasOwnProperty('rating') && age_check) {
  54.             console.log('EXISTS', data);
  55.             addDiv(movieOrShowTitle, data);
  56.         } else if (pending.has(movieOrShowTitle)) {
  57.             // Do nothing
  58.             //console.log(movieOrShowTitle, 'pending');
  59.         } else {
  60.             console.log(movieOrShowTitle, 'starting');
  61.             pending.add(movieOrShowTitle);
  62.  
  63.             // Use IMDb Utility Library function to get the data
  64.             getImdbInfoFromTitle(movieOrShowTitle).then((data) => {
  65.                 console.log('got data', data);
  66.                 GM_setValue(movieOrShowTitle, data);
  67.                 addDiv(movieOrShowTitle, data);
  68.             }).catch((err) => {
  69.                 console.log(`Error getting data for ${movieOrShowTitle}: ${err}`);
  70.             });
  71.         }
  72.     }
  73.  
  74.     // Main code!
  75.     // Allows extension to observe changes to the dom.
  76.     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  77.  
  78.     // Define an observer that looks for a specific change.
  79.     var observer = new MutationObserver(function(mutations, observer) {
  80.         let titleEl = document.querySelector('.bob-title');
  81.         if (titleEl) {
  82.             let movieOrShowTitle = titleEl.textContent.trim(),
  83.                 ratingDiv = document.querySelector('.imdb-rating');
  84.  
  85.             // If a div exists for this title, do nothing
  86.             if (!(ratingDiv && ratingDiv.dataset.title && ratingDiv.dataset.title === movieOrShowTitle)) {
  87.                 // Display score by getting imdb score and adding to dom.
  88.                 getIMDbScore(movieOrShowTitle);
  89.             }
  90.         }
  91.     });
  92.  
  93.     // Define what element should be observed by the observer and what types of mutations trigger the callback.
  94.     var target = document; // document.querySelector(".mainView");
  95.     observer.observe(target, {
  96.         subtree: true,
  97.         childList: true
  98.     });
  99.  
  100.     GM_addStyle(
  101. `
  102. .imdb-rating {
  103. width: 36px;
  104. height: 28px;
  105. line-height: 29px;
  106. border-radius: 18%;
  107. background: #f5c518;
  108. color: black;
  109. text-align: center;
  110. font-size: 18px;
  111. font-weight: bold;
  112. `
  113.     );
  114.  
  115. })();