Shows image's rating above its thumbnail on Derpibooru.

derpibooru-rating-info.user.js

// ==UserScript==
// @name        Derpibooru - Rating Info
// @description Shows image's rating above its thumbnail on Derpibooru.
// @namespace   derpibooru_ratinginfo
// @match       https://*.derpibooru.org/*
// @match       https://*.trixiebooru.org/*
// @version     20190722
// @grant       GM_addStyle
// @inject-into content
// @noframes
// ==/UserScript==

/*
 *  Original script by hdk5, modified to work around CSP
 *  https://greasyfork.org/en/scripts/10359-derpibooru-rating-info
 */

(function () {
'use strict';

const conf = [
  ['safe',          'S',    '#67AF2B'],
  ['explicit',      'E',    '#CF0001'],
  ['questionable',  'Q',    '#C4B246'],
  ['suggestive',    'Sg',   '#C4B246'],
  ['grimdark',      'GD',   '#5E0000'],
  ['semi-grimdark', 'S-GD', '#5E0000'],
  ['grotesque',     'Gr',   '#000000']
];

const ratingTags = conf.map(value => value[0]);

function addStyle() {
  const CSS = [];
  CSS.push('.RI_rating > * {padding-right: 3px; font-weight: bold}');
  for (const tag of conf) {
    CSS.push(`.RI_${tag[0]}:after {content: "${tag[1]}"; color:${tag[2]};}`);
  }
  GM_addStyle(CSS.join('\n'));
}

addStyle();

for (const mediaBox of document.getElementsByClassName('media-box')) {
  const infoBoxEl = mediaBox.getElementsByClassName('media-box__header')[0];
  const imgTags = mediaBox.getElementsByClassName('image-container')[0].dataset.imageTagAliases.split(', ');
  const rTags = imgTags.filter(tag => ratingTags.includes(tag));

  const ratingNode = document.createElement('span');
  ratingNode.className = 'RI_rating';

  for (const rTag of rTags) {
    const tagNode = document.createElement('span');
    tagNode.className = 'RI_' + rTag;
    ratingNode.appendChild(tagNode);
  }

  infoBoxEl.insertBefore(ratingNode, infoBoxEl.firstChild);
}

})();