Question

I’m not a JS guy so I’m kinda stumbling around in the dark. Basically, I wanted something that would add a link to a twitter search for @replies to a particular user while on that person’s page.

Two things I am trying to figure out:

1. how to extract the user name from the page so that I can construct the right URL. ie. if I am on http://twitter.com/ev , I should get ‘ev’ back.
2. how to manipulate the DOM to insert things at the right place

Here’s the HTML fragment I’m targetting:

<ul id='tabMenu'>   <li>     <a href='/ev' id='updates_tab'>Updates</a>  </li>   <li>     <a href='/ev/favourites' id='favorites_tab'>Favorites</a>  </li>   </ul> 

And here is the script (so far):

// ==UserScript== // @name         Twitter Replies Search // @namespace    http://jauderho.com/ // @description  Find all the replies for a particular user // @include      http://twitter.com/* // @include      https://twitter.com/* // @exclude      http://twitter.com/home // @exclude      https://twitter.com/home // @author       Jauder Ho // ==/UserScript==  var menuNode = document.getElementById('tabMenu'); if (typeof(menuNode) != 'undefined' && menuNode != null) {     var html = [];     html[html.length] = '<li>';     html[html.length] = '<a href='http://search.twitter.com/search?q=to:ev' class='section-links' id='replies_search_tab'>@Replies Search</a>';     html[html.length] = '</li>';      // this is obviously wrong         var div = document.createElement('div');     div.className = 'section last';     div.innerHTML = html.join('');     followingNode = menuNode.parentNode;     followingNode.parentNode.insertBefore(div, followingNode); } 

Answer 1

Here’s a pure-DOM method of the above — and for kicks, I played with the extraction of the username as well:

var menuNode = document.getElementById('tabMenu'); if (menuNode!=null) {     // extract username from URL; matches /ev and /ev/favourites     var username = document.location.pathname.split('/')[1];      // create the link     var link = document.createElement('a');     link.setAttribute('href', 'http://search.twitter.com/search?q=to:'+username);     link.setAttribute('id', 'replies_search_tab');     link.appendChild(document.createTextNode('@Replies Search'));      // create the list element     var li = document.createElement('li');      // add link to the proper location     li.appendChild(link);     menuNode.appendChild(li);     } 

This is equivalent to (based on the original code snippet):

  <ul id='tabMenu'>   <li>     <a href='/ev' id='updates_tab'>Updates</a>  </li>   <li>     <a href='/ev/favourites' id='favorites_tab'>Favorites</a>  </li>   <li>     <a href='http://search.twitter.com/search?q=to:ev' id='replies_search_tab'>@Replies Search</a></li>   </ul> 

If you want the added link to show up in a different location, you’ll need to futz around with insertBefore a bit.

PS. Took the liberty of ignoring the ‘section-links’ class, as that’s formatting for x following, y followers, z updates links.