☰

Ratio Calculator

Calculate ratio as a percentage between two HTML elements and display the result.

  1. // ==UserScript==
  2. // @name         Ratio Calculator
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.0
  5. // @description  Calculate ratio as a percentage between two HTML elements and display the result.
  6. // @author       Bolt Again
  7. // @match        https://www.pixiv.net/dashboard/works*
  8. // @grant        GM_addStyle
  9. // @license      MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     function calculateRatio() {
  16.         var elements = document.querySelectorAll('.sc-a16hc8-4.jBjeDE');
  17.  
  18.         for (var i = 0; i < elements.length; i++) {
  19.             var parentElement = elements[i];
  20.             var bookmarkElement = parentElement.querySelector('a[title="Bookmarks"]');
  21.             var viewsElement = parentElement.querySelector('a[title="Views"]');
  22.  
  23.             var bookmarkValue = bookmarkElement.querySelector('span.sc-1tt9fda-1.dkkGqt').textContent;
  24.             var viewsValue = viewsElement.querySelector('span.sc-1tt9fda-1.dkkGqt').textContent;
  25.  
  26.             var ratio = Math.round((parseNumber(bookmarkValue) / parseNumber(viewsValue)) * 100);
  27.  
  28.             var ratioElement = document.createElement('a');
  29.             ratioElement.title = 'ratio';
  30.             ratioElement.className = bookmarkElement.className;
  31.             ratioElement.href = bookmarkElement.href;
  32.  
  33.             var innerDiv = document.createElement('div');
  34.             innerDiv.className = bookmarkElement.querySelector('div.sc-bQCEYZ.irmCui').className;
  35.  
  36.             var innerDivContent = `
  37.                 <div width="16" class="${bookmarkElement.querySelector('div.sc-eEVmNe.ggcxgL').className}">
  38.                     <div class="${bookmarkElement.querySelector('div.sc-fmdNqN.hyACbC').className}">
  39.                         <pixiv-icon name="${bookmarkElement.querySelector('pixiv-icon').getAttribute('name')}" class="${bookmarkElement.querySelector('pixiv-icon').className}"></pixiv-icon>
  40.                     </div>
  41.                 </div>
  42.                 <div class="${bookmarkElement.querySelector('div.sc-fXgAZx.fwvUqi').className}">
  43.                     <span class="${bookmarkElement.querySelector('span.sc-1tt9fda-1.dkkGqt').className}">${ratio}%</span>
  44.                 </div>`;
  45.  
  46.             innerDiv.innerHTML = innerDivContent;
  47.             ratioElement.appendChild(innerDiv);
  48.  
  49.             parentElement.appendChild(ratioElement);
  50.         }
  51.     }
  52.  
  53.     function parseNumber(value) {
  54.         return parseFloat(value.replace(/,/g, ''));
  55.     }
  56.  
  57.     // Apply custom styles
  58.     GM_addStyle(`
  59.         .sc-a16hc8-4.jBjeDE a[title="ratio"] span {
  60.             color: green !important;
  61.             font-weight: bold !important;
  62.         }
  63.     `);
  64.  
  65.     function waitForElementToLoad() {
  66.         var targetElement = document.querySelector('nav.sc-xhhh7v-0.kYtoqc');
  67.  
  68.         if (targetElement) {
  69.             setTimeout(function() {
  70.                 calculateRatio();
  71.             }, 1000);
  72.         } else {
  73.             setTimeout(waitForElementToLoad, 100);
  74.         }
  75.     }
  76.  
  77.     waitForElementToLoad();
  78. })();