您需要先安装一个扩展,例如 篡改猴、Greasemonkey 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 暴力猴,之后才能安装此脚本。
您需要先安装一个扩展,例如 篡改猴 或 Userscripts ,之后才能安装此脚本。
您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。
您需要先安装用户脚本管理器扩展后才能安装此脚本。
Compare differences between two code versions
当前为
// ==UserScript== // @name Code Diff Checker // @namespace http://tampermonkey.net/ // @version 2.0 // @description Compare differences between two code versions // @author maanimis // @match *://*/* // @grant GM_registerMenuCommand // @require https://cdnjs.cloudflare.com/ajax/libs/jsdiff/7.0.0/diff.min.js // @run-at document-end // @license MIT // ==/UserScript== (function () { "use strict"; function createUI() { if (document.getElementById("diffOverlay")) return; const overlay = document.createElement("div"); Object.assign(overlay.style, { position: "fixed", top: 0, left: 0, width: "100%", height: "100%", background: "rgba(0, 0, 0, 0.5)", display: "flex", justifyContent: "center", alignItems: "center", zIndex: "10000", }); overlay.id = "diffOverlay"; overlay.addEventListener( "click", (e) => e.target === overlay && overlay.remove() ); const modal = document.createElement("div"); Object.assign(modal.style, { background: "white", borderRadius: "10px", padding: "20px", width: "90%", maxWidth: "500px", boxShadow: "0 4px 10px rgba(0, 0, 0, 0.3)", position: "relative", display: "flex", flexDirection: "column", gap: "10px", }); modal.innerHTML = ` <h2 style="margin:0; text-align:center;">Code Diff Checker</h2> <textarea id="oldText" rows="5" placeholder="Old Version" style="width:100%;"></textarea> <textarea id="newText" rows="5" placeholder="New Version" style="width:100%;"></textarea> <button id="compareBtn" style="background:#28a745; color:white; border:none; padding:10px; cursor:pointer; font-size:14px;">Compare</button> <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> `; overlay.appendChild(modal); document.body.appendChild(overlay); document .getElementById("compareBtn") .addEventListener("click", compareDiff); } function escapeHtml(text) { return text.replace( /[&<>"']/g, (m) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'", }[m]) ); } function createDiff(oldText, newText) { return Diff.diffLines(oldText, newText) .map((change) => { const style = change.added ? "background:#e6ffed;color:#22863a;padding:5px;" : change.removed ? "background:#ffeef0;color:#d73a49;padding:5px;" : "padding:5px;"; return `<div style="${style}">${ (change.added ? "+ " : change.removed ? "- " : " ") + escapeHtml(change.value).replace(/\n/g, "<br>") }</div>`; }) .join(""); } function compareDiff() { document.getElementById("diffOutput").innerHTML = createDiff( document.getElementById("oldText").value, document.getElementById("newText").value ); } GM_registerMenuCommand("Open Code Diff Checker", createUI); })();