JavaScript for Twitter Post Limiter

limit_twitter.js

// ==UserScript==
// @name        Twitter Post Limiter
// @namespace   https://github.com/bstee615/
// @version     0.2
// @match       https://twitter.com/home*
// @grant       none
// @author      Benjamin Steenhoek
// @description Number posts on the Twitter timeline and limit after a set number.
//
// 3/12/2024, 2:23 PM created
// 3/12/2024, 2:46 PM added "limit" feature to blur out posts after X number of posts
// ==/UserScript==

// Written (mostly) by https://claude.ai/chat/8ce991db-cf66-41ed-8f4f-d63d70f0513c
(function () {
const postIndexMap = new Map();
let currentIndex = 1;

function numberPosts() {
  const posts = document.querySelectorAll('article[data-testid="tweet"]:not([data-numbered])');

  posts.forEach(post => {
    const postId = post.innerText; // or any other unique identifier
    if (!postIndexMap.has(postId)) {
      postIndexMap.set(postId, currentIndex);
      currentIndex++;
    }

    const containerDiv = document.createElement('div');
    const numberDiv = document.createElement('div');
    const postIndex = postIndexMap.get(postId);
    const inTheRed = postIndex > 5;
    containerDiv.style.position = 'absolute';
    containerDiv.style.top = '10px';
    containerDiv.style.left = '10px';
    containerDiv.style.display = 'flex';
    containerDiv.style.justifyContent = 'center';
    containerDiv.style.alignItems = 'center';
    containerDiv.style.flexDirection = 'row';
    containerDiv.style.zIndex = '1';
    containerDiv.style.padding = '5px';
    containerDiv.style.borderRadius = '15px';
    if (inTheRed) {
      containerDiv.style.width = (post.offsetWidth-20)+'px';
      containerDiv.style.height = (post.offsetHeight-20)+'px';
      containerDiv.style.backdropFilter = 'blur(10px)';
      containerDiv.style.fontSize = '64px';
      containerDiv.style.backgroundColor = 'rgba(255, 0, 0, 0.5)';
    }
    else {
      containerDiv.style.width = '15px';
      containerDiv.style.height = '15px';
      containerDiv.style.fontSize = '14px';
      containerDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
    }

    numberDiv.textContent = inTheRed ? `${postIndex} (past your limit!)` : postIndex;
    numberDiv.style.color = 'white';
    numberDiv.style.fontWeight = 'bold';
    numberDiv.style.textAlign = 'center';

    // post.style.position = 'relative';
    containerDiv.prepend(numberDiv);
    post.prepend(containerDiv);
    post.dataset.numbered = true; // Mark the post as numbered
  });
}

// Initial call to number the posts
window.addEventListener('load', function() {
  let interval = 0;
  interval = setInterval(function() {
    if (document.querySelector('article[data-testid="tweet"]')) {
      clearInterval(interval);
      numberPosts();
    }
  }, 10);
})

// Listen for scroll events
window.addEventListener('scroll', numberPosts);
})();

Feel free to use it by importing it into ViolentMonkey. No warranty, run at your own risk :)
Here's what it looks like

Future plans/roadmap:

• Deploy as a FireFox/Chrome extension
• Add a spinner to configure how many posts allowed
  • Store this setting to memory
• Make selector and unique ID for posts more robust (currently it's just the text content)
• Trigger index updates efficiently on-demand instead of on every scroll
• Allow clicking a post to show its contents
• Allow disabling