☰

Code Diff Checker

Compare differences between two code versions

  1. // ==UserScript==
  2. // @name         Code Diff Checker
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Compare differences between two code versions
  6. // @author       maanimis
  7. // @match        *://*/*
  8. // @grant        GM_registerMenuCommand
  9. // @require      https://cdnjs.cloudflare.com/ajax/libs/jsdiff/7.0.0/diff.min.js
  10. // @run-at      document-end
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function () {
  15.   "use strict";
  16.  
  17.   function createUI() {
  18.     if (document.getElementById("diffOverlay")) return;
  19.  
  20.     const overlay = document.createElement("div");
  21.     Object.assign(overlay.style, {
  22.       position: "fixed",
  23.       top: 0,
  24.       left: 0,
  25.       width: "100%",
  26.       height: "100%",
  27.       background: "rgba(0, 0, 0, 0.5)",
  28.       display: "flex",
  29.       justifyContent: "center",
  30.       alignItems: "center",
  31.       zIndex: "10000",
  32.     });
  33.     overlay.id = "diffOverlay";
  34.     overlay.addEventListener(
  35.       "click",
  36.       (e) => e.target === overlay && overlay.remove()
  37.     );
  38.  
  39.     const modal = document.createElement("div");
  40.     Object.assign(modal.style, {
  41.       background: "white",
  42.       borderRadius: "10px",
  43.       padding: "20px",
  44.       width: "90%",
  45.       maxWidth: "500px",
  46.       boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)",
  47.       position: "relative",
  48.       display: "flex",
  49.       flexDirection: "column",
  50.       gap: "10px",
  51.     });
  52.  
  53.     modal.innerHTML = `
  54.             <h2 style="margin:0; text-align:center;">Code Diff Checker</h2>
  55.             <textarea id="oldText" rows="5" placeholder="Old Version" style="width:100%;"></textarea>
  56.             <textarea id="newText" rows="5" placeholder="New Version" style="width:100%;"></textarea>
  57.             <button id="compareBtn" style="background:#28a745; color:white; border:none; padding:10px; cursor:pointer; font-size:14px;">Compare</button>
  58.             <pre id="diffOutput" style="background:#f6f8fa; border:1px solid #e1e4e8; padding:10px; white-space:pre-wrap; font-family:Courier New, monospace; max-height:200px; overflow-y:auto;"></pre>
  59.         `;
  60.  
  61.     overlay.appendChild(modal);
  62.     document.body.appendChild(overlay);
  63.     document
  64.       .getElementById("compareBtn")
  65.       .addEventListener("click", compareDiff);
  66.   }
  67.  
  68.   function escapeHtml(text) {
  69.     return text.replace(
  70.       /[&<>"']/g,
  71.       (m) =>
  72.         ({
  73.           "&": "&amp;",
  74.           "<": "&lt;",
  75.           ">": "&gt;",
  76.           '"': "&quot;",
  77.           "'": "&#039;",
  78.         }[m])
  79.     );
  80.   }
  81.  
  82.   function createDiff(oldText, newText) {
  83.     return Diff.diffLines(oldText, newText)
  84.       .map((change) => {
  85.         const style = change.added
  86.           ? "background:#e6ffed;color:#22863a;padding:5px;"
  87.           : change.removed
  88.           ? "background:#ffeef0;color:#d73a49;padding:5px;"
  89.           : "padding:5px;";
  90.         return `<div style="${style}">${
  91.           (change.added ? "+ " : change.removed ? "- " : "  ") +
  92.           escapeHtml(change.value).replace(/\n/g, "<br>")
  93.         }</div>`;
  94.       })
  95.       .join("");
  96.   }
  97.  
  98.   function compareDiff() {
  99.     document.getElementById("diffOutput").innerHTML = createDiff(
  100.       document.getElementById("oldText").value,
  101.       document.getElementById("newText").value
  102.     );
  103.   }
  104.  
  105.   GM_registerMenuCommand("Open Code Diff Checker", createUI);
  106. })();