Hiding Subscriber-only Content with Greasemonkey and Stylus

Some websites like to show you all the things you could see, if only you paid for a subscription. Take the Irish Independent, a news site, as an example: "Premium" articles are everywhere with their little green badge, but only subscribers can see more than the first couple paragraphs. Let's diminish that content, since we can't read it.

Using Greasemonkey, we can apply a CSS class to a parent element whenever we find the Premium label:

document.querySelectorAll('.premium1').forEach((e) => {
  const a = e.closest('article');
  a.classList.add('premium-article');
})

Now that we have a CSS class, we can apply a style to these elements using Stylus. Let's dim them so they're not as prominent, but we can still read them if we want:

.premium-article {
    opacity: 20%;
}

Simple!

Screenshot of styles on Independent.ie (192KB)

Greasemonkey

Stylus

✑ Annika

📅 21 August 2022

gemlog

home

-- Response ended

-- Page fetched on Tue May 21 17:49:29 2024