Прокачиваем Яндекс.Браузер. 15 полезных расширений, которые должен установить каждый

image

В наше время активного развития и использования Интернета главной компьютерной программой стал браузер. Браузер – это окно в мир. С помощью этой программы мы узнаем новости, общаемся, делаем покупки и многое другое. И сегодня я хочу рассказать о расширениях для браузера Гугл Хром.

Почему именно этот браузер? Все просто – на настоящий момент это самый популярный обозреватель. Конечно, есть огромное количество сторонников других браузеров, например, Оперы или Мозиллы, но статистика пока на стороне Google Chrome.

Кстати, изучая этот вопрос, наткнулся на интересную анимацию, показывающую конкуренцию браузеров на рынке с 1996 по 2019 годы. Посмотрите, это интересно.

Что такое расширение для браузера?

Главная функция этой программы – просмотр web-страниц, но ее функциональность можно увеличить, используя расширения, или, как их еще называют, дополнения или плагины.

Расширение для браузера – это дополнительная программа, работающая совместно с обозревателем и добавляющая ему новые полезные функции.

Для браузера Google Chrome таких расширений сейчас разработано очень много. С некоторыми из них я и хочу вас познакомить. Надеюсь, они будут вам полезны.

Как устанавливать и удалять расширения для браузера Google Chrome

Делается это очень просто. Сначала открываем главное меню браузера. Для этого есть кнопочка справа вверху. В этом меню находим Дополнительные инструменты – Расширения. imageНажимаем и открывается новая вкладка со списком уже установленных расширений.

Теперь разворачиваем еще одно меню и слева внизу находим ссылку на Интернет-магазин Chrome. В этом магазине можно выбирать расширения и темы оформления. Нас интересуют расширения. Их можно искать по категориям, а можно по названию или ключевому слову.

Как только нужное расширение найдено, нажимаем Установить, подтверждаем установку, и через несколько секунд на верхней панели браузера появляется значок расширения, позволяющий его активировать.

На вкладке Расширения есть возможность включать и выключать их или совсем удалять.

А теперь перейдем непосредственно к рассмотрению самих расширений.

Расширения для браузера Google Chrome

FireShot – расширение браузера для создания скриншотов

О программах для этой цели я уже писал в статье «Как сделать скриншот на компьютере — лучшие программы». Это дополнение дает возможность сделать снимок всей страницы, видимой части или любой области. Расширение имеет две версии: платную и бесплатную. Платная имеет встроенный графический редактор, с помощью которого можно отредактировать полученный скриншот.Программа имеет множество настроек.

Главным ее недостатком я считаю невозможность получения снимков за пределами окна браузера.

Colorzilla – расширение для определения номера цвета

Это дополнение будет полезным для дизайнеров. Аналогичные функции имеет программа ColorMania, о которой я уже писал ранее, но она имеет преимущество в том, что определяет цвет любой точки экрана, а не только в окне браузера.

What Font – расширение Google Chrome для определения названия шрифта

Оно также пригодится тем, кто занимается дизайном. Если вам понравился шрифт на каком-либо сайте, и вы хотите использовать его в своей работе, нужно знать его название. Найти его можно, проанализировав код веб-страницы, но это дело трудоемкое, и не каждый сможет это сделать. Расширение What Font позволит это сделать легко и просто. Достаточно навести курсор мыши на нужное слово, и вы получите название шрифта, а щелчок на нем открывает дополнительную информацию.

MeasureIt! – экранная линейка

Еще одно расширение, имеющее функции, аналогичные возможностям программы mySize, о которой я тоже писал. Оно имеет преимущество в том, что сразу определяет не только размеры выделенной области, но и величины всех отступов от краев окна браузера. Недостаток – невозможность работы за пределами окна. Еще добавлю, что у меня это расширение работает нестабильно, не всегда включается.

Resolution Test – меняет разрешение окна браузера

С помощью этого расширения можно посмотреть, как выглядит сайт на экранах различных мониторов.

Google Dictionary – расширение-переводчик

Не нужно открывать онлайн-переводчик, он сам открывается в дополнительном небольшом окне. Достаточно выделить текст и щелкнуть на значке расширения.

OneTab – одна вкладка

Очень удобное расширение, которое, во-первых, наводит порядок на панели вкладок браузера, во-вторых, позволяет очень сильно разгрузить его память. Когда у вас открыто много вкладок, можно щелкнуть на иконке дополнения и все вкладки свернутся в один список. При желании можно восстановить сразу все вкладки или быстро открыть любую из них. В списке сохраняются и ранее открытые вкладки, то есть он чем-то напоминает историю браузера.

URL Shortener – укорачиватель ссылок

