wikipedia-tldr.user.js

// ==UserScript==
// @name         Wikipedia TLDR
// @version      0.0.4
// @author       AJ Hsu <[email protected]>
// @match        https://*.wikipedia.org/*
// @grant        GM_addStyle
// ==/UserScript==

window.addEventListener('load', function handlePageLoaded() {
  window.removeEventListener('load', handlePageLoaded);

  // Create DOM elements for TLDR section.
  const tldrSection = document.createElement('section');
  const h2 = document.createElement('h2');
  h2.innerText = 'TL;DR';
  const hr = document.createElement('hr');

  // Find the first paragraph.
  const firstParagraph = Array.from(
    document.querySelectorAll(
      '#mw-content-text > .mw-parser-output > p:not([class])'
    )
  ).find((p) => {
    // Exclude possible not-real-first-paragraph(s).
    return (
      // Not an empty paragraph.
      p.textContent.trim() !== '' &&
      // Not a coordinate info.
      p.querySelector('#coordinates') === null
    );
  });

  tldrSection.appendChild(h2);
  tldrSection.appendChild(firstParagraph);
  tldrSection.appendChild(hr);

  firstParagraph.style = `
    background-color: #fff9c48c;
    padding: 20px;
    font-family: Monaco;
  `;
  hr.style = `
    margin-bottom: 20px;
  `;

  // Insert TLDR section at very first top of content section.
  document
    .querySelector('#mw-content-text')
    .insertBefore(
      tldrSection,
      document.querySelector('#mw-content-text').firstChild
    );
});

// Global styles
GM_addStyle(`
  .mw-body-content p,
  table {
    font-family: Courier;
    letter-spacing: -0.5px;
  }
  .mw-body-content h1,
  .mw-body-content h2,
  .mw-body-content h3,
  .mw-body-content h4,
  .mw-body-content h5 {
    font-family: Courier;
    letter-spacing: -1px;
    font-weight: bold;
  }
`);

Before TLRD

After TLDR