DOM 操作と GreaseMonkey に関するちょっとしたヘルプ
-
21-08-2019 - |
質問
私はJSの男ではないので、暗闇の中でちょっとフラフラしています。基本的に、私は特定のユーザーのページにいるときに、そのユーザーへの @reply を Twitter 検索するためのリンクを追加するものが欲しかったのです。
私が理解しようとしている2つのこと:
- 正しい URL を構築できるようにページからユーザー名を抽出する方法。つまり。私がオンなら http://twitter.com/ev 、「ev」を取得する必要があります。
- 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);
}
解決
ここでは上記の純粋な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
ビットの周りいじくるする必要があります。
PS。 、「セクション・リンク」クラスを無視しての自由を取ったことが、yの信者を次のxの書式だとして、zのアップデートリンクます。
他のヒント
ここでそれを行うための方法、実際にテストしていません(無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の中のLiを置くために正しいことを疑うので、私はdiv要素を落としました。あなたが本当にULの開始時にリチウムを配置する必要がある場合は、menuNode.insertBefore(li, menuNode.firstChild)
を試してみてください。
ライブラリせずに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);
}
所属していません StackOverflow