Ein wenig Hilfe bei DOM manip und Greasemonkey

Question

Ich bin kein JS Kerl so ein bisschen im Dunkeln ich stolpern. Im Grunde wollte ich etwas, das einen Link zu einer Twitter Suche nach @ Antworten auf einen bestimmten Benutzer, während auf dieser Person Seite hinzufügen würde.

Zwei Dinge, die ich versuche, herauszufinden:

1. , wie Sie den Benutzernamen aus der Seite zu extrahieren, so dass ich die richtige URL konstruieren kann. dh. wenn ich auf http://twitter.com/ev , sollte ich "ev" zurück.
2. , wie der DOM zu manipulieren Dinge an der richtigen Stelle einfügen

Hier ist das HTML-Fragment mir Targeting:

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

Und hier ist das Skript (bisher):

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

Hier ist ein rein DOM Verfahren der oben - und für Kicks, ich mit der Extraktion des Benutzername gespielt als auch:

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

Dies entspricht (basierend auf dem ursprünglichen Codeausschnitt):

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

Wenn Sie den zusätzlichen Link zu zeigen, bis in einem anderen Ort wollen, werden Sie futz müssen um mit insertBefore ein bisschen.

PS. Nahm sich die Freiheit, die „-Abschnitt-Links“ Klasse zu ignorieren, wie das ist, die Formatierung für x folgende, y Anhänger, z Updates Links.

Answer 2

Hier ist ein Weg, dies zu tun, nicht wirklich getestet (kein Twitter-Konto).

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

Sie fügt hinzu, die li bis zum Ende, und ich ließ die div, weil ich bezweifle es richtig ist, eine li in einem div zu setzen. Wenn Sie wirklich das li zu Beginn des ul setzen müssen, versuchen menuNode.insertBefore(li, menuNode.firstChild)

Answer 3

Das Schreiben JavaScript ohne Bibliothek ist eine Hölle Ich kann nie mehr zurück.

Hier ist ein Skript Skelett, das jQuery ermöglicht:

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