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

Question

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

使用其他用户代码（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栏本身的ID为“sr-bar”，您要删除的项目包含在列表中的“LI”项目中。

在JavaScript中，我们可以使用querySelectorAll并传入匹配所有项目的CSS选择器来获取subreddits列表的引用。

使用for循环，我们可以遍历和操作subreddits列表。下面你可以看到如何循环除第一个之外的所有subreddits，并从页面中删除它们。

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