Geek asks and answers

Refresh Page to Add New Link Using Greasemonkey

JScript makes my head on most days, but poorly designed sites do it even more. Foursquare is one such example in relation to its superusers.

Desired Result

A greasemonkey script that will look at each occurrence of the searchResult DIV class, and after the DIV class name, add two new HREF elements similar to them:

<a href="/venue/venueid/edit">Manage venue</a> <a href="/edit_venue?vid=venueid">Edit venue</a>

Scenairo

I would like to make life easier for my superusers with Greasemonkey. The goal is to change a specific page on the site ( https://foursquare.com/search ) and add some additional links to go directly to certain pages for a place that will speed up the workflow.

I looked at examples of how to do this (learn through reverse engineering), but I'm stuck if I have to use 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 returned places. The code for each place returned in the search results looks 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 still

Looking back at the answers, this is what I came up with (below). Needless to say, it does not detect where it needs to insert HREF elements at all, and does not skip all searchResult elements displayed on the page, not to mention the correct link layout.

// 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);
+3
source share
1 answer

, jQuery.
script, 5- ...

// ==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;                    \
    }                                           \
" );
+4

More articles:


All Articles