Un peu d'aide avec DOM et Manip Greasemonkey

Question

Je ne suis pas un gars JS, donc je suis un peu trébuchant dans l'obscurité. Au fond, je voulais quelque chose qui ajouterait un lien vers une recherche de twitter pour @replies à un utilisateur particulier pendant la page de cette personne.

Deux choses que je suis en train de comprendre:

1. comment extraire le nom d'utilisateur de la page afin que je puisse construire l'URL à droite. c'est à dire. si je suis sur http://twitter.com/ev , je devrais "ev" retour.
2. comment manipuler le DOM pour insérer les choses au bon endroit

Voici le fragment HTML je suis ciblage:

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

Et voici le script (jusqu'à présent):

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

Voici une méthode pure DOM de ce qui précède - et coups de pied, j'ai joué avec l'extraction du nom d'utilisateur ainsi:

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

Ceci est équivalent à (sur la base de l'extrait de code original):

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

Si vous voulez que le lien ajouté à apparaître dans un autre endroit, vous aurez besoin de futz autour avec un peu insertBefore.

PS. Nous avons pris la liberté d'ignorer la classe « section-liens », comme c'est mise en forme pour x suivante, y disciples, des liens de mises à jour z.

Answer 2

Voici une façon de le faire, pas vraiment testé (pas de compte 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);
}

Il ajoute Li à la fin, et je laissé tomber le div parce que je doute qu'il est correct de mettre un li dans un div. Si vous avez vraiment besoin de mettre la li au début de la ul, essayez menuNode.insertBefore(li, menuNode.firstChild)

Answer 3

L'écriture JavaScript sans bibliothèque est un enfer, je ne pourrai jamais revenir.

Voici un squelette de script qui permet 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);    
}