И ещё примерно 3,3 тыс новых способов читать «Хабрахабр» и «Гиктаймс»

Пару дней назад написала статью о том как можно менять UI/UX под себя, если интересно посмотрите мой комментарий. В качестве примера реализовала ваши запросы для Хабра.

Пусть интернет прогнётся под нас

Прочитала статью «И ещё примерно 3,3 тыс новых способов читать «Хабрахабр» и «Гиктаймс»» и последний комментарий как раз типичный случай когда такой плагин мог бы быть использован, если что-то не устраивает в UI/UX сайта.

Текст комментария (надеюсь автор не возражает):

«Очень странно, что на ресурсе, где комментарии к статьям порой бывают интереснее самих статей, нет нормальной работы с комментариями. Я много раз писал в поддержку, но безрезультатно. Вот, что хотелось бы уметь делать:

1. Свернуть ветвь комментариев
2. Перейти к следующему топ-левел комментарию
3. Сортировать комментарии по рейтингу»

Попробовала реализовать в меру своего понимания как было бы удобно.

Как попробовать:

Открываем «options», добавляем новый элемент, вводим любое имя.

В url: ^https?://[^/]*(habrahabr|geektimes)\.ru

В Source копируем код

if(!document.querySelector('a[data-cid]'))
{
   document.querySelectorAll('.comments_list ul > li.comment_item').forEach(li => {
		if(li.querySelector('ul > li')) {
			var liNext = li.nextElementSibling;
			li.parentNode.querySelectorAll('#' + li.id + ' > .comment_body .comment-item__controls').forEach(dv => {
				var a = document.createElement('a');
				a.innerText = 'hide responses';
				a.setAttribute('href', '#');
				a.setAttribute('data-cid', li.id);
				dv.appendChild(a);

				if(liNext) {
					var a = document.createElement('a');
					a.style.marginLeft = '1em';
					a.innerText = 'next in the level';
					a.setAttribute('href', '#' + liNext.id);					
					dv.appendChild(a);
				}
			}); 
		}
        });

        var rates = [];
        document.querySelectorAll('.comments_list ul > li.comment_item').forEach(li => {
		var rate = parseInt(li.parentNode.querySelector('#' + li.id + ' > .comment_body .js-voting span').innerText.replace('–', '-'));
		rates.push({ r: rate, id: parseInt(li.id.substring(8)) });
        });

        rates.sort(function(a, b) {
            if(a.r < b.r)
                return 1;
            else if(a.r > b.r)
                return -1;
            else {
                if(a.id < b.id)
                    return -1;
                else if(a.id > b.id)
                    return 1;
                else
                    return 0;
            }
        });

	var currentRate = 0;
	var a = document.createElement('a');					
	a.innerText = '++';
	a.setAttribute('style', 'margin-top: 2em; font-weight: bold; font-size: 20px; color: #808020; background-color: white; text-decoration: none; cursor: pointer;');
        document.querySelector('#xpanel').appendChild(a);
	a.addEventListener('click', (event) => {
		if(currentRate < rates.length)
		{
			var url = location.href;
			location.href = "#comment_" + rates[currentRate].id;
			history.replaceState(null,null,url);
			currentRate++;
		}
	});

   document.querySelector('.comments_list').addEventListener('click', (event) => {
	var t = event.target;
	if(!t.getAttribute('data-cid'))
		return;

	event.preventDefault();
        event.stopPropagation();
	t.innerText = (t.innerText == 'hide responses' ? 'show responses' : 'hide responses');
        document.querySelectorAll('li#' + t.getAttribute('data-cid') + ' > ul').forEach(ul => { 
		ul.style.display = (ul.style.display == 'none' ? 'block' : 'none'); 
	});	
   });
}

1. После открытия статьи будет возможность скрыть / показать ответы, ссылка «hide/show responses».
2. Перейти к следующей статьи на этом уровне (ссылка «next in the level»)
3. При нажатии "++" под иконкой «обновить комментарии» будет переходить по рейтингу и дате комметариев

