Manipulating sites using the DOM editor in Chrome

Ever visit a site and there’s just something about how it looks that you don’t like? Ever want to modify elements of your site in real-time without having to refresh the page? You can do all of this and more the DOM editor in Chrome.

An example

I have been using bloglines as my cloud RSS reader since, well, I don’t know, the DAWN OF THE INTERNET. Anyways, it recently introduced some rendering errors when I’m looking at some feeds. The following image highlights how bad it can be:

Screen Shot 2013-04-10 at 10.00.22 AM

Because these rendering errors are a blight on my RSS life, I have developed a habit of just removing the footer all together.  First, I right click on the footer and select inspect element:

Screen Shot 2013-04-10 at 10.00.36 AM

Next, I find the node in the HTML sources (footer):

Screen Shot 2013-04-10 at 10.03.03 AM

Finally, I delete it!  The results are a much more aesthetically pleasing experience:

Screen Shot 2013-04-10 at 10.03.56 AM

The thing is, I don’t like having to go back to the DOM inspector every time. Why not use Tampermonkey to do this for me!

Tampermonkey scripting

Tampermonkey lets you easily manipulate the DOM.  You can use selectors to look at elements and automatically manipulate them.  For example, let’s say that you want to find the element with the ID “footer” and remove it. The following script will set it to null, effectively eliminating the object from the rendered DOM:

// ==UserScript==
// @name Bloglines footer remover
// @namespace http://gusclass.com/blog
// @version 0.1
// @description enter something useful
// @match http://*bloglines.com/*
// @copyright 2013+, Gus Class
// ==/UserScript==

document.getElementById("footer").style.display = 'none';

Note, of great importance, the @match section (in comment) prevents my script from removing footers from sites across the internet.

Now that I have set up the script, I can enable/disable it from the Chrome extensions bar as seen in the following screenshot:

tamper

When the icon for the “My fancy new …” script is set to enabled, indicated by green, the extension will manipulate the rendered DOM to snip away the footer, generating the desired UI for Bloglines for me.

Conclusions

The web is experimental and open. If you want it to look different in your browser, the potential is there and you just need to untap it. Play around with the available extensions to see how you can rewrite the web to be better for you!