О сокращении ссылок я писал подробно в статье «Как сократить ссылку — сервисы и плагин». Данное расширение еще один из вариантов. Его преимущество – скорость работы. Скопировали адрес, кликнули на значке расширения, и короткая ссылка готова. Кроме ссылки создается QR-код.

Dualless – программка для разделения окна браузера

При нажатии на кнопку расширения, окно браузера делится на две части (два новых окна), причем можно выбрать разные варианты деления, как по размерам, так и по расположению. Если у вас большой монитор, то, возможно, это дополнение будет для вас удобным, я обычно пользуюсь компьютером с двумя мониторами, и оно у меня как-то не прижилось.

RoboForm Lite — сервис хранения паролей

Существует много сервисов и программ для хранения паролей. О некоторых я писал в статье «Где хранить пароли и логины?». Сам я пользуюсь программой KeePass.

Статистика сайтов от LiveInternet.ru и LiveInternet Статистика

Это два расширения для определения посещаемости сайта. О первом я подробно писал в статье «Как узнать количество посещений сайта: сервис Liveinternet и полезное расширение к браузеру». Его преимущество заключается в том, что одним щелчком можно определить посещаемость любого сайта (своего или чужого), если на нем установлен счетчик LiveInternet с открытым доступом.

Второе расширение просто открывает страницу сайта LiveInternet.ru и, если у вас есть доступ, можно посмотреть полную статистику, которую предоставляет этот сервис.

RDS bar

Расширение для анализа основных показателей сайта: ИКС, AR, Alexa Rank, входящие и исходящие ссылки и т. д.

Yandex Wordstat Assistant и Yandex Wordstat Helper

Два похожих расширения, которые встраиваются на страницу Yandex Wordstat и помогают собирать ключевые слова. Функций немного, но они сокращают время работы с сервисом.

CSSViewer – просмотр стилей веб-страницы

С помощью этого плагина можно быстро посмотреть CSS-стили для любого элемента страницы. Простой и удобный инструмент в помощь верстальщику.

SEO META in 1 CLICK – расширение браузера для SEO-анализа сайтов

Инструмент будет полезен для тех, кто занимается оптимизацией сайта.

Его возможности:

  • Проверка основной SEO-информации о сайте: мета-теги, ссылки, скрипты.
  • Показ заголовков в виде HTML (H1, H2, H3, H4, H5 и H6),
  • Количество изображений с и без ALT в 1 клик.
  • Просмотр количества и содержимого всех ссылок.
  • Анализ страницы такими инструментами, как Google Rich Snippet, Facebook Debugger, Magestic.
  • Проверка robots.txt и sitemap.xml и многое другое

