Расширение браузера для сайта toster.ru26.03.2019 22:49

Привет, уважаемые Хабровчане.

Как и многие здесь я часто пользуюсь Тостером и порой очень не хватает некоторых фич, которые могли бы облегчить или ускорить процесс взаимодействия с данным сайтом.
Поэтому было решено сделать расширение для браузера, которое восполнило бы этот пробел.
В итоге родился вот такой проект — Toster Extension.

Что умеет расширение:

  1. Скрывать кнопку «Отметить решением» (для чужих вопросов)
  2. Поменять местами кнопки «Отметить решением» и «Нравится»
  3. Скрывать блок с вакансиями и заказами
  4. Скрывать блок «Похожие вопросы»
  5. Скрывать блок «Самое интересное за 24 часа»
  6. Дублировать пагинацию над списком вопросов в ленте
  7. Скрывать вопросы с решениями
  8. Использовать Ctrl+Enter для отправки формы
  9. Сохранять введенный в форму ответа текст до отправки
  10. Показывать имя или ник в списке вопросов
  11. Показывать все теги в списке вопросов
  12. Оборачивать примеры кода в спойлер
  13. Включить моноширинный шрифт для кода в вопросах/ответах/комментариях
  14. Открывать ссылки со страницы вопроса в новой вкладке
  15. Показывать ссылку на ЛС юзера на Хабре
  16. Показывать превью вопроса при наведении на заголовок в ленте
  17. Вырезать примеры кода из превью вопроса
  18. Показывать превью профиля при наведении на имя юзера
  19. Включить реалтайм показ новых уведомлений
  20. Черный список тегов
  21. Черный список пользователей

Примерно так выглядит сейчас моя
страница настроек
image

Расширение пока доступно только для Google Chrome и Firefox.

Проект написан на TypeScript, страница настроек с использованием Vue.js.

В качестве временного хранилища вопросов используется LocalStorage. Да, знаю, некошерно и лучше бы использовать тот же IndexedDB, но пока вот так.

Ближайшие планы:

  1. Отображение количества непрочитанных уведомлений на иконке расширения
  2. Лента вопросов с автоматическим обновлением
  3. Страница вопроса с автоматическим обновлением ответов и комментариев
  4. Поднять бэкенд для того, чтобы можно было хранить там проиндексированные вопросы, черные списки, разные отметки (например дизлайки) и прочее

Чуть позже расскажу о нюансах использования Vue.js в браузерном расширении, а так же об отличии Firefox и Chrome в неожиданном для меня месте.

Жду предложений в Issues и конструктивной критики в комментариях. Всем спасибо, что уделили немного времени.

© Habrahabr.ru