We want all the top-level element representing each tweet. Fortunately Twitter provides a convenient class we can select against, js-stream-item. We want to be able to filter that array using Array#filter, but document.querySelectorAll returns a NodeList, so we convert to an array first.

let getAllTweets = () => Array.from(document.querySelectorAll('.js-stream-item'))

Given all tweets, we want a filter that keeps just the tweets that don’t belong in the timeline so we can do something with those. One way to identify these tweets is by the icons twitter includes in non-chronological tweets to give you the user context of why those tweets are showing up in the timeline. The nonchrono function looks at the children of the tweet element and if any of the children matches the contextual icon for one of the non-chronological tweets we’re looking for – promoted, other user likes, or “your friends follow this person” – we return true to keep that tweet.

let nonchrono = e => {
  for (typ of ['follower', 'promoted', 'heartBadge']) {
    if (e.querySelector(`.tweet-context .Icon--${typ}`)) {
      return true;
    }
  }
  return false;
}

We also want a function that will do something with the non-chronological tweets we’ve found. In our case we just want to highlight them with a red border.

let decorate = e => e.style.border = "10px solid red";

Putting it together, we get all the tweets, filter down to just the non-chronological tweets, then decorate them.

let process = () => getAllTweets().filter(nonchrono).forEach(decorate);

New tweets are loaded once the user scrolls near the bottom of the page, so we need to do something to make sure those new tweets get processed. We could probably get sophisticated about this, but for this quick hack we’ll continually run process on a 1000ms timer.

let timer = window.setInterval(process, 1000);