Greasy Fork is available in English.

Add movie ratings to IMDB links [By Pharaoh2k]

Adds movie ratings and number of voters to links on IMDB. Modified version of http://userscripts.org/scripts/show/96884

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください。
  1. // ==UserScript==
  2. // @name Add movie ratings to IMDB links [By Pharaoh2k]
  3. // @description Adds movie ratings and number of voters to links on IMDB. Modified version of http://userscripts.org/scripts/show/96884
  4. // @author StackOverflow community (especially Brock Adams)
  5. // @version 2023-01-28-01-Pharaoh2k
  6. // @license MIT
  7. // @match *://www.imdb.com/*
  8. // @grant GM_xmlhttpRequest
  9. // TODO: Remove this
  10. // @grant unsafeWindow
  11. // @grant GM_addStyle
  12. // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
  13. // @namespace https://greasyfork.org/users/2427
  14. // @derived-from https://greasyfork.org/en/scripts/2033-add-imdb-rating-votes-next-to-all-imdb-movie-series-links-improved
  15. // ==/UserScript==
  16. // Special Thanks to Brock Adams for this script: http://stackoverflow.com/questions/23974801/gm-xmlhttprequest-data-is-being-placed-in-the-wrong-places/23992742
  17.  
  18. var maxLinksAtATime = 100; //-- Pages can have 100's of links to fetch. Don't spam server or browser.
  19. var skipEpisodes = true; //-- I only want to see ratings for movies or TV shows, not TV episodes.
  20. var showAsStar = false; //-- Use IMDB star instead of colored div, less info but more consistent with the rest of the site.
  21. var addRatingToTitle = true; //-- Adds the rating to the browser's title bar (so rating will appear in browser bookmarks).
  22. var showMetaScore = true; //-- When the metascore is available, show it
  23. var useLightBackground = false; //-- If you prefer the site to have a light grey background
  24.  
  25. if (useLightBackground) {
  26. GM_addStyle('.ipc-page-background { background: #e3e2dd !important; color: black !important; }');
  27. // You could also try #262626 for a dark grey but not black background
  28. }
  29.  
  30. // Nov 2022 design has `display: flex` to make all/some info flow downwards, which causes our rating to appear below the link, instead of after it
  31. // TODO: A better solution might be to replace the <a> with a <div> containing the <a> and our rating
  32. // TODO: Or we could try putting the rating inside the link
  33. // TODO: Or we could make the rating float after the link, using position: absolute
  34. GM_addStyle(`
  35. /* For the "Known For" section */
  36. .ipc-primary-image-list-card__content-top {
  37. flex-direction: row;
  38. }
  39.  
  40. /* For the "Credits" section */
  41. .ipc-metadata-list-summary-item__tc {
  42. display: initial;
  43. }
  44. `);
  45.  
  46. // The old iMDB site exposed jQuery, but the new one does not
  47. //var $ = unsafeWindow.$;
  48. // This was exposed by the @require
  49. var $ = jQuery;
  50.  
  51. var fetchedLinkCnt = 0;
  52.  
  53. //const ratingSelectorNew = '.ipc-button > div > div > div > div > span:first-child';
  54. //const ratingSelectorNew = '.ipc-button > div > div > div > div > span:first-child';
  55. const ratingSelectorNew = "*[data-testid='hero-rating-bar__aggregate-rating__score'] > span:nth-child(1)";
  56. const voteCountSelectorNew = "*[data-testid='hero-rating-bar__aggregate-rating__score'] + div + div";
  57.  
  58. function processIMDB_Links() {
  59. //--- Get only links that could be to IMBD movie/TV pages.
  60. var linksToIMBD_Shows = document.querySelectorAll("a[href*='/title/']");
  61.  
  62. var lastLinkProcessed;
  63.  
  64. for (var J = 0, L = linksToIMBD_Shows.length; J < L; J++) {
  65. const currentLink = linksToIMBD_Shows[J];
  66.  
  67. /*--- Strict tests for the correct IMDB link to keep from spamming the page
  68. with erroneous results.
  69. */
  70. if (!/^(?:www\.)?IMDB\.com$/i.test(currentLink.hostname) ||
  71. !/^\/title\/tt\d+\/?$/i.test(currentLink.pathname)
  72. )
  73. continue;
  74.  
  75. // I am beginning to think a whitelist might be better than this blacklist!
  76.  
  77. // Skip if in Bio
  78. if ($(currentLink).hasClass("ipc-md-link")) {
  79. continue;
  80. }
  81.  
  82. // Skip thumbnails on the search results page
  83. if ($(currentLink).closest('.primary_photo').length) {
  84. continue;
  85. }
  86.  
  87. // Skip thumbnails in the six recommendations area of a title page
  88. if ($(currentLink).closest('.rec_item, .rec_poster').length) {
  89. continue;
  90. }
  91.  
  92. // Skip top-rated episodes on the right-hand sidebar of TV series pages; they already display a rating anyway!
  93. if ($(currentLink).closest('#top-rated-episodes-rhs').length) {
  94. continue;
  95. }
  96.  
  97. // Skip thumbnail of title at top of Season page
  98. if ($(currentLink).find(':only-child').prop('tagName') === 'IMG') {
  99. continue;
  100. }
  101.  
  102. // Skip the thumbnail of each episode on a season page (episode names still processed)
  103. if ($(currentLink).closest('.image').length) {
  104. continue;
  105. }
  106.  
  107. // Skip thumbnails in "Known For" section of actor pages
  108. if ($(currentLink).closest('.known-for, .knownfor-title').length && $(currentLink).find('img').length) {
  109. continue;
  110. }
  111.  
  112. // Skip links to character pages
  113. // || currentLink.href.includes('/characters/')
  114. if ($(currentLink).closest('td.character').length) {
  115. continue;
  116. }
  117.  
  118. // Skip episodes on actor pages
  119. if (skipEpisodes && $(currentLink).closest('.filmo-episodes').length) {
  120. continue;
  121. }
  122.  
  123. // On an episode page, skip the next/previous buttons
  124. if ($(currentLink).closest('.bp_item').length) {
  125. continue;
  126. }
  127.  
  128. // New layout 2021
  129.  
  130. // The thumbnails on the "More like this" video cards
  131. if ($(currentLink).closest('.ipc-lockup-overlay').length) {
  132. continue;
  133. }
  134.  
  135. if (typeof lastLinkProcessed !== 'undefined') {
  136. lastLinkProcessed = /[^\?]*/.exec(lastLinkProcessed)[0];
  137. // console.log("lastLinkProcessed="+lastLinkProcessed);
  138.  
  139. }
  140. // console.log("currentLink.href="+currentLink.href.split('?')[0]);
  141.  
  142. continueBttn.style.display = 'inline';
  143. continueBttn.style.top = '0px';
  144. continueBttn.style.left = '50%';
  145. continueBttn.style.position = 'fixed';
  146. continueBttn.style.height = '30px';
  147. continueBttn.style.width = '170px';
  148. continueBttn.style.color = 'black';
  149. continueBttn.style.zIndex = '1000';
  150. continueBttn.style.backgroundColor = 'rgba(245, 245, 149, 0.7)';
  151. continueBttn.style.boxShadow = '0 6px 6px rgb(0 0 0 / 60%)';
  152. currentLink.parentNode.insertBefore(continueBttn, currentLink);
  153.  
  154.  
  155. // Nov 2022: In the list of titles for an actor, there are now two <a>s in each row.
  156. // if (lastLinkProcessed && currentLink.href === lastLinkProcessed.href) {
  157. if (lastLinkProcessed === currentLink.href.split('?')[0]) {
  158. currentLink.setAttribute("data-gm-fetched", "true");
  159. continue;
  160. }
  161.  
  162. if (!currentLink.getAttribute("data-gm-fetched")) {
  163. if (fetchedLinkCnt >= maxLinksAtATime) {
  164. //--- Position the "continue" button.
  165.  
  166. break;
  167. }
  168.  
  169.  
  170. //fetchTargetLink (currentLink); //-- AJAX-in the ratings for a given link.
  171.  
  172. // Stagger the fetches, so we don't overwhelm IMDB's servers (or trigger any throttles they might have)
  173. // Needs currentLink to be a const, or a closure around it
  174. setTimeout(() => fetchTargetLink(currentLink), 300 * fetchedLinkCnt);
  175.  
  176. //---Mark the link with a data attribute, so we know it's been fetched.
  177. currentLink.setAttribute("data-gm-fetched", "true");
  178. lastLinkProcessed = currentLink;
  179. fetchedLinkCnt++;
  180. }
  181. }
  182. }
  183.  
  184. function fetchTargetLink(linkNode) {
  185. //--- This function provides a closure so that the callbacks can work correctly.
  186.  
  187. //console.log("Fetching " + linkNode.href + ' for ', linkNode);
  188.  
  189. /*--- Must either call AJAX in a closure or pass a context.
  190. But Tampermonkey does not implement context correctly!
  191. (Tries to JSON serialize a DOM node.)
  192. */
  193. GM_xmlhttpRequest({
  194. method: 'get',
  195. url: linkNode.href,
  196. //context: linkNode,
  197. onload: function(response) {
  198. prependIMDB_Rating(response, linkNode);
  199. },
  200. onload: function(response) {
  201. prependIMDB_Rating(response, linkNode);
  202. },
  203. onabort: function(response) {
  204. prependIMDB_Rating(response, linkNode);
  205. }
  206. });
  207. }
  208.  
  209. function prependIMDB_Rating(resp, targetLink) {
  210. var isError = true;
  211. var ratingTxt = "** Unknown Error!";
  212. var colnumber = 0;
  213. var justrate = 'RATING_NOT_FOUND';
  214.  
  215. if (resp.status != 200 && resp.status != 304) {
  216. ratingTxt = '** ' + resp.status + ' Error!';
  217. } else {
  218. // Example value: ["Users rated this 8.5/10 (", "8.5/10"]
  219. //var ratingM = resp.responseText.match (/Users rated this (.*) \(/);
  220. // Example value: ["(1,914 votes) -", "1,914"]
  221. //var votesM = resp.responseText.match (/\((.*) votes\) -/);
  222.  
  223. var doc = document.createElement('div');
  224. doc.innerHTML = resp.responseText;
  225. var elem = doc.querySelector('.title-overview .vital .ratingValue strong');
  226.  
  227. var ratingT, votesT;
  228. if (elem) {
  229. // Old site
  230. var title = elem && elem.title || '';
  231.  
  232. ratingT = title.replace(/ based on .*$/, '');
  233. votesT = title.replace(/.* based on /, '').replace(/ user ratings/, '');
  234. } else {
  235. // New site
  236. var ratingElem = doc.querySelector(ratingSelectorNew);
  237. ratingT = ratingElem && ratingElem.textContent || '';
  238.  
  239. var votesElem = doc.querySelector(voteCountSelectorNew);
  240. votesT = votesElem && votesElem.textContent || '';
  241.  
  242. //console.log('ratingElem', ratingElem);
  243. //console.log('votesElem', votesElem);
  244.  
  245. if (votesT.slice(-1) == 'K') {
  246. votesT = String(1000 * votesT.slice(0, -1));
  247. } else if (votesT.slice(-1) == 'M') {
  248. votesT = String(1000000 * votesT.slice(0, -1));
  249. }
  250. // Add in commas (to match old format)
  251. votesT = votesT.replace(/(\d)(\d\d\d)(\d\d\d)$/, '$1,$2,$3').replace(/(\d)(\d\d\d$)/, '$1,$2');
  252. //console.log('votesT:', votesT);
  253. }
  254. // The code below expects arrays (originally returned by string match)
  255. var ratingM = [ratingT, ratingT + "/10"];
  256. var votesM = [votesT, votesT];
  257.  
  258. //console.log('ratingM', ratingM);
  259. //console.log('votesM', votesM);
  260.  
  261. // This doesn't work on the new version of the site
  262. //if (/\(awaiting \d+ votes\)|\(voting begins after release\)|in development,/i.test (resp.responseText) ) {
  263. // hopefully this will work better
  264. if (ratingT == '' || votesT == '') {
  265. ratingTxt = "NR";
  266. isError = false;
  267. colnumber = 0;
  268. } else {
  269. if (ratingM && ratingM.length > 1 && votesM && votesM.length > 1) {
  270. isError = false;
  271.  
  272. justrate = ratingM[1].substr(0, ratingM[1].indexOf("/"));
  273.  
  274. // Let's try the metascore instead
  275. // Not all movied have a metascore
  276. var metaScoreElem = showMetaScore && doc.querySelector('.score-meta');
  277. //var metaScore = metaScoreElem && (Number(metaScoreElem.textContent) / 10).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 });
  278. var metaScore = metaScoreElem && metaScoreElem.textContent;
  279. var metaScoreColor = metaScoreElem && metaScoreElem.style.backgroundColor;
  280.  
  281. var votes = votesM[1];
  282. var votesNum = Number(votes.replace(',', '', 'g'));
  283. var commas_found = (votes.match(/,/g) || []).length;
  284. if (commas_found === 1) {
  285. votes = votes.replace(/,\d\d\d$/, 'k');
  286. } else if (commas_found === 2) {
  287. votes = votes.replace(/,\d\d\d,\d\d\d$/, 'M');
  288. }
  289.  
  290. // ratingTxt = ratingM[1] + " - " + votesM[1];
  291. // We use the element style to override IMDB's reset
  292. ratingTxt = "<strong style=\"font-weight: bolder\">" + justrate + "</strong>" + " / " + votes;
  293. //ratingTxt = "<strong>" + (metaScoreElem ? metaScore : justrate) + "</strong>" + " / " + votes;
  294. //ratingTxt = "<strong>" + (metaScoreElem ? metaScore : justrate) + "</strong>" + " / " + votes + (metaScoreElem ? " (" + justrate + "i)" : "" );
  295. //ratingTxt = "<strong>" + justrate + "</strong>" + " / " + votes + (metaScoreElem ? " (<strong>" + metaScore + "</strong> meta)" : "" );
  296. colnumber = Math.round(justrate);
  297. // If metaScore was found, use that for the colour instead of the IMDB rating. But since metascores are lower than imdb scores, add 1.5.
  298. //colnumber = Math.round(metaScoreElem ? metaScore / 10 + 1.5 : justrate);
  299.  
  300. //if (metaScoreElem) {
  301. // justRate = metaScore / 10;
  302. //}
  303. }
  304. }
  305. }
  306.  
  307. //console.log('ratingTxt', ratingTxt);
  308. //console.log('justrate', justrate);
  309.  
  310. // NOTE: I switched from <b> to <strong> simply because on Season pages, the rating injected after episode titles was getting uglified by an IMDB CSS rule: .list_item .info b { font-size: 15px; }
  311. //targetLink.setAttribute("title", "Rated " + ratingTxt.replace(/<\/*strong>/g,'').replace(/\//,'by') + " users." );
  312. targetLink.setAttribute("title", `Rated ${justrate} by ${votes} users.`);
  313.  
  314. if (!(justrate > 0)) {
  315. return;
  316. }
  317.  
  318.  
  319. // Slowly approach full opacity as votesNum increases. 10,000 votes results in opacity 0.5 (actually 0.6 when adjusted).
  320. var opacity = 1 - 1 / (1 + 0.0001 * votesNum);
  321. // Actually let's not start from 0; we may still want to see the numbers!
  322. opacity = 0.2 + 0.8 * opacity;
  323. // Don't use too many decimal points; it's ugly!
  324. //opacity = Math.round(opacity * 10000) / 10000;
  325. opacity = opacity.toFixed(3);
  326.  
  327. var colors = ["#Faa", "#Faa", "#Faa", "#Faa", "#Faa", "#F88", "#Faa", "#ff7", "#7e7", "#5e5", "#0e0", "#ddd"];
  328. var bgCol = colors[colnumber];
  329. //var hue = justrate <= 6 ? 0 : justrate <= 8 ? 120 * (justrate - 6) / 2 : 120;
  330. //var bgCol = `hsla(${hue}, 100%, 60%, ${opacity})`;
  331. var resltSpan = document.createElement("span");
  332. // resltSpan.innerHTML = '<b><font style="border-radius: 5px;padding: 1px;border: #575757 solid 1px; background-color:' + color[colnumber] + ';">' + ' [' + ratingTxt + '] </font></b>&nbsp;';
  333. // resltSpan.innerHTML = '<b><font style="background-color:' + justrate + '">' + ' [' + ratingTxt + '] </font></b>&nbsp;';
  334. // I wanted vertical padding 1px but then the element does not fit in the "also liked" area, causing the top border to disappear! Although reducing the font size to 70% is an alternative.
  335. resltSpan.innerHTML = '&nbsp;<font style="font-weight: normal;font-size: 80%;opacity: ' + opacity + ';border-radius: 3px;padding: 0.1em 0.6em;border: rgba(0,0,0,0.1) solid 1px; background-color:' + bgCol + ';color: black;">' + '' + ratingTxt + '</font>';
  336.  
  337. if (showAsStar) {
  338. resltSpan.innerHTML = `
  339. <div class="ipl-rating-star" style="font-weight: normal">
  340. <span class="ipl-rating-star__star">
  341. <svg class="ipl-icon ipl-star-icon " xmlns="http://www.w3.org/2000/svg" fill="#000000" height="24" viewBox="0 0 24 24" width="24">
  342. <path d="M0 0h24v24H0z" fill="none"></path>
  343. <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
  344. <path d="M0 0h24v24H0z" fill="none"></path>
  345. </svg>
  346. </span>
  347. <span class="ipl-rating-star__rating">${justrate}</span>
  348. </div>
  349. `;
  350. }
  351.  
  352. if (isError)
  353. resltSpan.style.color = 'red';
  354.  
  355. //var targetLink = resp.context;
  356. //console.log ("targetLink: ", targetLink);
  357.  
  358. // The "More like this" cards have a vertical flowing grid, so if we want rating and metascore to appear next to each other, they will need a container
  359. var container = document.createElement('div');
  360. container.style.display = 'inline-block';
  361. container.appendChild(resltSpan);
  362.  
  363. //targetLink.parentNode.insertBefore (container, targetLink);
  364. targetLink.parentNode.insertBefore(container, targetLink.nextSibling);
  365.  
  366. if (metaScoreElem) {
  367. // I am reluctant to move an element from another document into this one, multiple times.
  368. // Therefore we create a new element, like the original.
  369. var newMetaScoreElem = document.createElement(metaScoreElem.tagName);
  370. //newMetaScoreElem.outerHTML = metaScoreElem.outerHTML;
  371. newMetaScoreElem.className = metaScoreElem.className;
  372. newMetaScoreElem.textContent = metaScoreElem.textContent;
  373. newMetaScoreElem.style.backgroundColor = metaScoreElem.style.backgroundColor;
  374. // Missing despite the class. It seems some pages don't include the .score-meta CSS
  375. newMetaScoreElem.style.color = 'white';
  376. newMetaScoreElem.style.padding = '2px';
  377. //resltSpan.parentNode.insertBefore (newMetaScoreElem, resltSpan.nextSibling);
  378. //resltSpan.parentNode.insertBefore (document.createTextNode(' '), resltSpan.nextSibling);
  379. container.appendChild(document.createTextNode(' '));
  380. container.appendChild(newMetaScoreElem);
  381. }
  382. }
  383.  
  384. //--- Create the continue button
  385. var continueBttn = document.createElement("button");
  386. continueBttn.innerHTML = "Get more ratings";
  387.  
  388. continueBttn.addEventListener("click", function() {
  389. fetchedLinkCnt = 0;
  390. continueBttn.style.display = 'none';
  391. processIMDB_Links();
  392. },
  393. false
  394. );
  395.  
  396. processIMDB_Links();
  397.  
  398. if (addRatingToTitle) {
  399. setTimeout(function() {
  400. // Selectors for old site and new site
  401. var foundRating = document.querySelectorAll('.ratingValue [itemprop=ratingValue], ' + ratingSelectorNew);
  402. if (foundRating.length >= 1) {
  403. var rating = foundRating[0].textContent;
  404. if (rating.match(/^[0-9]\.[0-9]$/)) {
  405. document.title = `(${rating}) ` + document.title;
  406. }
  407. }
  408. }, 2000);
  409. }