I love Twitter. I really do. Its a great source of information for me. Especially in the area of software development. But I have to admit that I hate those Twitter trends. Those words, tiny sentences or hashtags. They try to tell me what’s important or hipp. But in most cases, in fact 99.9% of those cases, I just found them very annoying. Not useful, inspiring, funny or whatever. Just stupid and annoying.
Of course thats just my opinion and I think there are dozens of teens people out there crying when they’re watching some of „their“ topics trending right now. Completely fine for me. But I just don’t want to see them any more.
That was the birth of the mighty Twitter Trends Terminator. Send back through space and time, awoken naked somewhere out there to hunt those Twitter trends down. Forever. Not just hiding them somewhere. Just as my old friend Darth Sidious told me long ago:
Wipe Them Out. All of Them! Darth Sidious (YouTube)
The Chrome Extension
The extensions wasn’t really complicated to implement. There was just some research necessary when I started the project, because this is my first Chrome extension. One major obstacle was to change the Document Object Model after the Twitter main page is completely loaded. Thats important, because the Twitter Trends and the Who to Follow box are loaded asynchronously. At this time, the Document Object Model is completely available. But the div elements for the trends and the follower suggestions are still missing.
My solution depends on a background task and an inject task. Lets have a look at the background task first.
|
1 2 3 4 5 6 7 8 9 10 |
/* * Listens on the complete event of a tab reload and executes the inject.js script. */ chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) { if (changeInfo.status == 'complete') { chrome.tabs.executeScript(tab.id, { file: "src/inject/inject.js" }) } }) |
This code adds a new listener to the onUpdated event of every Chrome tab. If a website in a new or existing tab gets updated and after this update process completes, the code within the if statement gets executed. This injects and executes a new script in the context of the page inside the particular tab.
This Inline.cs file does the whole magic. The code is listed below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* * Searches for the 'module trends' class name, which is used for the Twitter trends div element. * If this div is found, it gets removed from the document DOM. */ // Some magic string constants var trendsClassName = 'module trends' var whoToFollowClassName = 'module roaming-module wtf-module js-wtf-module' chrome.storage.sync.get({ trends: true, whoToFollow: false }, function(items) { var trends = items.trends var whoToFollow = items.whoToFollow var trendsElement = document.getElementsByClassName(trendsClassName) var whoToFollowElement = document.getElementsByClassName(whoToFollowClassName) if (trendsElement.length == 1 && trends) { trendsElement[0].remove() } if (whoToFollowElement.length == 1 && whoToFollow) { whoToFollowElement[0].remove() } }) |
First the two options are loaded so the user can decide if the Twitter Trends and/or the Who to Follow box are terminated or not. Next the DOM is searched by the getElementsByClassName method to find those special div elements. If they’re found and the option says the element should get removed, the DOM is manipulated.
Thats all. Nothing more, nothing less. About 40 lines of JavaScript code get rid of the Twitter Trends and the Who to Follow box.
Of course there’s a little bit more JavaScript and HTML code for the option page but thats not much. I just refer to the GitHub repository Twitter-Trends-Terminator because this Chrome extensions is open source.
Installation
Since yesterday, the extension is listed in the Chrome Web Store. Just access it through this link and search for the extension called Twitter Trends Terminator. You should get a page like showing in image 1.
Image 1: The Twitter Trends Terminator in Google Chrome Web Store.
Because I don’t know how long this extension is available in the store – maybe Twitter don’t like it 🙂 – you can download a Chrome package via the GitHub repository.
Results On The Twitter Page
After this extension is activated, the Twitter homepage just needs a single refresh. For example by hitting F5 in Chrome. Maybe this behavior gets updated someday, so that the page is refreshed automatically.
Image 2 contains a screenshot of the new Twitter homepage. In this case without the trends and the Who to Follow box.
Image 2: The Twitter Trends Terminator in action.
Those div elements gets removed from the page every time you refresh the page. And of course only on the Twitter homepage, because the extension only has access to the Twitter URL.
Conclusion
After some time of research it was very easy to implement the removal of those two div elements. I’m not quite sure if I want to add more functionality. At this time I don’t think I’ll add much more. Maybe some improvements for the options and some other features that can change the Twitter page in another way.
But the code demonstrates how its possible to change the DOM of any page. It’s easy to remove special tweets just to mention another example.
Happy using and coding :). Don’t hesitate to provide some feedback or create an issue on the issue page of the repository if somethings not working.
[…] This extension is open source using the MIT license! I can’t post code here, as I did for my Chrome extension, because it is just to extensive :). If you have questions, just drop me a […]