DOM 조작 및 GreaseMonkey에 대한 약간의 도움

Question

저는 JS 전문가가 아니기 때문에 어둠 속에서 헤매고 있습니다.기본적으로 나는 특정 사용자의 페이지에 있는 동안 특정 사용자에 대한 @답글에 대한 트위터 검색에 대한 링크를 추가하는 것을 원했습니다.

내가 알아내려고 하는 두 가지 사항은 다음과 같습니다.

1. 올바른 URL을 구성할 수 있도록 페이지에서 사용자 이름을 추출하는 방법.즉.내가 켜져 있으면 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 약간.

추신.x 팔로어, y 팔로어, z 업데이트 링크의 형식을 지정하므로 "섹션 링크" 클래스를 자유롭게 무시했습니다.

Answer 2

다음은 실제로 테스트되지 않은 방법입니다 (트위터 계정 없음).

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를 끝에 추가하고, 나는 li를 div에 넣는 것이 옳다는 것을 의심하기 때문에 div를 떨어 뜨 렸습니다. UL의 시작 부분에 Li를 넣어야한다면 시도해보십시오. 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);    
}