Как отредактировать навигационную панель Reddit с помощью Greasemonkey?

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 dev (или Firebug или аналогичные), используйте функцию «Inspect Element», чтобы щелкнуть элемент и найти его в окне инспекции.

Здесь вы сможете увидеть список иерархии, связанной с этим элементом, а также идентификаторы для элемента или его родителей и братьев и сестер.

Посмотрите на скриншот ниже:

• Первый из пунктов Subreddit проверяется, как показано в главном окне веб-страницы с помощью синей накладкой и желтого всплывающего окна.
• Под веб-страницей находится инспектор. Мышь зависает над первой ссылкой Subreddit, «AskReddit».
• Непосредственно под HTML - это список иерархии, отображающий в синем выбранный элемент с его родительскими элементами слева от него в списке и его дочерние элементы справа.
• Используя это представление, мы можем видеть, что сама панель subreddit имеет идентификатор «sr-bar», а элементы, которые вы хотите удалить, содержатся в элементах «LI» в списке.

В JavaScript, мы можем получить ссылку из списка subreddits с помощью querySelectorAll и передачи в селектор CSS, который соответствует всем пунктам.

Используя цикл 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);