JScript does my head in most days, but poorly designed sites do it even more. Foursquare’s is one such example in respect of its superusers.
Desired Outcome
A greasemonkey script that will look through each occurrence of the DIV class searchResult, and after the DIV class name append two new A HREF elements similar to these:
<a href="/venue/venueid/edit">Manage venue</a> <a href="/edit_venue?vid=venueid">Edit venue</a>
Scenairo
I would like to make the life of their superusers a little easier using Greasemonkey. The intent is to modify a specific page on the site (https://foursquare.com/search), and add a number of extra links to jump directly to specific pages for a venue that would make the workflow faster.
I’ve looked around for examples of how to do this (learn through reverse engineering), but I get stuck on if I should be using RegEx or something else.
Example
On the search results page (https://foursquare.com/search?q=dump&near=Perth%2C+Australia), there is a list of venues returned. The code for each venue returned on the search results looks exactly like this:
<div class="searchResult">
<div class="icon"><img src="https://4sqstatic.s3.amazonaws.com/img/categories/parks_outdoors/default-29db364ef4ee480073b12481a294b128.png" class="thumb" /></div>
<div class="info">
<div class="name"><a href="/venue/4884313">Staff Smoking Spot / Dumpster Dock</a></div>
<div class="address"><span class="adr"></span></div>
<div class="specialoffer"></div>
</div>
<div class="extra">
<div class="extra-tip"><div><a href="/venue/4884313">0 tips</a></div></div>
<div class="extra-checkins"><div>10 check-ins</div></div>
</div>
</div>
Work so far
Looking around for answers, this is what I have come up with (below). Needless to say, it isn’t detecting where it needs to insert the A HREF elements at all, and doesn’t loop through all of the searchResult elements output on the page, let alone construct the link correctly.
// First version
var elmNewContent = document.createElement('a');
elmNewContent.href = sCurrentHost;
elmNewContent.target = "_blank";
elmNewContent.appendChild(document.createTextNode('edit venue'));
var elmName = document.getElementById('name');
elmName.parentNode.insertBefore(elmNewContent, elmName.nextSibling);
This is pretty simple using jQuery.
Here’s the whole script, since it was a 5-minute job…