☰

LeetCode solution article widener

Add a toggle to widen the solution articles to view long code easier.

  1. // ==UserScript==
  2. // @name         LeetCode solution article widener
  3. // @namespace    https://github.com/zica87/self-made-userscipts
  4. // @version      2.0
  5. // @description  Add a toggle to widen the solution articles to view long code easier.
  6. // @author       zica
  7. // @match        https://leetcode.com/*
  8. // @grant        none
  9. // @license      GPL-3.0
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     "use strict";
  14.  
  15.     const solutionPageRegEx = new RegExp(
  16.         "https://leetcode.com/problems/.*/solutions/.*/"
  17.     );
  18.     const editorialPageRegEx = new RegExp(
  19.         "https://leetcode.com/problems/.*/editorial"
  20.     );
  21.  
  22.     const toggle = document.createElement("button");
  23.     toggle.innerText = "←→";
  24.     toggle.onclick = () => {
  25.         if (toggle.innerText === "←→") {
  26.             const articles = document.getElementsByClassName("mx-auto");
  27.             for (const article of articles) {
  28.                 article.style.maxWidth = "none";
  29.             }
  30.             toggle.innerText = "default width";
  31.         } else {
  32.             const articles = document.getElementsByClassName("mx-auto");
  33.             for (const article of articles) {
  34.                 article.style = {};
  35.             }
  36.             toggle.innerText = "←→";
  37.         }
  38.     };
  39.  
  40.     const observer = new MutationObserver((_, observerInstance) => {
  41.         if (
  42.             !solutionPageRegEx.test(window.location.href) &&
  43.             !editorialPageRegEx.test(window.location.href)
  44.         ) {
  45.             return;
  46.         }
  47.         const topRightToolbar = document.getElementsByClassName("ml-4")[0];
  48.         if (topRightToolbar === undefined) {
  49.             return;
  50.         }
  51.         observerInstance.disconnect();
  52.         topRightToolbar.prepend(toggle);
  53.     });
  54.     observer.observe(document.body, {
  55.         childList: true,
  56.         subtree: true,
  57.     });
  58. })();