что такое расширение для браузера хром
24 лучших расширения для браузера Google Chrome
Рассказываю о лучших расширениях для Google Chrome, упрощающих работу с вкладками, повышающих безопасность пребывания в сети и устраняющих основные недостатки браузера.
СrxMouse Gestures
Популярный плагин, добавляющий в браузер новые механизмы управления базовыми функциями Google Chrome. Принцип работы прост: зажимаем правую кнопку мыши, рисуем курсором определенный жест и отпускаем зажатую кнопку.
Таким образом, можно перемещаться между вкладками, создавать новые, закрывать открытые страницы и перемещаться по пунктам меню. Можно рисовать и новые жесты, закрепляя за ними собственные команды.
Расширение помогает ускорить навигацию по интерфейсу браузера и не совершать лишних движений при выполнении рутинных задач.
AdGuard
Лучший блокировщик рекламы в рунете. Дополнение AdGuard по качеству блокировки контента обходит даже всем известный AdBlock. Это легковесное дополнение, блокирующее рекламу и защищающее пользователей от отслеживания конфиденциальных данных.
В AdGuard по умолчанию включен большой список фильтров рекламы для российских сайтов. При желании можно добавить собственные. Также можно создать белый список ресурсов, на которых останется реклама даже с включенным расширением.
AdGuard также предотвращает работу скриптов, мешающих блокировщику рекламы. На какие бы ухищрения не шли администраторы сайтов, AdGuard все равно будет удалять рекламу.
Checker Plus for Gmail
Это дополнение встраивает практически полноценный клиент Gmail в панель управления Google Chrome. Сразу после установки расширения справа от поисковой строки появится иконка, отображающая список непрочитанных сообщений.
Если нажать на значок расширения, то откроется компактный интерфейс Google Почты со всей входящей корреспонденцией. Письма можно удалять, сортировать и даже отвечать на них.
Также это дополнение отправляет уведомления, когда на почту приходит новое письмо, причем оповещения приходят, даже если браузер закрыт.
Papier
Papier превращает новую вкладку в браузере в подобие блокнота, который поддерживает форматирование Markdown. Расширение позволяет быстро записывать новые идеи прямо в Chrome, не переключаясь в отдельное приложение.
Все записи из Papier сохраняются локально и доступны даже при отсутствии интернета. Создавать учетную запись и хранить данные в облаке не нужно. Правда, все записи остаются на ПК и не синхронизируются с Google Chrome на других устройствах.
Papier поддерживает темную тему, умеет считать количество введенных знаков и экспортировать написанные тексты в формат PDF.
Screencastify
Одно из лучших расширений Google Chrome для создания видеоинструкций и онлайн-уроков.
Screencastify работает как браузерный инструмент для скринкастинга (то есть записи изображения). Видео из Screencastify можно дополнить картинкой с веб-камеры, звуком со встроенного микрофона или прямо из браузера. Так делают многие лекторы.
По ходу записи можно использовать аннотационные инструменты. Они нужны, чтобы подсветить определенные участки страницы или что-то нарисовать прямо в окне браузера. По завершении записи полученный ролик автоматически сохраняется в облако Google Drive.
Session Buddy
Session Buddy упрощает менеджмент открытых вкладок. Это расширение заменяет стандартную новую вкладку страницей со всеми используемыми сайтами и недавно запущенными сессиями (то есть окнами с определенным набором вкладок).
Дополнение в хронологическом порядке сортирует все открытые веб-страницы, хранит историю посещений и позволяет быстро восстановить все ранее открытые сайты, если браузер вдруг закроется с ошибкой или вы случайно его выключите.
Вкладки в Session Buddy можно делить на группы вручную, переименовывать их и сортировать удобным образом. В дальнейшем созданные группы можно использовать для быстрого перехода сразу к нескольким сайтам.
1Password X
В список лучших расширений для Google Chrome не могла не попасть браузерная версия наиболее защищенного и удобного менеджера паролей. 1Password X полностью повторяет функциональность одноименных десктопных и мобильных приложений.
С помощью дополнения можно автоматически подставлять сохраненные пароли и данные банковских карт в соответствующие веб-формы. Можно генерировать новые пароли при регистрации учетных записей. Также оно проверяет, не были ли скомпрометированы используемые пароли.
Данные из 1Password X синхронизируются с облачным хранилищем 1Password и мобильными приложениями. Недостатком расширения можно назвать его стоимость. Для полноценной работы с сервисом нужно подключить подписку стоимость 379 рублей в месяц.
HabitLab
Дополнение к браузеру, способное повлиять на ваши привычки. Задача HabitLab оптимизировать рабочий процесс и сократить время пребывания в социальных сетях. Можно запретить себе смотреть ролики на YouTube больше часа в сутки или отвечать на сообщения во ВКонтакте больше 30 минут в день.
Отличие HabitLab от множества других подобных расширений заключается в ненавязчивом подходе. Здесь никто не устанавливает правила автоматически. Вы сами решаете, какие сайты хотите посещать реже и сколько времени готовы ежедневно на них проводить, чтобы не навредить себе и своей продуктивности.
А можно, наоборот, запретить себе перерабатывать и ограничить время, которое можно проводить в почтовом ящике или в рабочем чате.
Лучшее расширение для Google Chrome по мнению параноиков. Blur прячет от любопытных глаз всю конфиденциальную информацию. Не дает сторонним ресурсам наблюдать за вами со стороны и собирать приватные данные для трекинга и настройки рекламы.
А еще в Blur встроен менеджер паролей. Он подставляет их в нужные поля, как и 1Password. То же касается и платежных данных. При покупке премиум-версии плагина появляется возможность маскировать номера банковских карт и выполнять покупки в сети анонимно, не оставляя кому-либо шансов на отслеживание вашей деятельности.
MozBar
Расширение для SEO-специалистов, помогающее оптимизировать сайты для поисковых роботов Google. MozBar позволяет анализировать различные поисковые запросы, наблюдать за показателями сайта, подсвечивать ключевые слова и прочие нужные элементы страницы.
По ходу работы плагин дает советы по оптимизации сайта, собирает массу полезных данных и создает удобные для восприятия графики, позволяющие оценить качество выполняемой работы.
Полученную из MozBar информацию можно легко экспортировать, создав отчет в специальном формате.
Better History
Да, в Google Chrome есть отдельное окно для управления историей, но оно не отличается богатой функциональностью. В нем даже нет удобного способа навигации по времени. А ведь зачастую мы напрочь забываем хотя бы приблизительное название посещенных сайтов, но помним, когда мы на них заходили.
Better History расширяет возможности встроенного окна с историей и добавляет в него горизонтальный ползунок, позволяющий перемещаться по конкретным датам в истории браузинга. Можно радикально сузить поиск сайтов до конкретного дня и часа.
Также Better History совершенствует встроенный поиск, чтобы можно было искать не только по названию сайтов, но и по контенту, который эти сайты в себе содержали. Это уж точно поможет разыскать забытую страницу.
Mercury Reader
В Google Chrome до сих пор нет режима чтения, и поэтому приходится искать альтернативные решения, добавляющие в браузер эту функцию. Одним из таких решений является дополнение Mercury Reader, превращающее любую страницу с огромным количеством рекламы и лишнего контента в приятное чтиво с красивыми шрифтами и без отвлекающих факторов.
Mercury Reader запускается практически на любой странице нажатием комбинации клавиш Control/Command + Esc. Сразу после нажатия открытая статья превратится в страницу книги без баннеров и специфичных шрифтов.
Визуальную составляющую текста можно настроить на свой вкус, изменив стиль текста, включив темную тему или изменив размер букв.
Unshorten.link
Сокращенные ссылки – это, конечно, удобно. Можно спрятать гигантскую ссылку из нескольких сотен знаков за компактным и легко читаемым URL. Но у них есть один важный недостаток – невозможно определить, на какой сайт в итоге попадет пользователь, кликнув по сокращенному URL. А это уже риск для безопасности компьютера и персональных данных пользователя.
Unshorten.link исправляет ситуацию. С помощью этого дополнения можно укороченную ссылку преобразовать в обычную еще до перехода на нее. Причем расширение работает в автоматическом режиме. Не нужно самостоятельно копировать ссылку и вставлять куда-то – при клике по укороченному URL браузер отреагирует самостоятельно, предложив сначала взглянуть на оригинальный адрес и отсканировать его на наличие вирусов.
OneTab
Лучшее расширение Google Chrome для тех, кто часто открывает по несколько десятков вкладок и пытается с ними сладить. OneTab размещает все открытые вкладки на одной странице в хронологическом порядке. На этой странице хорошо видны названия сайтов, их фавиконки и прочие детали, помогающие ориентироваться и открывать нужные ссылки.
OneTab позволяет закрыть все активные вкладки, которые вы держите в открытом состоянии, потому что они могут понадобиться в любой момент. Можно в один клик их закрыть, но при этом сохранить список закрытых вкладок в отдельном окне OneTab.
После этого вкладки можно восстановить все разом или открывать каждую по мере необходимости. Также список страниц из OneTab можно одним нажатием экспортировать в текстовый файл.
Check My Links
Еще один инструмент для SEOшников и вебмастеров. Принцип работы расширения простейший – оно анализирует выбранную страницу, проверяет каждую ссылку и, если находит нерабочую, подсвечивает ее, оповещая о находке пользователя.
Todoist
Один из наиболее популярных менеджеров задач для компьютеров и мобильных устройств можно поселить прямо в браузере. Удобство этого расширения заключается в интеграции списка задач в панель управления Google Chrome. Не нужно каждый раз открывать официальный сайт Todoist или запускать приложение, чтобы создать задачу, завершить уже существующую или просто проверить список дел.
Функционально Todoist для Google Chrome почти ничем не ограничен. Это полноценный таск-менеджер, но в более компактном облике. Он даже уведомления может присылать через встроенную в браузер систему оповещений. Но для работы с ним все же нужна учетная запись, а для доступа к некоторым функциям еще и премиум-аккаунт стоимостью 229 рублей в месяц.
HoverZoom+
Полезное дополнение для тех, кто часто пользуется сайтами с большим количеством миниатюрных фото. Чтобы не переходить по каждой ссылке и не открывать мини-изображение в отдельной вкладке, можно просто навести курсор, и картинка автоматически увеличится.
После установки HoverZoom+ даже не нужно ничего нажимать. Расширение работает в автоматическом режиме и увеличивает все, на что вы наведете курсор. Размер увеличенного изображения зависит от его оригинального разрешения. Если картинка сама по себе маленькая, то и HoverZoom+ не спасет.
Web of Trust
Еще одно отличное расширение для параноиков. WOT сканирует все посещаемые страницы и видимые ссылки, а затем присваивает им рейтинг доверия. Если оценка низкая, значит, сайт грешит распространением вирусов, отслеживанием конфиденциальных данных или фишингом (расширение подскажет, чем именно). Если оценка высокая, значит, сайту можно доверять и спокойно переходить по ссылке. На рейтинг влияют реальные люди, установившие расширение, поэтому ему точно можно доверять.
Это расширение может быть особенно полезно неопытным пользователям сети, которые пока не способны самостоятельно определить, каким ресурсам в интернете можно верить, а каким нельзя.
Stylish
Лучший плагин для тех, кто знает, как работает CSS, и хочет изменить внешний вид посещаемых сайтов. С помощью Stylish можно самостоятельно редактировать CSS-файлы, отвечающие за внешний вид страниц. Можно поменять шрифты или просто изменить их размер. Можно поменять цветовую схему, добавить границы для кнопок, изменить тему сайта целиком или слегка поменять оттенок одного из цветов. В общем, можно поменять все, что меняется с помощью редактирования CSS.
Пользователи расширения уже создали сотни тем для популярных социальных сетей, поисковика Google и других распространенных ресурсов. Поэтому Stylish можно использовать, даже если вы совсем не разбираетесь в CSS, но очень хотите освежить внешний вид надоевших веб-страниц.
Яндекс.Советник
Одно из лучших расширений для Google Chrome, которое поможет пользователям, часто покупающим в интернете товары или авиабилеты. Это небольшой плагин, беспрерывно отслеживающий посещаемые страницы и предлагающий наиболее выгодные предложения по разыскиваемым товарам или билетам.
Например, вы можете открыть сайт М.Видео и отыскать там Xbox, а Советник в этот момент сравнит стоимость товара на других сайтах и предложит вам более дешевый вариант в соседнем магазине. Работает это все на базе Яндекс.Маркета.
С авиабилетами та же история. У Яндекса есть свой агрегатор, мониторящий стоимость билетов в разных авиакомпаниях. Данные оттуда моментально поступают в браузер, чтобы пользователь не переплатил за полет.
Mate Translate
Лучший из всех доступных для Google Chrome переводчиков. В браузере Google, конечно, уже есть фирменный сервис по переводу страниц и отдельных слов, но на фоне Mate Translate он выглядит довольно скучно и слабо.
Mate Translate умеет переводить страницы целиком на несколько языков, показывает словарные дефиниции для отдельных слов (независимо от языка), а также предлагает встроенный в панель управления интерфейс для перевода фраз или слов, которых вовсе нет на странице.
Найденные слова и предложения можно сохранять в список избранных для изучения. При этом все находки синхронизируются с мобильным приложением Mate Translate, если таковое установлено на вашем смартфоне или планшете.
HTTPS Everywhere
Продукт совместной деятельности создателей Tor Project (знаменитого браузера для выхода в даркнет и защиты конфиденциальных данных) и консорциума Electronic Frontier Foundation.
Это расширение заставляет каждый сайт взаимодействовать с пользователем только через протокол HTTPS. Плагин будет запрашивать подключение по зашифрованному каналу везде, где оно доступно. В противном случае оно будет предупреждать о возможной угрозе при переходе по ссылке, не поддерживающей современный стандарт защиты.
Print Friendly
Расширение для тех, кто хочет экономить бумагу и краску в принтере. Оно автоматически преобразует распечатываемые страницы в более удобный формат без лишних визуальных блоков, рекламы и прочего бесполезного мусора, на который уйдет цветная краска.
Если вы часто распечатываете веб-сайты, то это незаменимая вещь как лично для вас, так и для планеты в целом. Print Friendly пытается сократить количество блоков на сайте так, чтобы по итогу пришлось печатать только текст без кнопок и всяческих панелей управления.
Earth View
Довольно бесполезное, но популярное расширение для Google Chrome. Earth View – это плагин, заменяющий новую вкладку в браузере на красивую фотографию нашей планеты, сделанную со спутника. Расширение работает в тандеме с сервисом Google Earth, поэтому в нем регулярно появляются качественные изображения поверхности Земли. Никакой практической пользы, но зато море эстетического удовольствия.
Это было последнее расширение в подборке. Надеюсь, что вы найдете среди них что-то интересное и полезное для себя.
Расширение для хрома: создание, публикация, опыт
В поисках новых площадок для деятельности, я обратил внимание на «виджеты» хрома, которыми пользуюсь давно, но никогда не придавал им значения. Тут же захотелось попробовать что-нибудь реализовать.
Идеей стало создание таск-менеджера для разработчика (и не только), который был бы всегда под рукой. В нем должны были отобразиться актуальные тикеты trello и jira, реквесты в gitlab и т.п. Это те вещи, которые я обычно искал, набирая ключевые слова в адресную строку браузера, типа «jira PM-20».
Расширение для хрома
Я точно знал, что расширения в браузерах — это обычные html-странички, подпитанные js-скриптами. Но при этом не имел представления, как их создавать. Первое, что выдал мне гугл по этому вопросу — статью на medium, а не официальную документацию. Это было даже лучше, т.к. это была обзорная статья простейшего виджета от идеи до публикации.
Статья дала мне представление о том, что разработка «виджета» — дело не слишком хитрое. Я тут же приступил к созданию «hello world!».
Структура
Оказалось, что нужно создать mainfest.json в корне проекта. Он описывает расширение: название, описание, автора, иконки, разрешения и т.п. Первую версию я сделал без изучения документации.
Первый manifest.json
Расширения позволяют запускать js-скрипты в фоне, которые делают что-то даже когда пользователь ими не пользуется. Этот функционал я пощупал очень поверхностно, просто, чтобы понять, как он может работать. Он просто менял заголовок в
«виджета».
Интерес для меня представляла сама страничка html, которая показывается, при нажатии на иконку в браузере, она называется popup.html в моем манифесте.
Работает она точно так же, как и любой веб-сайт, за исключением пары возможностей, например: переходы по ссылкам работают только с target=»_blank». Есть и технические ограничения, управляемые разработчиком, например Content Security Policyили permissions к функционалу браузера, которые запрашиваются у пользователя.
Запустить расширение
После создания папки с manifest.json и popup.html внутри, можно уже запустить её как виджет. На служебной страничке хрома chrome://extensions есть кнопка Загрузить распакованное расширение. С помощью нее выбираем папку
и расширение тут же отображается в списке “виджетов” рядом с адресной строкой.
С этого момента расширение уже можно тестировать: изменять popup.html, и видеть изменения, переоткрыв “виджет” нажатием на его иконку.
Публикация в webstore
Начнем с того, что возможность публикации первых 20 расширений стоит 5$. Происходит она в dashboard вебстора, для этого потребуется залить zip-архив содержимого папки расширения и поработать над рекламными текстами и картинками.
Подготовка к публикации расширения
Первая часть описания расширения будет отображаться из свойства description манифеста расширения, остальное дописывается в Detailed description в управлении расширением на webstore.
Расширение имеет гибкие настройки публикации: можно выбрать регионы мира для публикации, а также видимость расширения.
Нужно помнить, что если вы выбираете для публикации только РФ, то в остальных странах расширение не появится. Я наткнулся на это находясь в Таиланде: не мог понять почему, спустя 2 дня, расширение не ищется в сторе даже по прямому названию.
Продвинутые опции
Я описал необходимые шаги для публикации простейшего расширения, чтобы процесс был понятен. Теперь хочу осветить некоторые детали для написания более сложного “виджета“.
Суть моего расширения в использовании чужих API для получения информации. Для этого мне нужен как минимум localStorage, чтобы запоминать токены авторизации.
Я воспользовался «permissions»: [«storage»] в своем манифесте.
OAuth2
В большинстве случаев разработчики API предлагают OAuth2 протокол для авторизации.
Если вы не знакомы с этим протоколом: он предлагает безопасный процесс аутентификации и авторизации приложения от лица пользователя без доступа к логину/паролю со стороны этого приложения.
Протокол описывает несколько способов для авторизации. В идеале нужно использовать Authorization Code Flow, которое предполагает наличие бэкенда у приложения; API редиректит пользователя с Auth-кодом на приложение, а приложение на бэкенде обменивает его на токен.
Есть также упрощенный Implicit Flow, позволяющий авторизовываться без бэкенда: API после авторизации редиректит пользователя на приложение с токеном в URL.
Как же пользоваться этой “редиректной” авторизацией в расширении хрома? Заводить веб-сайт? Оказывается, что не обязательно.
Мои костыли
Изначально я взялся интегрироваться с Gitlalb и Trello. С Gitlab все оказалось “просто”: отправляешь пользователя в админку к его Gitlab, чтобы он сделал токен и передал его тебе. С таким подходом долго возиться не пришлось, я просто сделал поле для ввода токена и описал как его получить.
Trello же предоставил OAuth2, я сразу же заметил, что в нем есть implicit flow, но немного странный: токен отображается на их странице /approve в таком виде
Не став углубляться, я так же сделал поле для ввода токена в своем расширении и описал пользователю, как это сделать.
Правильный способ
Как обычно, хорошее решение приходит не сразу. Я на него наткнулся, когда начал интеграцию с Jira, которая имеет только Authorization Code Flow.
Как-то случайно я наткнулся на chrome.identity: функционал браузера, уже реализовавший все “костыли” для авторизации. Этот функционал требует включения identityв разрешениях манифеста. Я дополнил свой манифест: «permissions»: [«storage», «identity»].
Для этого нужно воспользоваться chrome.identity.launchWebAuthFlow(), которое открывает страницу авторизации API в новом окне:
Окно авторизации chrome.identity.launchWebAuthFlow
Другие опции
Когда появляется идея реализовать какой-либо функционал, рекомендую гуглить chrome API, т.к. в нем уже достаточно много подобных фич, которые облегчат вам работу. Например полный manifest.json впечатляет:
Предварительно разбираться со всеми возможностями может оказаться слишком расточительным, т.к. их огромное количество.
К тому же только js-сторона расширения сама по себе может увеличиться до больших размеров.
Моя текущая схема
Продвижение
Немного стоит упомянуть продвижение своего расширения. Особенностью “виджетов” является то, что они направлены на пользователей десктопов, которые в последние годы успели стать меньшинством.
Я попробовал контекстную рекламу и рекламу в социальных сетях. Получил небольшой опыт и нулевую конверсию.
Контекстная реклама
Мой опыт пока ограничился одной площадкой, не могу говорить за остальные, но думаю, там то же самое.
Оказывается, что в контекстной рекламе яндекса нельзя настраивать таргетинг по устройствам и браузерам. Так что если ваше расширение только для хрома, показывать рекламу придется и людям, сидящим на других браузерах, переходы которых принесут только лишние убытки.
Я не хотел делать отдельный сайт для своего расширения, поэтому рекламировал его страницу в webstore. Минус этого подхода в том, что ты можешь доверять только статистике рекламного кабинета и не можешь увидеть как пользователи ведут себя на рекламируемой странице.
Социальные сети
Они как раз и относятся к категории сайтов, на которых десктоп это умирающее меньшинство.
Вконтакте предоставляет таргетинг на мобильную и полную версию своего сайта. Но эта галочка скрыта в самом конце настроек, лично я ее не заметил до того, как слил бюджет и увидел в статистике печальный охват
На самом деле в тот день мобильные просмотры были сильно больше
Мысли напоследок
Я считаю, что расширения это мощный инструмент для людей, работающих в интернете, т.к. в браузере мы проводим много времени, которое иногда хочется оптимизировать. Например виджет гугл-переводчика, переводящий текст при выделении, хороший пример оптимизации. Решение проблемы огромного количества открытых вкладок “на попозже” я тоже решил с помощью виджета.
Написание расширений дает опыт в изучении подводной части айсберга “Chrome” и написании “фронтенда” (особенно если вы бэкенд-разработчик). Расширения можно писать на том же React JS с которого можно перекинуться на написание приложений под мобильные устройства. Процесс написания и того и того очень похожий.