Downcase All Text In Disqus Comments

The other day I came across a couple of comments where people were asking for a way to downcase text of a disqus comment thread…and one of the requests was specifically for a Google Chrome Extension. Since it was something I thought I could hack together quickly, I figured why not just throw it together quickly for them?

So that’s what I did (you can get the extension here if you want to give it a try)…and then I thought, it’s just a quick and simple hack, why not also share the details on how it’s done for others as well? So that’s what this post is all about.

Basically creating a simple, background-functional Google Chrome extension involves just two files…a manifest.json file (basically configuration instructions for Chrome) and a javascript file that actually does whatever you want your extension to do (in this case add a downcase feature to Disqus comments).

There is a lot more you *can* do with extensions…and there are a lot more files you *can* include…but these two are all that’s actually required to make an extension that does *something*.

So first the manifest.json file. At a minimum, you need to name your extension and set a version and I think it’s a really good idea to add a description as well (for your own sanity when you come back to it months later if nothing else).

In the event that you are just building an extension that interacts with a given page (content scripts), you need to also provide details for ‘content_scripts’. The 'content_scripts’ part is really the only tricky thing here…at the min. you just need to define which sites you want your extension to execute on (the 'matches’ stuff) and the script you want to have executed on those sites.

In this specific case, I don’t know what site you’ll be viewing Disqus comments on, so I say to execute this extension on all sites a user goes to.

Here’s what the manifest.json file looks like

{   "name": “downcase disqus”,   "version": “0.10”,   "description": “downcase all text in disqus comments.”,   "content_scripts": [     {       "matches": [“http://*/*”],       "js": [“downcase_disqus.js”]     }   ] }

The second file is the one that will actually do all our actual functionality. In this case I called it downcase_disqus.js (as referenced from our manifest file) and it contains just a couple small lines of Javascript since all we want to do is downcase the text in comments.

Here’s what the downcase_disqus.js file looks like

var tmp = document.getElementById('disqus_thread’ ); tmp.setAttribute('onmouseover’, 'var doc = this.getElementsByTagName('div’ );for(var i=0;i<doc.length;i++){var cname=doc[i].className;if(cname=='dsq-comment-text’ ){doc[i].innerHTML=doc[i].innerHTML.toLowerCase();}}’ );

If you understand Javascript (and especially the Chrome DOM) then this probably is pretty clear…but just in case you don’t I’ll try to explain a little bit more.

First, we have to know a little bit about how Disqus works…if you view source on a site that has Disqus installed you’ll probably notice that the comments themselves are not actually on the page (making it *really* hard for the browser or our code to actually interact with them).

The comments are actually loaded via javascript that (usually) loads after the rest of the page has been loaded (this is also why it takes some time for comments to pop onto the page on the more popular sites that have lots of comments). In digging into the javascript that Disqus actually executes you will notice that all the content from Disqus gets dumped into a div with an id of 'disqus_thread’.

So, we know we are going to need to do something with that div object as well…and so getting a reference to that object is the first step for our code (getElementById does this perfectly for us). Now that we know the part of the page we want to work with and actually have the object, we have a handful of small but more difficult problems to work out:

1. Since the div starts out empty and the javascript that loads the actual comments doesn’t execute until after the page has finished loading (and usually after Chrome has executed all it’s appropriate extensions) how do we actually know when the content is available to downcase?

2. Assuming we solve the first problem, how do we actually grab and downcase just the comment text?

For problem one the answer in this case is to simply add an 'onmouseover’ action to the main div. What this will do is act just like it had been put into the code directly by the creator the HTML page…so when a user moves their mouse over any part of the 'disqus_thread’ div, the related javascript code will be executed.

By just attaching a trigger event to the master div, we can now ensure that our Javascript is executed after the content has actually been loaded (because you can’t really hover over it until it’s created…and even if you can, it just means you’ll downcase nothing to nothing - nice).

Moving on to small problem number two…again by digging into the Disqus javascript a bit more (or even better by using the Chrome inspect element features) we can see that Disqus wraps the actual text of a given comment in a div with the class name of 'dsq-coment-text’ (awesome)…so we simply grab all the divs inside our 'disqus_thread’ container, loop through and check for which ones have the appropriate className, and then update those with a downcased version of the text they contain… And that’s about it!

Just put these two files into a folder and load it as an unpacked extension…or zip it up, and follow the instructions for distributing them to the Chrome App store.

Simple really…that is, assuming you don’t mind digging into a little HTML view-source, javascript code, and Google Chrome extension documentation.

DISCLOSURE: This was a super quick hack for me to write as I had done a handful of other Chrome extensions already and have dug around in the Disqus Javascript many times before for other projects…all of which means it took me about 1/3 of the time to code and release this than it did for me to write up these details on just how I actually did it :)

This post has received 42 loves.


ARCHIVE OF POSTS



This is the personal blog of Kevin Marshall (a.k.a Falicon) where he often digs into side projects he's working on for digdownlabs.com and other random thoughts he's got on his mind.

Kevin has a day job as CTO of Veritonic and is spending nights & weekends hacking on Share Game Tape. You can also check out some of his open source code on GitHub or connect with him on Twitter @falicon or via email at kevin at falicon.com.

If you have comments, thoughts, or want to respond to something you see here I would encourage you to respond via a post on your own blog (and then let me know about the link via one of the routes mentioned above).