Apply renderPosts if views/likes/etc. satisfy configurable thresholds

observePosts.js

const observePosts = () => {
  const timeline = document.querySelector("[data-testid=primaryColumn]")
  const observer = new MutationObserver((...args) =>
    observePosts.listen(...args),
  )
  observer.observe(timeline, {
    childList: true,
    subtree: true,
  })
  return observer
}

observePosts.log = (arg) => (console.log(arg), arg)

observePosts.listen = (mutations) =>
  mutations
    .flatMap(({ addedNodes: [...nodes] }) => nodes)
    .filter(observePosts.filterAds)
    .map((node) => [observePosts.queryStats(node), node])
    .filter(([stats]) => stats)
    .map(([stats, post]) => ({
      ...observePosts.parseStats(stats),
      post,
    }))
    .filter(observePosts.filterByStats)
    .forEach(observePosts.renderPost)

observePosts.filterAds = (node) =>
  !node.querySelector("[data-testid=placementTracking]")

observePosts.queryStats = (node) => node.querySelector("[role=group]")

observePosts.filterByStats = ({ post, ...stats }) =>
  Object.entries(observePosts.thresholds).some(
    ([stat, threshold]) => stats[stat] >= threshold,
  )

observePosts.parseStats = ({ ariaLabel }) =>
  Object.fromEntries(
    ariaLabel
      .split(", ")
      .map((label) => label.split(" "))
      .map(([value, stat]) => [stat, Number(value)]),
  )

observePosts.renderPost = ({ post, ...stats }) => {
  post.style.backgroundColor = "darkred"
  console.log(stats, post)
}

observePosts.thresholds = {
  views: 10_000,
  likes: 50,
  replies: 5,
  reposts: 5,
  bookmarks: 5,
}

observePosts()