对DOM操作和GreaseMonkey有一点帮助

时间:2008-12-13 09:10:54

标签: javascript twitter greasemonkey

我不是一个JS家伙,所以我在黑暗中有点磕磕绊绊。基本上,我想要一些东西,可以在该人的页面上为特定用户添加@replies的Twitter搜索链接。

我想弄清楚的两件事:

  1. 如何从页面中提取用户名,以便构建正确的URL。即。如果我在http://twitter.com/ev,我应该回复“ev”。
  2. 如何操纵DOM以在正确的位置插入内容
  3. 这是我要定位的HTML片段:

    <ul id="tabMenu">
      <li>
        <a href="/ev" id="updates_tab">Updates</a>  </li>
      <li>
        <a href="/ev/favourites" id="favorites_tab">Favorites</a>  </li>
      </ul>
    

    这是脚本(到目前为止):

    // ==UserScript==
    // @name         Twitter Replies Search
    // @namespace    http://jauderho.com/
    // @description  Find all the replies for a particular user
    // @include      http://twitter.com/*
    // @include      https://twitter.com/*
    // @exclude      http://twitter.com/home
    // @exclude      https://twitter.com/home
    // @author       Jauder Ho
    // ==/UserScript==
    
    var menuNode = document.getElementById('tabMenu');
    if (typeof(menuNode) != "undefined" && menuNode != null)
    {
        var html = [];
        html[html.length] = '<li>';
        html[html.length] = '<a href="http://search.twitter.com/search?q=to:ev" class="section-links" id="replies_search_tab">@Replies Search</a>';
        html[html.length] = '</li>';
    
        // this is obviously wrong
            var div = document.createElement('div');
        div.className = 'section last';
        div.innerHTML = html.join('');
        followingNode = menuNode.parentNode;
        followingNode.parentNode.insertBefore(div, followingNode);
    }
    

3 个答案:

答案 0 :(得分:2)

这是上面的纯DOM方法 - 对于踢,我也使用了用户名的提取:

var menuNode = document.getElementById('tabMenu');
if (menuNode!=null)
{
    // extract username from URL; matches /ev and /ev/favourites
    var username = document.location.pathname.split("/")[1];

    // create the link
    var link = document.createElement('a');
    link.setAttribute('href', 'http://search.twitter.com/search?q=to:'+username);
    link.setAttribute('id', 'replies_search_tab');
    link.appendChild(document.createTextNode('@Replies Search'));

    // create the list element
    var li = document.createElement('li');

    // add link to the proper location
    li.appendChild(link);
    menuNode.appendChild(li);    
}

这相当于(基于原始代码段):

  <ul id="tabMenu">
  <li>
    <a href="/ev" id="updates_tab">Updates</a>  </li>
  <li>
    <a href="/ev/favourites" id="favorites_tab">Favorites</a>  </li>
  <li>
    <a href="http://search.twitter.com/search?q=to:ev" id="replies_search_tab">@Replies Search</a></li>
  </ul>

如果您希望添加的链接显示在其他位置,则需要稍微使用insertBefore

PS。自由地忽略了“section-links”类,因为x的跟随者,y粉丝的格式化,z更新链接。

答案 1 :(得分:1)

编写没有库的JavaScript是我永远无法回归的地狱。

这是一个启用jQuery的脚本框架:

// ==UserScript==
// @name           MyScript
// @namespace      http://example.com
// @description    Example
// @include        *
//
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js
// ==/UserScript==

var menuNode = $('#tabMenu');
if (menuNode!=null)
{
    // extract username from URL; matches /ev and /ev/favourites
    var username = document.location.pathname.split("/")[1];

    // create the link
    var link = $('<a id="replies_search_tab">@Replies Search</a>');
    link.href = 'http://search.twitter.com/search?q=to:'+username;

    // create the list element
    var li = $('<li />');

    // add link to the proper location
    li.append(link);
    menuNode.append(li);    
}

答案 2 :(得分:1)

这是一种方法,没有经过实际测试(没有推特账号)。

var userName = window.location.href.match(/^http:\/\/twitter\.com\/(\w+)/)
if (userName == null)
  return; // Problem?
userName = userName[1];
var menuNode = document.getElementById('tabMenu');
if (menuNode != null)
{
  var html = '<a href="http://search.twitter.com/search?q=to:' +
      userName +
      '" class="section-links" id="replies_search_tab">@Replies Search</a>';

  var li = document.createElement('li');
  li.className = 'section last';
  li.innerHTML = html;
  menuNode.appendChild(li);
}

它将li添加到最后,我放弃了div,因为我怀疑将div放入div是正确的。如果您确实需要将li放在ul的开头,请尝试menuNode.insertBefore(li, menuNode.firstChild)