Пример как это выглядит

Пусть интернет прогнётся под нас

Перевыполнила капиталистические обязательства, добавила поддержку не только FireFox, но и MS Edge.

Детали смотрите под update 4.

Пусть интернет прогнётся под нас

Сконвертировала код под FireFox https://github.com/ntpetrova/CustomActionsFireFox

Почти что 1-в-1, небольшие изменения.

Пусть интернет прогнётся под нас

Сконвертировала код под FireFox https://github.com/ntpetrova/CustomActionsFireFox

Завтра подписанную версию залью.

Пусть интернет прогнётся под нас

С самого начала можно было гарантированно сказать что никто и не будет использовать этот плагин.

Корпорация добра стимулирует использование расширений ТОЛЬКО из их магазина.

Если установить что-то в режиме разработки, то через несколько дней, под предлогом безопасности, при запуске браузера начнут предлагать удалить этот плагин и нету возможности запретить это. Очень не многие пользователи будут готовы нажимать cancel каждый раз.

А у плагинов из магазина такая репутация, что очень не многие из тех кто понимает потенциальные возможности в проблемах с безопасностью согласятся установить это расширение. Особенно с учетом тех привилегий которые нужны для его правильной работы.

Так что поверьте, нету завышенных ожиданий.

Пусть интернет прогнётся под нас

Спасибо за совет.

Предупреждение пойдет по графе улучшения UI, но довольно незначительное.
Завлаба скорее не зачтёт как отдельный пункт, придется что-то еще придумывать.

Пусть интернет прогнётся под нас

Согласно документации:

«runAt: The soonest that the JavaScript or CSS will be injected into the tab. Defaults to „document_idle“.»

дополниетельные опции: «document_start» и «document_end».

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

Если его пользователи это те кому надо внедрить пару-тройку строчек на JS чтобы сделать быстрый фикс чего-то в пользовательском интерфейсе, то с моей точки зрения им важнее простота и эти две опции ее предоставляют.

Никто не мешает их просто игнорировать, если хочется иметь полный контроль.

Пусть интернет прогнётся под нас

Согласна, трудно придумать что-то новое. Всё уже было сделано много раз и чем дальше тем труднее и труднее быть оригинальной.

Задержка на 1 или 5 секунд была сделана для случаев когда подгружается дополнительный контент по AJAX.

Можно конечно в пользовательский скрипт добавлять проверки, но в большинстве случаев использование задержки будет достаточно и позволит сделать скрипт сильно проще.

Пользовательский интерфейс, да, это больной вопрос. Чувство прекрасного у меня не из того места растёт.

Пусть интернет прогнётся под нас

Быстро просмотрев на лису, вижу что API очень похожи.

Осенью возьмусь, сейчас смены по 12-ть часов. Боюсь что не осилю при таком графике.

Пусть интернет прогнётся под нас

Как говорит наш завлаб, ничего невозможного нету, вопрос времени и ресурсов.

Идея нравиться, примерно как я это вижу:

При навигации на сайт, по url для корневого домена или по иерархии фолдеров проверяется на наличие комментариев.

Комментарий может быть помечен как публичный или зашифрованный (в этом случае проверяем есть ли у нас ключ для расшифровки).

Показываем иконку уведомления в тулбар или всплывающее окно со списком комментариев, если есть новые записи со времени последнего визита.

Только нужен ресурс, центральный сервер или дисковери сервис в случае р2р.

Пусть интернет прогнётся под нас

Я опубликовала статью в песочницу, думала что её увидят только те, кто специально на это подписан. Так что сорян, что-то проглядела.

Ну а по поводу надергать куски — этому есть синоним: интеграция компонентов. Это с какой стороны посмотреть, иногда это плюс, а не минус.

Пусть интернет прогнётся под нас

Я не настоящий сварщик, только учусь.

Спасибо за подсказку, посмотрю подробнее в эту сторону.