Userscript for Removing IMDB Sidebar

I wrote a very quick userscript to remove the sidebar from IMDB pages.

To install it, you’ll need to open the downloaded file in your file explorer, open the extensions page in Chrome (Wrench -> Tools -> Extensions), and  click and drag the file from the explorer onto the page.

If you’re using Firefox, you’ll need to install the GreaseMonkey addon. After that, you can just open / download the script in the browser, and it will know what to do with it.

As for other browsers, mobile IMDB is a different animal, so this is inapplicable there. Safari and Opera may have userscript support, but I haven’t looked into it much. Internet Explorer users, I’m sorry for all the confusing words, you’ve somehow stumbled onto the wrong page.

What’s a userscript?

A javascript file that runs on specified webpages. For a while now, Chrome has supported these scripts, though they were originally born in the GreaseMonkey plugin for FireFox.

Why write this?

The things on the sidebar were bothering me. Everything on the right side of the page was 100% inanity, and the lists were a constant reminder that someone, somewhere, had nothing better to do than read a list someone else wrote, whose title was as long as this stupid run-on sentence, and contained the acronym “IMHO”. I’ve taken to using the developer tools to delete elements on a page that adblock isn’t trained for, which makes it feel a lot like a game. But the fun was gone after about the third time.

How do I go about doing that?

Here is the code for the script:

  1. // ==UserScript==
  2. // @name Sidebar Free IMDB
  3. // @description Removes the sidebar from IMDB pages, and extends the practical area to fill the width.
  4. // @author Eric Wehrly of Disruption Theory
  5. // @namespace DisruptionTheory
  6. // @include http://www.imdb.com/*
  7. // ==/UserScript==
  8.  
  9. function doOnPageLoad() {
  10. // Remove the sidebar if it exists.
  11. var sideBar = document.getElementById("maindetails_sidebar_bottom");
  12. if(sideBar != null) {
  13. sideBar.parentElement.removeChild(sideBar);
  14. }
  15.  
  16. // Expand the top half of the page to fill the space the sidebar used to occupy.
  17. var topArea = document.getElementById("maindetails_center_top");
  18. if(topArea != null) {
  19. topArea.style.marginRight = "20px";
  20. topArea.style.width = "auto";
  21. }
  22.  
  23. // Expand the bottom half of the page to fill the space the sidebar used to occupy.
  24. var bottomArea = document.getElementById("maindetails_center_bottom");
  25. if (bottomArea != null) {
  26. bottomArea.style.marginRight = "20px";
  27. bottomArea.style.width = "auto";
  28. }
  29.  
  30. // Focus the search area of the page. The fact that it doesn't focus by default annoys me.
  31. document.getElementById("navbar-query").focus();
  32. }
  33.  
  34. doOnPageLoad();

As you can see, it’s real short. You take that, save it in a file ending in .user.js, and then install as noted above.

If you plan on doing further work in Chrome with userscripts, it’s useful to know the directory they’re kept in, and that they can be modified in a regular text editor without needing to be re-added.

 

Edit 11/27/12: I added a short line to the bottom from another userscript I had been using, which automatically puts the search bar at the top of IMDB into focus.