DOM操作和GreaseMonkey的一点帮助

Question

我不是JS家伙，所以我有点在黑暗中徘徊。基本上，我想要在某人的页面上添加一个链接到@replies的Twitter搜索链接到特定用户。

两件事情，我想弄清楚：

1. 如何提取网页中的用户名，这样我可以构建正确的网址。即。如果我在http://twitter.com/ev，我应该回到“ev”。
2. 如何操作DOM在正确的地方

这里插入事情就是在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); 
} 

Answer 1

下面是上述的纯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有点futz左右。

PS。放弃了忽略“部分链接”类的自由，因为这是对x关注的格式，y关注者，z更新链接。

Answer 2

这是一种做法，没有经过真正的测试（没有Twitter帐户）。

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

它添加了小李最后，我放弃了，因为DIV我怀疑这是正确的把立在一个div。如果你真的需要把李在UL开始，尝试menuNode.insertBefore(li, menuNode.firstChild)

Answer 3

在没有库的情况下编写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);  
}