如何使用Greasemonkey编辑Reddit导航栏？

Question

我试图让reddit的导航栏只显示几个subreddits这样的： http://i.imgur.com/eDOdUBJ.png

从另一个userscript（https://greasyfork.org/en/scripts/12571-expand-subreddit-header）使用代码，我能删除文本：

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

但是，我试图弄清楚如何用文本链接替换它。与两个链接的导航栏的代码如下所示：

<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之下是层次结构列表，以蓝色显示所选元素，其父元素位于列表左侧，其子元素位于右侧。
• 使用这个视图，我们可以看到subreddit栏本身有一个“sr-bar”的ID，你想删除的项目包含在列表中的“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);