☰

Money Calculator

Count the occurrences of the $ symbol on a webpage and display the count and total in a draggable box

  1. // ==UserScript==
  2. // @name         Money Calculator
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Count the occurrences of the $ symbol on a webpage and display the count and total in a draggable box
  6. // @author       You
  7. // @match        *://*/*
  8. // @grant        GM_addStyle
  9. // @grant        GM_setValue
  10. // @grant        GM_getValue
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.  
  16.     GM_addStyle(`
  17.         #dollarCountContainer {
  18.             position: fixed;
  19.             top: 10px;
  20.             left: 10px;
  21.             padding: 10px;
  22.             background: #ccebff; /* Light Blue */
  23.             border: 1px solid #ccc;
  24.             z-index: 9999;
  25.             cursor: move;
  26.             min-width: 250px;
  27.         }
  28.  
  29.         #dollarCountContainer input {
  30.             width: 100%;
  31.             font-weight: bold;
  32.             font-size: 14px;
  33.         }
  34.  
  35.         #dollarCountContainer a {
  36.             color: #00cc00; /* Green */
  37.             font-weight: bold;
  38.             font-size: 14px;
  39.             text-decoration: none;
  40.         }
  41.  
  42.         #dollarCountContainer a:hover {
  43.             text-decoration: underline;
  44.         }
  45.     `);
  46.  
  47.     // Function to count occurrences of the $ symbol and display the count and total in a draggable box
  48.     function countDollars() {
  49.         // Get all text content on the page
  50.         const pageText = document.body.innerText;
  51.  
  52.         // Find all occurrences of the $ symbol with optional commas and decimals
  53.         const matches = pageText.match(/\$\d{1,3}(,\d{3})*(\.\d{1,2})?/g) || [];
  54.  
  55.         // Count and calculate the total value
  56.         const dollarCount = matches.length;
  57.         const totalValue = matches.reduce((sum, match) => sum + parseFloat(match.slice(1).replace(/,/g, '')), 0);
  58.  
  59.         // Display the count and total value in a draggable box
  60.         if (!document.getElementById('dollarCountContainer')) {
  61.             // If the container doesn't exist, create it
  62.             const container = document.createElement('div');
  63.             container.id = 'dollarCountContainer';
  64.  
  65.             // Create a title bar for dragging
  66.             const titleBar = document.createElement('div');
  67.             titleBar.style.width = '100%';
  68.             titleBar.style.height = '20px';
  69.             titleBar.style.backgroundColor = '#ddd';
  70.             titleBar.style.cursor = 'move';
  71.             titleBar.innerText = 'Drag here';
  72.  
  73.             // Create a signature on the right side
  74.             const signature = document.createElement('div');
  75.             signature.style.float = 'right';
  76.             signature.style.paddingRight = '5px';
  77.             signature.style.color = '#00cc00'; // Green
  78.             signature.innerHTML = 'By <a href="https://twitter.com/l1ackoder" target="_blank">@l1ackoder</a>';
  79.  
  80.             titleBar.appendChild(signature);
  81.             container.appendChild(titleBar);
  82.  
  83.             // Create a text box to display the count and total bounty
  84.             const textBox = document.createElement('input');
  85.             textBox.type = 'text';
  86.  
  87.             // Check if the total value is greater than or equal to 1000, then display in "k" format
  88.             if (totalValue >= 1000) {
  89.                 textBox.value = `Count: ${dollarCount} | Total: $${(totalValue / 1000).toFixed(2)}k`;
  90.             } else {
  91.                 textBox.value = `Count: ${dollarCount} | Total: $${totalValue.toFixed(2)}`;
  92.             }
  93.  
  94.             textBox.readOnly = true;
  95.             container.appendChild(textBox);
  96.  
  97.             // Make the container draggable
  98.             let isDragging = false;
  99.             let offsetX, offsetY;
  100.  
  101.             titleBar.addEventListener('mousedown', (e) => {
  102.                 isDragging = true;
  103.                 offsetX = e.clientX - container.getBoundingClientRect().left;
  104.                 offsetY = e.clientY - container.getBoundingClientRect().top;
  105.             });
  106.  
  107.             document.addEventListener('mousemove', (e) => {
  108.                 if (isDragging) {
  109.                     container.style.left = e.clientX - offsetX + 'px';
  110.                     container.style.top = e.clientY - offsetY + 'px';
  111.                 }
  112.             });
  113.  
  114.             document.addEventListener('mouseup', () => {
  115.                 isDragging = false;
  116.             });
  117.  
  118.             // Append the container to the body
  119.             document.body.appendChild(container);
  120.         } else {
  121.             // If the container exists, update the text box content
  122.             const textBox = document.querySelector('#dollarCountContainer input');
  123.  
  124.             // Check if the total value is greater than or equal to 1000, then display in "k" format
  125.             if (totalValue >= 1000) {
  126.                 textBox.value = `Count: ${dollarCount} | Total: $${(totalValue / 1000).toFixed(2)}k`;
  127.             } else {
  128.                 textBox.value = `Count: ${dollarCount} | Total: $${totalValue.toFixed(2)}`;
  129.             }
  130.         }
  131.     }
  132.  
  133.     // Execute the countDollars function when the page has finished loading
  134.     window.addEventListener('load', countDollars);
  135.  
  136.     // Listen for changes to the DOM (dynamic updates) and update the count
  137.     const observer = new MutationObserver(countDollars);
  138.     observer.observe(document.body, { subtree: true, childList: true });
  139. })();