SE Block Gets an Update


This week, I released an update to SE Block, the Chrome extension that removes some of the cruft from the otherwise-excellent Stack Exchange pages. I had initially struck upon the idea for the extension shortly after I started my last job. Spending a lot of time on Stack Overflow, I found myself getting distracted by whatever was trending on the rest of the network—analysis of characters in Gibson’s Bridge Trilogy? efforts to build supercapacitors using graphene sheets? mining the bowels of the English language to satisfy an itch for the perfect word choice? #relevant to this blog’s interests #productivity drain

I spun up a Chrome extension scaffold using the Yeoman generator, and got to work. Since I did this more than a year ago, most the process has been forgotten. One thing I remember I decided was to do the selection of elements on the page without relying on jQuery or any other third-party library. So, out came getElementById and its ilk. More specifically,

For each ID and class, again and again and again. This is something I know can be done more efficiently, and it’ll gnaw at me until I fix it, but that’s neither here nor there.

As a user requested on the Chrome App Store page, Stack Exchange added a new couple of divs as they rolled out their Careers site. So, I updated my extension to account for the new divs, recognizing the irony in my comments in the script:

Maybe it was because it was late at night when I started, but I initially ran into troubles when trying to delete all of the divs with the everyonelovesstackoverflow class name. First, I learned that document.getElementsByClassName doesn’t return an actual array, but rather an array-like object. Oh, ok. Seems that “array-like” means it’ll support selection by index, but not all of those fun and helpful JavaScript Array methods; forEach, for instance. Next, I dusted off the part of my brain that writes for loops.

Turned out that just dusting off that part of my brain wasn’t enough, because I kept getting this wrong; it took me a minute to catch it: the length of recruiters changes as objects are removed from the array[-like object]. So, it would never remove all of the items, leaving some divs behind [not realizing that Ad Block was also taking care of some of those divs didn’t help my troubleshooting!].

After some experimenting in the console, I finally took the approach of working from the end to the start, rather than from position zero:

I pushed the changes to the Chrome App Store and they went live later that evening. I think this project warrants a rewrite—if you beat me to it, pull requests are welcome!