☰

Hacker News - Match Comment Link Style to Story Link

Make the comment link on Hacker News front page match the story link formatting (external stories only). So that you can use Snap Links to easily Right Click and drag to mass open links if you like to read Comments page for stories.

// ==UserScript==
// @name         Hacker News - Match Comment Link Style to Story Link
// @author       MedX
// @namespace    MedX-AA
// @license      MIT
// @icon         https://news.ycombinator.com/favicon.ico
// @version      1.5
// @description  Make the comment link on Hacker News front page match the story link formatting (external stories only). So that you can use Snap Links to easily Right Click and drag to mass open links if you like to read Comments page for stories.
// @match        https://news.ycombinator.com/front*
// @match        https://news.ycombinator.com/newest*
// @match        https://news.ycombinator.com/news*
// @grant        none
// ==/UserScript==

(function () {
  'use strict';
  // Prevent script from running multiple times
  if (window.hnStyleObserverActive) return;
  window.hnStyleObserverActive = true;

  const DEBOUNCE_MS = 300; // Wait time after Pagetual finishes inserting

  let cachedStyle = null; // Stores the style from the post title link
  let debounceTimer = null; // Timer for debouncing updates

  // Read and cache the style from the first post title link
  function cacheTitleStyle() {
    if (cachedStyle) return;
    const firstTitleLink = document.querySelector('.titleline > a');
    if (!firstTitleLink) return;
    const s = getComputedStyle(firstTitleLink);
    cachedStyle = {
      fontSize: s.fontSize,
      fontWeight: s.fontWeight,
      color: s.color,
      fontFamily: s.fontFamily,
      textDecoration: s.textDecoration
    };
  }

  // Apply the cached style to the comment links
  function applyCommentStyle() {
    if (!cachedStyle) cacheTitleStyle();
    if (!cachedStyle) return;
    const commentLinks = document.querySelectorAll('.subtext a[href^="item?id="]');
    commentLinks.forEach(link => {
      // Check if the link's text content is "comment" or "discuss"
      if (link.textContent.includes('comment') || link.textContent.includes('discuss')) {
        link.style.cssText = `
          font-size: ${cachedStyle.fontSize};
          font-weight: ${cachedStyle.fontWeight};
          color: ${cachedStyle.color};
          font-family: ${cachedStyle.fontFamily};
          text-decoration: ${cachedStyle.textDecoration};
        `;
      } else {
        link.style.cssText = ''; // Clear styles from other links with the same href
      }
    });
  }

  // Debounce the styling function to run after new content is loaded
  function scheduleStyling() {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(applyCommentStyle, DEBOUNCE_MS);
  }

  applyCommentStyle(); // Initial run on page load

  // Watch for new content additions (e.g., from Pagetual)
  const observer = new MutationObserver(mutations => {
    for (const mutation of mutations) {
      if (mutation.addedNodes.length) {
        scheduleStyling();
        break;
      }
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
})();