Hi 👋,

Any NYTimes's readers here?

Are you tired of being asked to pay for reading NYTimes's articles? I'm also a reader, and I was curious about finding a way to get rid of the blockers that we see in an article.

TL;DR

This is the Chrome extension called nytimes bypasser, you can grab it here. If you're still interested in how I made this extension and you already have some experience in manipulating DOM with JavaScript, please continue reading this post.

1. Investigate the problem:

This is what we often see while reading NYTimes's articles without a subscription. The website will immediately ask us either to open an account and continue reading FREE but limited articles or subscribe to a plan which is $0.25/week, affordable pricing for reading good content. However, if you don't need to read too often or simply you're not ready to subscribe, does it worth paying?

2. Inspect the DOM to address the blockers:

Now, you're blocked and you can not scroll down to read anymore. Let's see if what we have in the DOM of an article page. We see that the big banner blocking us from reading is a div element with the id attribute gateway-content. Let's try to remove it by right click on the element in the DOM tree and select Delete element, and it's gone. That's the first thing to be done, however as you can see, we still can't scroll down and there is another layer of the blocker that has a transparent to black gradient effect. Let's traverse the DOM tree a bit, this time it might not be obvious as the first step. We find a div has a class css-mcm29f. If we apply the previous technique to get rid of the blocker this time, it will not work because this div is an ancestor of the content that we want to read. We should find a way to keep this div but get its blocking function disabled. We might think of removing the class css-mcm29f, and actually, it works. Now, we can scroll and see the other part of the article, but we still have the gradient layer that covers it up. But no worries, we will remove it soon. If you're experienced with CSS modules, you will realize that the class css-mcm29f is not permanent but generated on the build time of the web app. That means it can be another class next time. We can not use the class as the selector to address that blocking element, instead, we can see where it is placed in the DOM tree and assume that the div#app is not changing frequently, so we have this path to write the JS code later:

div#app
 > div
  > div

And now, we only need to locate the element of the gradient layer and "kill" it. We figure out the above div has three children and they're three div. The last sibling div in the three is the one we need to disable its styling. Finally, we can read the article fully. Let's do some coding to automate all the things above. We will run this code once the page is loaded. However, it doesn't mean that the blockers will show up right away, as you can see it appear after one or two seconds. So we should start an interval running the check every 500 ms, and we run it a maximum of 10 times, equally to 5 seconds. We will discard checking once checks == 10. We also discard checking once the targetted blocker (the first one) is found and then we continue "killing" others. So that's a simple strategy, right?

console.log('start')
let checks = 0
const interval = setInterval(() => {
  console.log('checking')
  checks += 1
  if (checks == 10) {
    clearInterval(interval)
    console.log('stopped checking, max 10 attempts')
  }
  let target = document.getElementById('gateway-content')
  if (target) {
    console.log('removed and stopped checking')
    target.remove()

    target = document.getElementById('app').childNodes[0].childNodes[0]
    target.className = ''

    target = target.lastChild
    target.className = ''
    clearInterval(interval)
  }
}, 500)

3. Conclusion

The Chrome extension nytimes bypasser is just a wrapper of the above code and it ensures that it matches all the rules and regulations of the Chrome Web Store. It's working at the moment and I have some first users installed it. I'm not sure if in the future the NYTimes's web engineers will change their blocking strategy, but I'll try to keep this extension works as long as there are people who need it. Thanks for reading my first blog post and happy blogging 😀!

Cover image credit: Shutterstock