I didn't know that there's a lot of politically motivated downzapping here on Stacker News. There's a link that will get you right to the downzap info (https://stacker.news/top/posts/day?by=downsats) but I had no idea until @0xbitcoiner mentioned it.

I wanted to make the downzaps more visible, so I had AI help me write a tiny browser extension.

It does one simple thing. On the Stacker News home page, it put a DOWNZAPS link on the main screen, just to the right of the headers.

When you install it, it looks like the below. Clicking DOWNZAPS gets you to the top daily downzaps.

(To actually get the AMOUNT that was downzapped, you click the 3 dots for the post, and go to details).

Below is a guide on how to set it up for yourself. Code is included. It'll take just a minute or so, and then you can easily and regularly check downzaps, and see what's being hidden from you.

This guide will walk you through creating and installing the Downzaps browser extension. You do not need any coding experience—just copy, paste, and load!

Part 1: Create Your FilesPart 1: Create Your Files

First, create a new folder on your computer (for example, on your Desktop) and name it Daily Downzaps (or whatever). Inside this folder, you will save the two files that make up the extension.

1. The Manifest File1. The Manifest File

Create a file named manifest.json in your folder and paste the code below into it. This file serves as the instruction manual for your browser, telling it what the extension is and where it is allowed to run.

{
  "manifest_version": 3,
  "name": "Daily Downzaps",
  "version": "1.0",
  "description": "Adds a custom Downzaps tab and highlights it correctly.",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2. The Script File2. The Script File

Next, create a second file in that same folder named content.js and paste the JavaScript below into it. This is the script that injects your custom tab into the page and handles the bold styling.

// This function creates, places, and styles the button
function injectButton() {
    // Check if we are currently on the 'downzaps' page
    const isDownzapsPage = window.location.href.includes('by=downsats');

    const allLinks = document.querySelectorAll('a');
    let topLink = null;

    // Loop through to find the 'top' link in the navigation bar
    for (let target of allLinks) {
        if (target.textContent.trim().toLowerCase() === 'top' && target.getAttribute('href') && target.getAttribute('href').includes('/top/')) {
            topLink = target;
            break;
        }
    }

    // If we can't find the 'top' link, stop here
    if (!topLink) return;

    // Check if our custom button already exists
    let newLink = document.getElementById('custom-downzap-btn');

    // If it doesn't exist yet, we create and insert it
    if (!newLink) {
        let nodeToClone = topLink;
        let insertTarget = topLink;

        // Check if the "top" link is inside a layout wrapper (like an <li>)
        const parent = topLink.parentElement;
        if (parent && (parent.tagName === 'LI' || parent.children.length === 1)) {
            nodeToClone = parent;
            insertTarget = parent;
        }

        // Clone the element
        const newContainer = nodeToClone.cloneNode(true);

        // Find the actual <a> tag inside whatever we cloned
        newLink = newContainer.tagName === 'A' ? newContainer : newContainer.querySelector('a');

        if (newLink) {
            newLink.id = 'custom-downzap-btn';
            newLink.href = '/top/posts/day?by=downsats';
            newLink.textContent = 'downzaps';

            // Insert it into the page exactly after the 'top' link's container
            insertTarget.parentNode.insertBefore(newContainer, insertTarget.nextSibling);

            // Give it a little breathing room so it doesn't touch the 'top' link
            newContainer.style.marginLeft = '12px';
        }
    }

    // --- Styling / Bold Logic ---
    if (newLink) {
        if (isDownzapsPage) {
            // Make the 'downzaps' link bold and active
            newLink.classList.add('active');
            newLink.style.fontWeight = 'bold';
            if (newLink.parentElement) newLink.parentElement.classList.add('active');

            // Remove the bold and active styling from the 'top' link
            topLink.classList.remove('active');
            topLink.style.fontWeight = 'normal';
            if (topLink.parentElement) topLink.parentElement.classList.remove('active');
        } else {
            // Ensure downzaps is normal if we are NOT on the downzaps page
            newLink.classList.remove('active');
            newLink.style.fontWeight = 'normal';
            if (newLink.parentElement && newLink.parentElement !== newLink) {
                newLink.parentElement.classList.remove('active');
            }
        }
    }
}

// A MutationObserver watches the page for dynamic layout changes
const observer = new MutationObserver(() => {
    injectButton();
});

// Start watching the page
observer.observe(document.body, { childList: true, subtree: true });

Part 2: Enable Developer ModePart 2: Enable Developer Mode

Browsers require a quick setting change before they allow custom built files to be installed.

• Open your browser and click the puzzle piece icon near the top right of your screen.
• Select Manage Extensions from the dropdown menu.
• Look in the top right corner of the extension settings page and turn on the toggle switch labeled Developer mode.

Part 3: Install the ExtensionPart 3: Install the Extension

With Developer mode turned on, installation takes just two clicks.

• Click the button labeled Load unpacked that appears at the top left of the page.
• A file dialog will open. Find the Daily Downzaps folder you created in Part 1.
• Select the folder itself (do not click into the files inside) and confirm.

Part 4: Test it Out!Part 4: Test it Out!

Your setup is fully complete! Navigate to the website, and you will see your new custom tab successfully placed next to the built-in tabs.