How to Write Your Own Drumpf Extension

Chrome extensions aren’t hard.

This Sunday on Last Week Tonight, John Oliver announced a new Chrome extension offered by his show that replaces all references to Trump with Drumpf, the name of Donald’s ancestor who emigrated to America.

When I found out about that, my first thought was “Hey, I could do that!” It turns out there was one Javascript trick I needed to learn to make it easy.

Extensions Explained

Chrome extensions are really just zipped folders containing a manifest.json file. That’s it. You can even skip the zipping part if you run Chrome in Developer Mode. Just go to chrome://extensions and click the Developer Mode checkbox. A button will appear that allows you to load any folder on your computer as an extension.

The only thing your extension must have is a manifest file. The details of the manifest are explained here. For our extension, we just want to mess with the markup of any page after it has loaded, which is pretty simple to define:

manifest.json

Basically, the important things here are the “manifest_version”, “name”, and “content_scripts” entries. Extensions must declare their manifest version and a unique name in order to be valid. There are several types of extensions you can create, and this one is a content script, because it manipulates the content of a page. You have to specify which sites you want to manipulate, and in this case, I have chosen the most generic globs allowed.

Introducing the TreeWalker

The concept I needed to learn for this was the fact that browsers give you a native TreeWalker object to help crawl a page. I’m not sure how I missed that before, since it isn’t new (unless you consider Chrome 1.0 or Firefox 2.0 to be new). The invocation of createTreeWalker is a little strange, but the script below will effectively crawl a loaded page to transform all text nodes.

transform.js

What’s going on here?

The createTreeWalker function takes four arguments. The first is a root node to begin the crawl, for which we have specified document.body (essentially, all the visible content on a page). The next argument specifies which node types to navigate. The interesting types are SHOW_ELEMENT and SHOW_TEXT, though other options are available. In our case, we want to manipulate text. The third argument allows you to pass a custom filter function for more control over what nodes to select. Leaving it null will pass all the nodes represented by the NodeFilter bit mask in argument 2. Finally, a boolean value in argument 4 indicates whether sub-trees of entity references should be ignored.

With a TreeWalker object in hand, you can capture each node one at a time by calling the nextNode() method. Editing the text itself requires accessing the nodeValue property of the given node. When all nodes in the tree have been processed, the nextNode() method will return null.

I’m very grateful to StackOverflow users levik and Anurag for asking and answering this question that demonstrates the power of the TreeWalker.

This is far from perfect

Bear in mind, the default script running trigger is “Document Idle”, which basically waits until a page has settled down before running once. Text loaded by scripts after a user interacts with the page (for example, Google search results), won’t be affected. However, you can get very interesting results by loading news articles and Wikipedia pages, where content is relatively static.

I imagine Last Week Tonight’s crew took the time to write a script that listens for content changes and re-runs as needed, but this one satisfied my curiosity and helps me keep a positive mood despite the Super Tuesday results.