TamperMonkey script that restores text and descriptions to Twitter Links

restore-link-sanity.js

// ==UserScript==
// @name         Enhance Twitter News Links
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Extract and display aria-label over news link images on Twitter
// @author       aman.bh, ChatGPT
// @match        https://twitter.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Adding custom styles
    GM_addStyle(`
        /* Gradient overlay */
        .gradient-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, transparent 60%);
            z-index: 5;
        }

        /* Style for the extracted title */
        .extracted-title {
        width: 100%;
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 18px;
            font-weight: bold;
            color: #FFF;
            display: flex;
            align-items: start;
            z-index: 10;
            flex-direction: column;
            gap:8px;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

        }

        /* Style for the domain name */
        .extracted-domain {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Style for the logo */
        .logo-svg {
            height: 16px;
            width: 16px;
            margin-right: 5px;
        }
    `);

     const svgLogo = `
        <svg class="logo-svg" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6m-7 1l9-9m-5 0h5v5"></path>
        </svg>
    `;

    function enhanceTwitterLinks() {
        document.querySelectorAll('div[data-testid="card.layoutLarge.media"] a[role="link"][aria-label]').forEach(link => {
            if(link.querySelector('.gradient-overlay')) return;

            const gradientDiv = document.createElement('div');
            gradientDiv.className = 'gradient-overlay';
            link.appendChild(gradientDiv);

            const [domain, ...titleArr] = link.getAttribute('aria-label').split(' ');
            const titleDiv = document.createElement('div');
            titleDiv.className = 'extracted-title';
            titleDiv.innerHTML = `<span class="extracted-domain">${svgLogo + domain}</span><span>${titleArr.join(' ')}</span>`;

            link.appendChild(titleDiv);
            link.querySelector('div[dir="ltr"] > span')?.remove();
        });
    }

    const observer = new MutationObserver(mutationsList => {
        mutationsList.forEach(mutation => {
            if (mutation.type === 'childList') enhanceTwitterLinks();
        });
    });

    observer.observe(document.body, { childList: true, subtree: true });
    enhanceTwitterLinks();

})();

Install

Install Tampermonkey by searching for it like any other addon. Chrome, Firefox, whatever your poison is.

Usage

1. Click on the Tampermonkey icon in the top-right corner of your browser.
2. Click "Create a new script".
3. Copy the provided script and paste it into the Tampermonkey editor.
4. Ctrl + S or "File" > "Save".

With the script installed, go to https://twitter.com/.
The script will automatically run on Twitter, and you should notice saner links returning. Lemme know if it doesn't work.