Лингвофорум

Не вижу правила DRY в коде .

Круто. А я в свой блог через профиль->статистика захожу. Под интересные темы у меня дил с адресом https://lingvoforum.net/index.php?action=unread;all;start=0. В принципе, если бы в блог приходилось заходить часто, выделил бы дил и под блог.

Сначала мне надоело каждый раз искать собственный раздел в длинном списке блогов.
Потом стало лениво и в другие разделы лазить через главную страницу.
В итоге я психанул и сделал себе меню с часто используемыми разделами.

Для этого требуется расширение, позволяющее внедрять свой JS-код на просматриваемые страницы в браузере.
Установил хромовое расширение Custom JavaScript for Websites 2. (Исходный код)
В Оперу можно устанавливать расширения от Хрома, если предварительно установить расширение Install Chrome Extensions.

Для //lingvoforum.net написал пользовательский JS:

(function() {
  var t = `
  <div class="xx-title">Избранное</div>

  <div class="xx-popup-menu">

  <ul>
  <li><a href="/index.php?action=unread;all;start=0">Все непрочитанные темы</a></li>
  <li><a href="/index.php?action=who">Кто онлайн</a></li>
  </ul>

  <ul>
  <li><a href="/index.php/board,180.0.html">Мой блог</a></li>
  <li><a href="/index.php/board,13.0.html">Просто общение</a></li>
  <li><a href="/index.php/board,223.0.html">История и культура</a></li>
  <li><a href="/index.php/board,39.0.html">Интерлингвистика</a></li>
  </ul>

  <ul>
  <li><a href="/index.php/board,133.0.html">Раздел модераторов</a></li>
  <li><a href="/index.php/topic,51848.0.html"> => Правила форума (модераторская версия)</a></li>
  <li><a href="/index.php/board,1.0.html">Работа форума</a></li>
  <li><a href="/index.php/topic,65862.0.html"> => Правила форума</a></li>
  </ul>

  </div>

  <style>
  #xx-custom-user-menu {
    position: fixed;
    width: 10em;
    height: 2em;
    top: 5px;
    left: 5px;
    border: 1px solid blue;
    background: #fff;
  }
  #xx-custom-user-menu .xx-title {
    color: blue;
    text-align: center;
    line-height: 2em;
    font-weight: bold;
  }
 
  #xx-custom-user-menu .xx-popup-menu {
    position: relative;
    top: 1px;
    left: -1px;
    border: 1px solid blue;
    background: #fff;
    width: 30em;
 
    display: none;
  }

  #xx-custom-user-menu:hover .xx-popup-menu {
    display: block;
  } 
  </style>
  `
  var custom_user_menu = document.createElement("div");
  custom_user_menu.id ="xx-custom-user-menu";
  custom_user_menu.innerHTML = t;
  document.body.appendChild(custom_user_menu);
})();


Результат — выпадающее меню в верхней части страницы: