javascript-更新页面以使用Greasemonkey添加新链接

在大多数日子里,JScript会尽我所能,但设计欠佳的网站会做更多.就其超级用户而言,Foursquare就是这样的一个例子.

期望的结果

可以通过每次DIV类searchResult的查找来查找的工作簿脚本,并在DIV类名称之后添加两个新的类似于以下内容的A HREF元素：

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

塞纳罗

我想使用Greasemonkey使他们的超级用户的生活更轻松一些.目的是修改站点上的特定页面(https://foursquare.com/search),并添加许多额外的链接以直接跳转到该场所的特定页面,这将使工作流程更快.

我四处寻找有关如何执行此操作的示例(通过反向工程学习),但是如果我应该使用RegEx或其他方法,则会遇到问题.

例

在搜索结果页面(https://foursquare.com/search?q=dump&near=Perth%2C+Australia)上,列出了返回的场所.搜索结果中返回的每个场所的代码看起来都像这样：

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

到目前为止工作

到处寻找答案,这就是我的想法(下).不用说,它根本不会检测到需要在哪里插入A HREF元素,也不会遍历页面上输出的所有searchResult元素,更不用说正确地构造链接了.

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

解决方法:

使用jQuery非常简单.
这是整个脚本,因为这是一个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;                    \
    }                                           \
" );                                            

标签：greasemonkey,javascript
来源： https://codeday.me/bug/20191102/1992130.html