Greasemonkeyを使ってRedditナビゲーションバーを編集するには？

Question

私はRedditのナビゲーションバーにのみ、このようないくつかのsubredditsを表示しようとしています：

var css = document.createElement("style"); 
css.type = "text/css"; 
css.innerHTML = 
    "#sr-header-area .flat-list > li { white-space: initial !important; } " + 
    "#sr-header-area .dropdown.srdrop { padding-left: 0 !important; }" + 
    ".sr-list       { display: inline !important; visibility: hidden; } " + 
    "#sr-header-area > .width-clip { position: initial !important; padding-left: 5px !important; } " + 
    "#sr-more-link     { display: none !important; } " + 
    ".dropdown.srdrop     { display: none !important; }"; 

document.head.appendChild(css); 

：別のuserscript（https://greasyfork.org/en/scripts/12571-expand-subreddit-header）からのコードを使用して http://i.imgur.com/eDOdUBJ.png

は、私はテキストを削除することができましたしかし、私はそれをテキストリンクで置き換える方法を見つけ出そうとしています。リンクが2つあるナビゲーションバーのコードは、次のようになります。

<div id="sr-header-area"> 
<div class="width-clip"> 
<div class="sr-list"> 
<span class="separator">&nbsp;</span> 
<ul class="flat-list sr-bar hover" id="sr-bar"> 
<li><a href="https://www.reddit.com/r/AskReddit/" class="choice">AskReddit</a></li> 
<li><span class="separator">-</span><a href="https://www.reddit.com/r/funny/" class="choice">funny</a></li> 
</ul> 
</div> 
</div> 
</div> 

助けてください。ありがとう。

Answer 1

Chromeの開発ツール（またはFirebugなど）を使用して、「要素の検査」機能を使用して、項目をクリックして検査ウィンドウで見つけます。

ここから、そのアイテムに関連付けられている階層のリストとそのアイテムの識別子、その親と兄弟を見ることができます。以下のスクリーンショットで

ルック：青オーバーレイと黄色ポップアップメインウェブページウィンドウに示すように

• Subreddit項目の最初のが、検査されます。
• ウェブページの下にはインスペクタがあります。マウスが最初のSubredditリンク「AskReddit」の上をホバーしています。
• HTMLのすぐ下に階層リストがあり、選択した要素が青色でリストの左側に親要素、右側に子要素が表示されます。
• このビューを使用すると、サブレディトバー自体のIDが「sr-bar」であり、削除しようとしている項目がリストの「LI」項目に含まれていることがわかります。

JavaScriptで

、我々はquerySelectorAllを使用してすべての項目に一致するCSSセレクタに渡すことによってsubredditsのリストの参照を取得することができます。

forループを使用すると、サブディレクトリのリストをトラバースして操作できます。以下では、すべてのサブディスクリプタを最初のディスクリプタから切り離してページから削除する方法を示しています。

var subredditListItems = document.querySelectorAll("#sr-bar>li"); 

for(var i = 1, len = subredditListItems.length; i < len; i++) {  
    listOfItems[i].remove(); 
} 

他の方法でリストを操作することもできます。たとえば、リスト項目を追加したり変更したりすることでメリットがあるようです。ここが自分のリンクを追加する方法の例です：

var subredditListBar = document.querySelectorAll("#sr-bar"); 
var subredditItem = document.createElement("li"); 
var link = document.createElement("a"); 

link.href = "http://stackoverflow.com"; 
link.textContent = "Stack Overflow!"; 

subredditItem.appendChild(link); 
subredditListBar.appendChild(subredditItem);