Defeat the New York Times Paywall with 2 lines of CSS (or a Chrome Extension)

If you haven't heard, the New York Times has implemented a paywall where you can only view 20 articles a month. After that they throw an overlay on top of the content so you can't view it.

Since they still want to be indexed by search engines, they don't bother to hide the content once you have reached your 20 max. Two simple lines of CSS will hide this. I've also made it into a Chrome Extension

Update: Just want to be clear that this is not about the NYT business model or getting stuff for free. If you want  to view the NYT, pay for it. This also isn't a hack or a security intrusion, its simply hiding a div that is overlaying the content. The same results can be achieved by disabling javascript or selecting "no style" in your favorite browser. This is simply a tutorial on how to style the content of a page to your liking.

Update 2: Looks like New York Times have updated their CSS classes from #gatewayCreative to #gatewayUnit in an effort to thwart cheaters.  I will not be updating the extension as this wasn't intended to get around the wall for free but rather to expose how hilarious their pay wall security was. I think that point has been made, feel free to fork this plugin.

Update 3: Now Google has taken down the extension. Not sure why, may have been for using the NYT logo, may be more serious. Either way, it was fun while it lasted :)

Screen shot 2011 03 29 at 2 33 59 PM

**Video**

Code

#overlay, #gatewayCreative { display: none !important; visibility: hidden !important; }
body { 	overflow: scroll !important; }

Then create a manifest.json file to register the Google Chrome Extension

{
	"name" : "New York Times Paywall Smasher",
	"version"  : "1.0",
	"description" : "Disables the New York Times Paywall",
	"browser_actions" : {
		"icons" : {
			"128" : "icon128.png",
			"48" : "icon48.png",
			"16" : "icon16.png"
		}
	},
	"content_scripts" : [{
		"matches": ["http://www.nytimes.com/*"],
		"css" : ["nyt.css"]
 	}]
}

Load the chrome extension into developer view and say goodbye to the paywall (at least until they implement something that isn't defeated with display: none). Install Chrome Extension.

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on Github. Any fix, little or small, is appreciated!

Edit on Github

Syntax Podcast

Hold on — I'm grabbin' the last one.

Listen Now →
Syntax Podcast

@wesbos Instant Grams

Master Gatsby

Master Gatsby

Building modern websites is tough. Preloading, routing, compression, critical CSS, caching, scaling and bundlers all make for blazing fast websites, but extra development and tooling get in the way.

Gatsby is a React.js framework that does it all for you. This course will teach you how to build your websites and let Gatsby take care of all the Hard Stuff™.

MasterGatsby.com
I post videos on and code on

Wes Bos © 1999 — 2021