CODEWITHSUNDEEP
javascriptgreasemonkey
thewinchester
thewinchester

Reputation: 472

Update page to add new link using Greasemonkey

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);

Upvotes: 3

Views: 6013

Answers (1)

Brock Adams
Brock Adams

Reputation: 93473

This is pretty simple using jQuery.
Here's the whole script, since it was a 5-minute job...

// ==UserScript==
// @name     _Square away foursquare
// @include  http://foursquare.com/*
// @include  https://foursquare.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var SearchRezLinks  = $("div.searchResult div.name > a");

/*--- Link is like: <a href="/venue/6868983">Dumpling King</a>
    where 6868983 is venue ID.

    Want to add: <a href="/venue/venueid/edit">Manage venue</a>
    <a href="/edit_venue?vid=venueid">Edit venue</a>
*/
SearchRezLinks.each ( function () {

    var jThis       = $(this);
    var venueID     = jThis.attr ('href').replace (/\D+(\d+)$/, '$1');
    jThis.parent ().append ('<a href="/venue/' + venueID + '/edit">Manage venue</a>');
    jThis.parent ().append ('<a href="/edit_venue?vid=' + venueID + '">Edit venue</a>');
} );

GM_addStyle ( "                                 \
    div.searchResult div.name > a + a {         \
        font-size:      0.7em;                  \
        margin-left:    2em;                    \
    }                                           \
" );

Upvotes: 4

Related Questions