javascript - Update page to add new link using Greasemonkey - Stack Overflow

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 Oute

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 (), 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 (;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=".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 e 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);

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 Oute

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./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./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./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 e 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);

• javascript
• greasemonkey

Share Improve this question Follow asked Jun 11, 2011 at 4:52 thewinchesterthewinchester 47244 gold badges1111 silver badges2525 bronze badges 2

• Is that "Manage venue" link correct? I get a 404, trying it. – Brock Adams Commented Jun 11, 2011 at 5:57
• Yes, the link is correct. As I understand it, the Security system is designed to turn away unauthorised parties (those w/out the required access level, and specially unauthenticated users) with the ol' 404 error. – thewinchester Commented Jun 11, 2011 at 21:59

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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./*
// @include  https://foursquare./*
// @require  http://ajax.googleapis./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;                    \
    }                                           \
" );