القليل من المساعدة في التعامل مع DOM وGreaseMonkey

Question

أنا لست رجل JS لذا فأنا أتعثر في الظلام.في الأساس، أردت شيئًا من شأنه أن يضيف رابطًا لبحث تويتر عن @replies لمستخدم معين أثناء تواجده في صفحة ذلك الشخص.

شيئان أحاول اكتشافهما:

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 إلى النهاية، وقد أسقطت div لأنني أشك في صحة وضع li في div.إذا كنت تريد حقًا وضع li في بداية 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);    
}