I thought about making an extension to block comments awhile back - like years ago. Frequently, when I'd read an article from a major news outlet or watch a YouTube video, I'd find the comments full of vitriol far more upsetting than whatever I happened to be reading or watching. I just wanted the content.

Ironically, as I'm getting around to finally making this, many sites are dumping their comment systems. FoxNews, CNN, MSN, NPR and many others have reduced or completely removed theirs. It's gotta be cost-prohibitive to monitor the flood of comments on these huge sites, and they all tend to devolve (sooner or later) into cess pools from which little intelligent life emerges. Most of them are redirecting to social media, which is full of its own problems but at least it's not right there in your face.

Interestingly, it looks like Mozilla is trying to reinvent comments with its own commenting system. There are supposed to be better moderating tools, data stays on your system instead of someone else's server, and it's free. Hope it works.

If you want, you can just check out the code or install the extension. Otherwise, here are a few of the new and interesting things (well, to me!) I learned while creating it.

Content Scripts

When you develop an extension for Chrome, you can tell it to inject a completely different set of CSS and/or JavaScript files into a page based on its URL. You just give it the pattern to match against the URL.

This feature is called "content scripts", which you specify in the "manifest.json" file. Here are the content scripts I created. One set applies to YouTube, while the other applies to everything else. Notice how the latter matches against all urls, with an "exclude_matches" value of YouTube - I'm handling YouTube special because it's the only one where the comment system is on the site itself, unlike Disqus which could be plugged into any site.

MutationObserver

I ran into a hurdle because some commenting systems, like Disqus or YouTube's, have a delayed loading time. They might load after the rest of the page, or when the visitor actually scrolls over the area where the comments should appear. That's better for the visitor since the main content loads faster, but it creates issues with showing or hiding the comments section when the page first loads.

I tried a few different things, none of which worked reliably, but then I stumbled across the MutationObserver, which watches for changes in the DOM. That was exactly what I needed. I also found a nice little library called arrive.js that made it easier to use the MutationObserver, and now my extension can sit and wait until the comments load and then decide whether or not they should be hidden. Even better, you can set a flag to disable the monitor if it fires once, saving resources.

CSS Selectors

The arrive.js library allows me to just specify an element to watch out for, so watching for the ytd-comments element that YouTube uses for its comments was easy.

document.arrive("ytd-comments", {onceOnly: true}, function() {
    // determine whether to show or hide the comments now that they're loaded
});

What I didn't realize right away is that that element I specified is part of a larger syntax called CSS Selectors, and they're really flexible. This helped when it came to watching for Disqus comments.

Disqus provides instructions for integrating their system with a blog that include a <div> element with a specific ID - everything inside that is generated by a script. So the DIV is already there when the page loads but nothing else. I needed to be able to watch for the generation of an <iframe> element that was a direct child of the hard-coded div element.

document.arrive("#disqus_thread > iframe", {onceOnly: true}, function() {
    // determine whether to show or hide the comments now that they're loaded
});

Browse the code, install the extension or, if you're completely new to developing Chrome extensions, you might want to check this out first. It's a quick overview of how to create Chrome extensions - as close to a "hello world" as I could get.