Расширения для браузеров — это отличный способ настроить наш браузер под себя.
Я уже писал о 10 лучших расширениях Chrome для разработчиков.
Я хочу начать небольшую серию статей о браузерных расширениях, и прежде чем погрузиться в то, как создать расширение, давайте посмотрим, какие виды расширений мы вообще можем создавать.
Я обнаружил, что эту информацию очень трудно найти, и нет никакого определенного источника.
Я провел свое исследование и нашел подборку тех, которые упоминаются в этой статье.
Примечание: их может быть больше, и я буду рад услышать, если это так.
Краткое изложение того, что мы будем проходить сегодня.
- Темы
- Новая вкладка
- Всплывающее окно
- Инъекция на странице
- DevTools
Примечание: я буду рассматривать в основном Chrome, так как он является самым распространенным, но большинство из них также доступны для firefox и edge.
Темы расширений браузера
Этот пункт часто упускают из виду, но вы можете создать тему для браузера.
Это также считается расширением браузера.
Вы предоставляете конечному пользователю пользовательскую тему, как мы используем в наших редакторах.
Тема — это все еще расширение, но без HTML и JavaScript.
Посмотреть все темы Chrome
Также можно применить настройки в новой вкладке Chrome.
Это включает в себя опции цвета и фона, чтобы сделать Chrome более ярким.
Расширения браузера для новой вкладки
Новая вкладка — это ваш домашний фронт в любом браузере, и есть много классных приложений, которые делают эту новую вкладку суперценной.
Лучшим из них, конечно, является daily.dev.
Но этим дело не ограничивается. Растет число этих фантастических приложений для работы с новой вкладкой.
На мой взгляд, это очень полезные приложения, которые в зависимости от того, для чего вы используете Chrome, могут помочь сделать его более продуктивным.
Обзор некоторых расширений новых вкладок в Chrome
Всплывающие расширения браузера
Еще один тип расширений — это всплывающие расширения, которые вы часто видите.
Они добавляют значок в строку вкладок браузера и по щелчку запускают всплывающее окно с некоторыми расширениями.
Некоторые примеры вы можете знать:
- Lighthouse
- Панель инструментов разработчика
- Metamask .
Они обычно обеспечивают действия для данной страницы и дают пользователю ярлык для выполнения определенного действия.
Расширения для инъекций на странице
Другой тип расширений — это расширения, которые внедряются на определенных страницах.
Они часто предоставляют действия для определенного контента, например:
- Redux devtools (на страницах, использующих redux)
- Черная магия (на страницах Twitter)
- JSON viewer (на страницах с JSON).
Но они также могут срабатывать на всех страницах, для этого часто требуется клик, но некоторые примеры — аудит текста, инструменты доступности и так далее.
Расширения DevTools
Один из типов расширений, о котором я не знал до погружения в эту исследовательскую статью, — это DevTools!
Вы можете создать расширение, которое будет отображаться в DevTools браузера.
Вот некоторые примеры:
- React devtools
- Polymer devtools
- Ember inspector
Заключение
Существует множество различных расширений для браузеров, которые могут улучшить работу пользователя в браузере.
Поскольку мы все больше и больше погружаемся в мир онлайна, самое время начать изучать, какие расширения для браузеров вы можете создать, чтобы помочь людям.
Я планирую написать еще несколько статей о том, как их создавать и какие возможности они нам дают.
Спасибо, что прочитали, и давайте общаться!
Спасибо, что читаете мой блог. Не стесняйтесь подписываться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.