Введение: Хроническая боль пользователя Hacker News
Представьте утро понедельника: вы открываете Hacker News в надежде быстро просмотреть главные новости за чашкой кофе, а через пять минут ваш браузер уже захлебывается в двадцати открытых вкладках (примерно как ваша оперативная память при запуске Electron-приложений). Знакомо? В этот момент разработчик внутри вас начинает тихо паниковать от хаоса, а продуктивность стремительно падает.
Каждый день разработчики, инженеры и технологические энтузиасты по всему миру открывают Hacker News (HN), чтобы узнать о свежих релизах, почитать глубокие технические разборы и погрузиться в холивары в комментариях. Интерфейс сайта минималистичен, функционален и не меняется десятилетиями. Но именно эта спартанская простота порой порождает специфические паттерны поведения, которые со временем начинают раздражать.
Один из таких паттернов — ритуал открытия ссылок. Когда вы видите интересный пост на главной странице HN, перед вами встает классическая дилемма:
- Открыть саму статью, чтобы прочитать первоисточник.
- Открыть ветку комментариев, чтобы узнать мнение сообщества, найти опровержения (classic HN style: "First comment: actually, this broke in production because...") или альтернативные решения.
В девяти случаях из десяти вы хотите сделать и то, и другое. В результате рождается навязчивое движение: клик средней кнопкой мыши по заголовку статьи, затем клик средней кнопкой мыши по ссылке "comments". Или, если вы используете мобильное устройство или привыкли к быстрым клавишам, этот процесс превращается в постоянное переключение между вкладками.
Спустя годы мириться с этим стало выше моих сил. Зачем тратить драгоценное время и забивать панель вкладками на каждую новость, если можно заставить браузер работать на себя? Решением стал кастомный userscript, который объединяет контент статьи и обсуждение на одном экране. В этой статье я подробно расскажу, как спроектировал и написал этот скрипт, с какими трудностями столкнулся и как вы можете установить его у себя уже сегодня.
Архитектура проблемы и поиск идеального решения
Устав от бесконечного переключения между вкладками, мы сталкиваемся с главным вопросом инженера: как решить эту задачу изящно и без лишних костылей? Прежде чем писать хоть строчку кода, нужно было определиться с правильным инструментом. В веб-разработке существует несколько способов модифицировать поведение сторонних сайтов:
- Полноценное расширение для браузера (Browser Extension): Надежный вариант с поддержкой WebExtensions API, фоновыми скриптами и хранилищем. Однако для такой простой задачи создание расширения — это избыточная сложность (overkill). Потребуется настраивать манифесты, собирать проект через webpack/vite и проходить модерацию в магазинах расширений (Chrome Web Store, Firefox Add-ons).
- Закладки со скриптами (Bookmarklets): Быстро, но неудобно. Закладку нужно нажимать каждый раз при загрузке страницы, она не срабатывает автоматически при переходе по бесконечной ленте или обновлении страниц.
- Userscript (скрипт пользователя): Идеальный компромисс. Работает через менеджеры расширений вроде Tampermonkey, Violentmonkey или Greasemonkey (работает примерно так же стабильно, как временный фикс в пятницу вечером перед отпуском). Выполняет код автоматически на заданных URL, имеет доступ к манипуляциям с DOM и стилям, легко обновляется и отлаживается.
Выбор был очевиден — пишем userscript на чистом JavaScript. Основная идея заключалась в том, чтобы внедрить кнопку предпросмотра непосредственно в DOM-дерево Hacker News.
Реализация и код скрипта
Переходим от теории к практике: когда архитектура утверждена, самое время засучить рукава и написать рабочее сердце нашего будущего инструмента. Для реализации задумки нам понадобится менеджер скриптов и немного ванильного JavaScript. Скрипт должен перехватывать клики по специальной кнопке, подгружать страницу комментариев или саму статью через Fetch API и рендерить их в