Расширение браузера для сайта toster.ru

Моя цель - предложение широкого ассортимента товаров и услуг на постоянно высоком качестве обслуживания по самым выгодным ценам.
Привет, уважаемые Хабровчане.

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

В итоге родился вот такой проект — 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 и конструктивной критики в комментариях. Всем спасибо, что уделили немного времени.
Источник: https://habr.com/ru/post/445450/


Интересные статьи

Интересные статьи

Недавно на хабре вышла статья Скрапинг современных веб-сайтов без headless-браузеров, и в комментариях было высказано мнение, что без headless-браузера не выйдет получить...
Привет, Хабр! Представляю вашему вниманию перевод статьи «Quantum Computing» автора Christopher Barnatt. Квантовые вычисления Квантовые вычисления — быстро развивающаяся область компь...
Права и обязанности заказчика, веб-студии и дизайнера могут быть совершенно разными в зависимости от подписанных документов и, самое главное, от сохранности этих документов, даже если...
Всемирная паутина — это океан данных. Здесь можно посмотреть практически любую интересующую Вас информацию. Однако, "вытащить" эту информацию из интернета уже сложнее. Есть несколько способов п...
В статье будет рассмотрена значительная часть способов проверки качества: что-то может сделать менеджер, не подгружаясь в программный код, а для некоторых проверок нужен технически подкованный специал...