Speed Dial [FVD – визуальные закладки

Аналогичных расширений разработано много, каждый выбирает для себя, я привык к этому, оно содержит много закладок.

Wappalyzer – информация о технологиях

Это расширение показывает, какие веб-технологии использовались при разработке сайта. Показывает CMS, установленные счетчики, язык программирования и т. д.

Extensity – расширение для управления расширениями

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

Надеюсь, информация в статье оказалась вам полезной.

А какие расширения для браузера Гугл Хром используете вы и для каких целей. Поделитесь в комментариях.

Google Chrome — лидер рейтинга «Лучшие браузеры 2020 года». По статистике, 49,3% пользователей пользуются Chrome. Благодаря высокой скорости работы браузера, интуитивно понятному интерфейсу и расширениям пользователи быстрее и эффективнее выполняют свои задачи.

Какие же самые лучшие расширения для Google Chrome 2021? Вкратце рассмотрим их.

VeePN VPN

Расширение считается одним из лучших бесплатных расширений Chrome VPN в 2021 году.

С помощью VeePN пользователь может быстро и безопасно искать информацию в интернете благодаря 2500+ серверам, расположенным в 50 локациях. По сравнению с другими бесплатными расширениями у VeePN нет ограничений по пропускной способности и трафику. Расширение уже установили более 80 тысяч пользователей.

Вы можете установить расширение в один щелчок мыши и пользоваться интернетом с повышенной безопасностью.

Google Keep

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

Adblock Plus

Один из самых популярных блокировщиков рекламы, который позволяет автоматически блокировать всплывающие окна с баннерами, назойливую флэш-рекламу, и скрывать любые нежелательные элементы сайта.

Keepass

Это расширение для хранения паролей, в котором пароли хранятся в зашифрованном виде, что гарантирует их сохранность. Ещё одна фишка Keepass — генератор паролей. Вам больше не придётся использовать кличку кошки или день рождения бабушки в качестве пароля.

Альтернативный вариант — читайте нашу статью о том, как придумать хороший пароль и где его хранить. После этого вы точно станете гуру паролей 🙂

Lightshot

HTTPS Everywhere

Владелец сайта установил SSL-сертификат на сайт, но не настроил автоматическое перенаправление на протокол HTTPS. Или сайт содержит зашифрованные страницы с ссылками на вредоносные сайты, которые не используют SSL-сертификат. Таким образом, ваши персональные данные (логины и пароли, детали банковских карт, паспортные данные), которые отправляет и получает сайт, передаются в виде открытого текста и могут быть легко перехвачены злоумышленниками. Расширение HTTPS Everywhere исправляет эту проблему и принудительно открывает сайты по протоколу HTTPS, если сайт его поддерживает.

Статья по теме:

Повод задуматься о покупке SSL: Chrome начнет помечать сайты на HTTP как небезопасные

Ringostat Smart Phone

Ringostat Smart Phone — расширение для совершения и приема звонков в браузере. Если нажать на номер телефона, указанный на любой площадке или в карточке сделки в CRM, вы автоматически позвоните по нему.

Из расширения можно одним кликом перейти в сделку или контакт клиента в CRM. Если покупатель уже есть в базе, при звонке будет показано его имя. 

Когда звонит клиент, сразу отображается полезная информация о нем: 

  • количество дней с момента первого и последнего посещения сайта;
  • число совершенных звонков;
  • количество просмотренных страниц и посещений;
  • устройство, операционная система и местонахождение клиента при последнем посещении сайта;
  • топ-5 страниц, которые чаще всего смотрел посетитель;
  • рекламный источник звонка.

Также Ringostat Smart Phone позволяет переключать вызовы между сотрудниками и отделами и ставить звонки на удержание:

Кроме этого, Ringostat Smart Phone показывает, кто из ранее звонивших клиентов сейчас на сайте. Им тоже можно перезвонить одним кликом. 

Click&Clean

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

Расширение Click&Clean чистит историю браузера, удаляет файлы cookie и кэша, очищает историю загрузок и защищает вашу конфиденциальную информацию. Главная фишка расширения — оно удаляет информацию без необходимости перезагружать браузер.

Смотрите наше видео, как очистить кэш: в браузере, на компьютере, DNS

Start.me

Бесплатное расширение для Google Chrome для изменения стартовой страницы. С ним вы можете изменять стартовую страницу Гугла под ваш вкус и запросы, добавлять ссылки на социальные сети, заметки, списки дел и почту. В расширении доступны календарь, виджет погоды, новостей и ещё порядка 60 полезных виджетов.

Checkbot

Это приложение, которое помогает проанализировать SEO-оптимизацию сайта и его скорость загрузки, проверить ошибки сайта, такие как нерабочие ссылки, небезопасная форма авторизации на сайте, некорректные перенаправления. Благодаря анализу от Checkbot вы поймете, в каком направлении двигаться, чтобы улучшить рейтинг сайта в поисковой выдаче.

Turn Off the Lights

Расширение затемняет всю страницу кроме видео. В один клик на кнопку «Лампа» вы создадите эффект кинотеатра, а повторное нажатие вернёт первоначальный вид страницы. С этим расширением вы защитите зрение и отрегулируете яркость экрана в зависимости от освещения.

Noisli

Расширение, которое помогает отвлечься от повседневной суеты шумного офиса, сосредоточиться на работе или расслабиться под звуки природы, шум дождя с грозой, звуки морского прибоя. Звуки можно комбинировать, например, включить звук дождя и поезда.

В приложении можно установить таймер, сохранить свои комбинации звуков и отрегулировать громкость. Единственный минус: чтобы воспользоваться расширением, необходимо зарегистрироваться или войти с помощью Facebook или Gmail-аккаунтов.

85 % пользователей не будут покупать через веб-сайт, если они не уверены, что их данные передаются безопасно. Защитите свой сайт с SSL-сертификатом и не теряйте клиентов!

Focus Mode

Если вы постоянно отвлекаетесь на милые видео про котиков на Youtube, а потом с ужасом понимаете, что прошло уже 2 часа, а вы ещё не приступили к своим делам, это приложение для вас. В приложении всего 2 кнопки «Активировать/Деактивировать» и «Настройки». В настройках вы можете выбрать уже предложенные сайты или добавить свой сайт. После этого вам остаётся только активировать плагин. Как только вы снова отвлечетесь от работы и перейдете на «запрещённый» сайт, вы увидите надпись «Вернись к работе».

Google Mail Checker

С приложением вы всегда будете на связи и не пропустите важные сообщения по работе, от ваших друзей и, конечно, всегда будете в курсе всех акций и полезностей от HOSTIQ.ua. Для этого достаточно подписаться на нашу полезную рассылку и установить расширение Google Mail Checker.

Mate Translate

Приложение для online-перевода. Вполне может возглавить полезные дополнения для google chrome для переводчиков. Mate Translate знает 103 языка и автоматически определяет язык, с которого переводится текст. Благодаря ненавязчиво всплывающему окну не нужно покидать текущую веб-страницу. Когда изучаешь иностранный язык или нужно что-то быстро перевести, он пригодится. Mate Translate сохраняет переводы, чтобы вы могли вернуться к ним в любое время. Главная фишка расширения — озвучка выделенного текста.

Статья по теме:

Обзор 19 лучших конструкторов сайтов

Live Start Page — живые обои

Расширение Live Start Page помогает разнообразить стартовую страницу браузера красивыми обоями, виджетами погоды и позволяет добавить жизненные цели. В бесплатном доступе 1000 различных анимированных и статических изображений. В расширении Live Start Page разработчики добавили опции, которые позволяют настроить прозрачность, расположение и видимость элементов под ваш вкус.

Все лучшие расширения для хрома вы можете найти в интернет-магазине Chrome. Расширения можно сортировать по категориям и оценке пользователей.

А какими крутыми расширениями Chrome пользуетесь вы? Делитесь с нами в комментариях.

Попробуйте хостинг с кучей плюшек: автоустановщиком 330 движков, конструктором сайтов и теплой поддержкой 24/7!

Mercury reader

Это расширение очень полезно для чтения объемных статей: оно отрезает всю рекламу и компонует страницу в удобный для чтения формат.

Чтобы перевести страницу в режим чтения – просто нажмите на значок расширения. Если у вас есть читалка Kindle, то можно сразу отправить статью на устройство. К сожалению, с более популярными у нас покетбуками расширение работать не хочет.

DuckDuckGo Privacy Essentials

Набирающий популярность альтернативный поисковик DuckDuckGo старается быть максимально безопасным. А его расширение защищает личные данные, блокирует различные метрики, принудительно устанавливает безопасное соединение, а также показывает рейтинг безопасности сайтов, на которых вы находитесь.

В случае с Пикабу, расширение подняло рейтинг безопасности с двойки до четырех с плюсом. У нас есть защищенное соединение, а так же заблокировано 5 различных метрик.

Midnight lizard

Это расширение позволяет создавать и управлять цветовыми темами. В нем уже есть несколько предустановленых тем, а также необходимые инструменты для создания полностью персонализированной цветовой схемы. Все изменения сразу отображаются в меню расширения, на большом превью.

В настройках можно отдельно выбрать цвет для каждого элемента страницы: фон, кнопки, текст, ссылки. Кроме того, можно настроить яркость и контрастность изображений на странице.

Full Page Screen Capture

В Mozilla Firefox есть предустановленная функция скриншота всей страницы, в Хроме такого решения пока нет. Зато есть расширение Full Page Screen Capture, которое исправляет этот недостаток.

Достаточно нажать на пиктограмму, и черный пакман начнет есть точки, автоматически прокручивая страницу. По завершении, можно сохранить в pdf или png.

uBlock Origin

Это один из лучших блокировщиков рекламы. И вот почему: у него открытый исходный код, он не потребляет много ресурсов, отлично блокирует рекламу, метрики и вредоносные сайты. В отличие от Adblock Plus, uBlock не поддерживает манифест о допустимой рекламе.

The great suspender

Про любовь хрома к поглощению оперативной памяти не шутил только ленивый. The Great Suspender решил разрушить этот стереотип. Расширение приостанавливает работу вкладок, которые вы не используете. Чтобы в пару кликов остановить все лишние вкладки – нажмите на пиктограмму расширения – приостановить все другие вкладки. Чтобы разбудить спящую страницу – просто нажмите на картинку в нужной вкладке.

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

Extensity

Чем больше расширений установлено, тем медленнее работает браузер. Extensity позволяет управлять всеми установленными расширениями в пару кликов. При нажатии на значок, вы увидите все, что у вас уже установлено. Одной кнопкой вы можете отключить все установленные расширения, либо отключить временные, оставив только те, что нужно постоянно.

Расширения и плагины — полезные дополнения к уже существующим функциям на сайте и в браузере. С их помощью можно записывать аудио и видео с экрана, включать поиск ошибок, а также многое другое.

В этой статье мы рассмотрим создание самого простого расширения — запускатора избранных сайтов. Хотя приложение и будет примитивным, оно всё-таки раскроет процесс создания и загрузки расширения для google Chrome.

Желательно знать HTML, CSS и JS (если придётся расширить набор функций) на самом базовом уровне, чтобы понимать материал лучше, но в любом случае мы будем объяснять код.

Митап «Эволюция фронтенд-разработчика»

10 июля в 12:00, Санкт-Петербург, Беcплатно

tproger.ru События и курсы на tproger.ru

В каждом расширении для Chrome должен быть файл manifest.json. Он служит только для описания функций приложения, общего описания, номера версии и разрешений. Более подробно вы сможете ознакомиться с этим файлом в блоге команды разработчиков Chrome.

Давайте же внесём свой вклад в развитие web

Здесь всё очень просто:

{  "manifest_version": 2,  "name": "Tproger Launcher",  "description": "Запускатор представительств Tproger",  "version": "1.0.0",  "icons": {"128": "icon_128.png"},  "browser_action": {  "default_icon": "icon.png",  "default_popup": "popup.html"  },  "permissions": ["activeTab"]  }

После того как мы описали наше расширение в файле manifest.json, можно благополучно переходить к следующему этапу, а именно к разметке.

Для начала давайте напишем базовый HTML-код:

<!DOCTYPE html>              

Выше мы написали каркас для плагина, сейчас он полностью пуст и нужно указать название, ссылки на иконки и шрифт. Это можно сделать с помощью тега link, обратите внимание, он не закрывается:

<!DOCTYPE html>         />     Tproger Media Quick Launcher           <link        <link    

Не забывайте указывать кодировку, иначе не отобразятся кириллические буквы.

Перейдём ко второму блоку кода, а именно к тегу body и его содержимому.

Так как наше расширение — модальное окно, давайте соответствующим образом назовём контейнеры. Сначала добавим контейнер шапки расширения, в которой укажем ссылку к иконке, напишем название и добавим номер версии.

                          

Запускатор Tproger (1.0.0)

Переходим к следующему контейнеру. Он содержит описание функций расширений.

           Быстрый доступ к контентным площадкам Типичного Программиста         

Далее следует контейнер modal-icons, внутри которого ещё 5 контейнеров.

      

Для каждой иконки мы выделили отдельный контейнер с классом flex, чтобы знать, к каким элементам будем применять Flexbox.

Кроме того, мы указали названия иконок для каждого ресурса. Более детально со всеми доступными элементами можно ознакомиться на сайте Bootstrap.

Стили

Чтобы расширение выглядело красивее и было удобнее, чем сейчас, нужно добавить стили на CSS.

      /* Модальная структура документа */      /*общие настройки для всего документа*/      html,      body {        font-family: 'Open Sans', sans-serif;        font-size: 14px;        margin: 0;        min-height: 180px;        padding: 0;        width: 380px;      }      /*задаём настройки для заголовков первого уровня*/      h1 {        font-family: 'Menlo', monospace;        font-size: 22px;        font-weight: 400;        margin: 0;        color: #2f5876;      }      a:link,      a:visited {        color: #000000;        outline: 0;        text-decoration: none;      }      /*задаём ширину картинки*/      img {        width: 30px; /*ширина изображений*/      }      .modal-header {        align-items: center; /*выравнивание элементов по центру*/        border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/        height: 50px;      }      .modal-content {        padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/      }      .modal-icons {        border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/        height: 50px;        width: 100%;      }      .logo {        padding: 16px; /*отступы со всех сторон*/      }      .logo-icon {        vertical-align: text-bottom; /*выравнивание по нижней части текста*/        margin-right: 12px; /*задётся отступ элементов от изображения*/      }      .version {        color: #444;        font-size: 18px;      }

Основные настройки документа заданы, давайте перейдём к следующему фрагменту кода, в котором как раз и будет применён Flexbox, о котором шла речь в начале статьи.

.flex-container {        display: flex; /*отображает контейнер в виде блочного элемента*/        justify-content: space-between; /*равномерное выравнивание элементов*/        padding: 10px 22px;      }      /*задаём настройки для контейнеров с иконками*/      .flex {        opacity: 1; /*параметр непрозрачности иконок*/        width: 120px;      }      .flex:hover {        opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/      }      .flex .fa {        font-size: 40px;        color: #2f5876;      }         

Мы постарались как можно подробнее объяснить в комментариях относительно сложные моменты. А сейчас нам нужно лишь загрузить наше расширение в браузер Chrome и оно будет работать, а если пройдёт модерацию, то появится в магазине расширений (плагинов).

Теперь давайте добавим файл с расширением .js, если вдруг потребуется расширить функции дополнения для браузера.

     />      Tproger Media Quick Launcher        />        /*здесь мы прописали стили*/                      

Проверка кода и публикация

Прежде чем опубликовать, проверьте ещё раз весь код. Если вы делали всё так, как мы, то у должно было получиться следующее:

<!DOCTYPE html>           />    Запускатор Tproger                             /* Модальная структура документа */      /*общие настройки для всего документа*/      html,      body {        font-family: 'Open Sans', sans-serif;        font-size: 14px;        margin: 0;        min-height: 180px;        padding: 0;        width: 380px;      }      /*задаём настройки для заголовков первого уровня*/      h1 {        font-family: 'Menlo', monospace;        font-size: 22px;        font-weight: 400;        margin: 0;        color: #2f5876;      }      a:link,      a:visited {        color: #000000;        outline: 0;        text-decoration: none;      }      /*задаём ширину картинки*/      img {        width: 30px; /*ширина изображений*/      }      .modal-header {        align-items: center; /*выравнивание элементов по центру*/        border-bottom: 0.5px solid #dadada; /*свойства нижней разделительной линии*/        height: 50px;      }      .modal-content {        padding: 0 22px; /*отступы сверху и снизу, сверху и слева*/      }      .modal-icons {        border-top: 0.5px solid #dadada; /*свойства верхней разделительной линии*/        height: 50px;        width: 100%;      }      .logo {        padding: 16px; /*отступы со всех сторон*/      }      .logo-icon {        vertical-align: text-bottom; /*выравнивание по нижней части текста*/        margin-right: 12px; /*задётся отступ элементов от изображения*/      }      .version {        color: #444;        font-size: 18px;      }      .flex-container {        display: flex; /*отображает контейнер в виде блочного элемента*/        justify-content: space-between; /*равномерное выравнивание элементов*/        padding: 10px 22px;      }      /*задаём настройки для контейнеров с иконками*/      .flex {        opacity: 1; /*параметр непрозрачности иконок*/        width: 120px;      }      .flex:hover {        opacity: 0.4; /*уровень непрозрачности при наведении курсора на элемент*/      }      .flex .fa {        font-size: 40px;        color: #2f5876;      }                                           

Запускатор Tproger (1.0.0)

Быстрый доступ к контентным площадкам Типичного Программиста

После проверки можно приступать к публикации расширения. Для этого у вас должны быть следующие файлы и папки:

И далее следуем инструкциям на скриншотах ниже.

Для загрузки расширения в магазин нам нужно зайти в меню, навести мышку на «дополнительные настройки», а затем выбрать «расширения» или ввести в адресной строке chrome://extensions/.

Далее нажимаем на «загрузить распакованное расширение» и выбираем папку с файлами.

После того, как вы выбрали папку с файлами, она загрузится в браузер и превратится в расширение, которое будет доступно за пределами правой части адресной строки.

Надеемся, что всё работает правильно и вы понимаете структуру расширений для Chrome.

Основано на видео с канала «Traversy Media»

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Относительно новый браузер от Гугла стремительно завоевывает сердца пользователей по всему миру. Я тоже не оказался исключением из правил и уже около года работаю с блогом исключительно в нем.

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

Раньше я использовал Мазилу Фаерфокс в основном из-за наличия сотен тысяч всевозможных плагинов и дополнений, с помощью которых можно было расширить его функционал практически до бесконечности (последнее время и в Опере появились расширения).

Но надежность и скорость работы Мазилы сильно падали с установкой каждого нового плагина, чего нельзя сказать про Google Chrome, который умеет создавать для каждого активного дополнения отдельный процесс на вашем компе (это сильно повышает скорость работы и общую устойчивость браузера). Ну, а сегодня я хочу поговорить про те из них, которые могут быть полезны не только вебмастеру, но и рядовому пользователю глобальной сети Интернет.

Расширения Гугл Хрома общего предназначения

  1. Chromium Wheel Smooth Scroller — по умолчанию прокручивание веб страниц в Хроме с помощью колеса мыши или стрелок на клавиатуре происходит дискретно, т.е. мелкими скачками. Данное дополнение позволяет нивелировать этот недостаток — теперь можно очень плавно прокручивать страницы, а при ускорении колеса или удержании стрелочки на клавиатуре прокрутка будет увеличивать скорость.

    Все это действо можно очень тонко настроить под себя, просто щелкнув по иконке Chromium Wheel Smooth Scroller правой кнопкой и выбрав пункт «Настройки» (щелчок левой кнопкой по значку включает/выключает плавную прокрутку в Chrome).

  2. LastPass — популярный менеджер паролей. Они в нем хранятся онлайн и доступ к ним вы сможете получить с любого компьютера на земном шаре, просто введя мастер-пароль (вы создаете аккаунт на этом сервисе). Это хорошо, ибо не обязывает вас таскать флешку с паролями или осуществлять их бекап на компьютере. Однако накладывает определенные требования на используемый вами мастер-пароль (он должен быть максимально сложным), ибо в случае взлома вы потеряете все и сразу.

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

    Можно экспортировать и импортировать базу с пассвордами, что позволит использовать ее в разных браузерах. Лично мне, при всех плюсах данного сервиса, по-прежнему стремно его использовать для хранения серьезных (денежных) паролей, поэтому пользуюсь проверенным временем менеджером KeePass.

  3. 1 Click Translator — после установки этого плагина в свой браузер, у вас появится возможность получать мгновенный перевод выделенной вами в тексте вебстраницы фразы (кстати, в Яндекс браузере такая возможность интегрирована по умолчанию). Похоже, что используется база переводчика от Google, но главным его плюсом является именно простота — выделил фрагмент текста и тут же увидел всплывающую подсказку:

    Для получения доступа к настройкам этого дополнения вам нужно щелкнуть по иконке гаечного ключа (вверху справа) и выбрать «Инструменты» — «Расширения». Я, например, поставил галочку для получения перевода лишь при удержании контрола на клавиатуре, ибо желание этого расширения переводить все, что выделяется, сильно достает.

  4. Last.fm free music player — вы уже зарегистрированы на сервисе Last.fm? Если нет, то регистрируйтесь, ищите нужные вам альбомы, и при установленном в Chrome расширении начинайте проигрывать одну из композиций (синий кружочек слева от названия). Данный плагин не только подхватит воспроизведение, но и добавит в свой плей-лист все имеющиеся на открытой странице Last.fm композиции:

    Все, страницу сервиса Last.fm можно будет закрывать и наслаждаться прослушиванием альбома или своей собственной подборки. Можно будет регулировать громкость и настраивать воспроизведение. Удобная штучка.

  5. Визуальные закладки — очень похоже на экспресс панель в Опере, к которой я привык. Про это расширение я подробно писал в статье закладки от Яндекса:

Дополнения к Google Chrome для пытливых умов

  1. Checker Plus для Gmail — данное дополнение к вашему браузеру позволит читать новые письма пришедшие на ваш почтовый ящик в Gmail очень оперативно, не обращаясь к вебинтерфейсу этого сервиса. По приходу нового письма вы увидите всплывающие окно в правой нижней области экрана:

    Там вы сможете, при желании, выполнить над новой корреспонденцией какие-либо действия, а для более подробного ознакомления нужно будет щелкнуть по иконке этого расширения в правой верхней области экрана:

    Показанная на скриншоте иконка шестеренки откроет вам все многообразие настроек этого плагина. Радует, что все это безобразие полностью и корректно переведено на русский язык. Функционал Checker Plus для Хрома заслуживает всяческих похвал.

  2. Image Size Info — в Опере можно посмотреть размер и другие свойства любого изображения на вебстранице, просто выбрав из его контекстного меню пункт «Свойства изображения» (данных не так много, как в FastStone Image Viewer, но все же). В Хроме мне такого функционала не хватало, поэтому и прижилось дополнение, позволяющее сделать тоже самое, только из контекстного меню изображения нужно будет выбрать пункт «View image info»:
  3. Faviconize Google — я много лет пользовался только поиском Яндекса и при переходе к Гуглу испытываю некий дискомфорт. Знаете почему? Там нет отображения иконок Favicon, которые позволяют узнавать сайты в выдаче и обращаться за информацией к тем, которым доверяете. Мнение это, конечно же, субъективное, однако под это дело я использую данный плагин, который добавляет отображение фавиконов слева от заголовка сайтов в выдаче (аля, Яндекс): Правда данное расширение почему-то не для всех ресурсов находит фавиконы, но это все равно лучше, чем ничего.
  4. Wappalyzer — мощный плагин, который позволяет распознавать движки (CMS) сайтов, которые вы открываете в Гугл Хроме, а также наличие на данных ресурсах, например, скриптов счетчиков Аналитикса или Метрики от Яндекса, ну и еще великого множества других приложений и технологий. Впечатляет, не правда ли? Для моего блога, например, данное дополнение выдало такой вердикт:

    Все полностью соответствует действительности. Иногда бывает любопытно узнать движок (например, когда я писал статью про сайты на Joomla или искал интернет-магазины на базе VirtueMart) или какие-либо еще нюансы для того или иного ресурса, а с помощью этого расширения данная задача сводится к простому щелчку мышью. Полнейший Цимус (вкусняшка).

Плагины Хрома в помощь вебмастерам и сеошникам

  1. RDS-бар — очень популярное расширение, которое может работать практически во всех браузерах. Используя его, можно существенно облегчить СЕО продвижение своего или клиентского проекта (более подробно читайте в статье РДС бар и Page Promoter). В версии для Фаерфокс RDS-бар, на мой взгляд, гораздо более юзабилен (над открытой в браузере страницей выводятся все нужные вам показатели).

    В версии же для Google Chrome на панели плагинов вы увидите только иконку, отображающую значение Тиц для открытой в данный момент страницы, что уже не мало, хотя и не достаточно. Однако, щелкнув по этой иконке мышью, вы увидите выпадающее окно с уже гораздо большим количеством параметров так или иначе имеющих отношение к SEO продвижению:

    Мне RDS-бар помогает при анализе сайтов доноров, когда я занимаюсь внешней оптимизацией посредством бирж Гогетлинкс или же Миралинкс. Хотя, конечно же, применений для этого расширения можно найти море. Если щелкните по его иконке правой кнопкой мыши, то сможете попасть в настройки. Там можно будет задать подсветку гиперссылок, которые закрыты последством noindex или nofollow.

  2. Web Developer — популярный плагин среди разработчиков, верстальщиков и просто вебмастеров. Позволяет понять верстку сайта, выявить ошибки или позаимствовать идеи. В Хроме для появлении его панели достаточно щелкнуть по иконке (черная шестеренка):

    Подробнее о работе с этим плагином читайте с статье Web Developer (там описано аналогичное расширения для Фаерфокс, но принципы работы с ним остаются прежними).

  3. ColorZilla — очень удобное дополнение для дизайнеров и вебмастеров, которое позволяет захватывать цвета с открытых в Гугл браузере вебстраниц и использовать их при верстке сайта. Щелкнув по появившейся в правом верхнем углу иконке пипетки, вы сможете быстро определить цвет на экране с помощью первого пункта открывшего контекстного меню:

    Курсор мыши превратится в перекрестие, а в открывшейся у верхней кнопки Google Chrome панели ColorZilla вы сможете видеть цвета вебстраницы, над которыми пролетает это самое перекрестие. Щелкнув мышью над нужным цветом, вы автоматически загрузите его шестнадцатеричный код (например, #E12B2D) в буфер обмена (читайте подробнее про хеш коды в статье про здание цветов в Html и CSS).

    Кроме этого, у программы ColorZilla имеются довольно богатые возможности и даже свои собственные настройки, но об этом вы уже узнаете с помощью своего пытливого ума. Скажу лишь, что с помощью этого плагина для Гугл Хром вы сможете просмотреть всю палитру цветов используемую на вебстранице, получить код градиентных цветов для вставки на свой сайт с помощью собственного генератора, просматривать историю захватов и использовать разные палитры для подбора нужного оттенка.

  4. Alexa Traffic Rank — всем известный тулбар Алексы, который реализован в виде расширения для Chrome. Зачем он нужен? Во-первых, при анализе будущих сайтов доноров или ресурсов ваших конкурентов, не всегда удастся получить информацию о посещаемости данного проекта. Вот именно для такого случая пригодится Alexa, который позволит вам косвенно оценить популярность ресурса и количество ссылающихся на него доменов (читайте об этом подробнее в статье про показатель Alexa Rank):

    А, во-вторых, в силу крайне малого распространения тулбара Алексы в рунете, установив этот плагин в тот браузер, где работаете с сайтом, вы сможете слегка подкорректировать этот самый показатель в лучшую для себя сторону. Более подробное описание сего действа вы найдете в приведенной чуть выше статье.

  5. SEO Quake — популярное дополнение для многих браузеров, которое позволяет выводить вверху всех открываемых в Хроме вебстраниц панель с различными показателями продвижения. Очень удобен при просмотре потенциальных сайтов доноров. Аналогичную панель данный плагин умеет выводить и в поисковой выдаче:

    Настроек у плагина SEO Quake очень много, так что разбираться придется долго, но оно того стоит.

Хромом я тоже активно пользуюсь на своем планшете, но он, к сожалению, не поддерживает дополнений, а очень этого хотелось бы. Надеюсь, что разработчики со временем исправят это досадное недоразумение.

Темы для Google Chrome

Возможность смены тем в Гугл Хроме интегрирована по умолчанию, впрочем, как и во всех других популярных браузерах. Для смены или восстановления «темы по умолчанию» вам понадобится зайти в настройки, щелкнув по иконке гаечного ключа в правом верхнем углу, а затем выбрав пункт «Настройки». На открывшейся странице опять же выберите одноименную вкладку, а уже там ищите раздел «Внешний вид»:

Переходите по кнопке “Выбрать тему” и попробуйте обозреть все многообразие имеющейся там красоты. Устанавливаются темы точно так же, как и расширения:

Если скачанная тема вам пришлась не по вкусу, то смело можете продолжать поиск, ну а при полном разочаровании в ней никто не мешает вам вернуться к теме, используемой в Google Chrome по умолчанию (соответствующая кнопка на предыдущем скриншоте).

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
А как считаете Вы?
Напишите в комментариях, что вы думаете – согласны
ли со статьей или есть что добавить?
Добавить комментарий