17 полезных Chrome-расширений для дизайнеров и веб-разработчиков

17 полезных Chrome-расширений для дизайнеров и веб-разработчиков

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

Muzli

Все самое интересное для дизайнеров: новости, статьи, полезные ссылки.

Responsive Web Design Tester

Это быстрый и простой способ протестировать ваш веб-сайт на отзывчивость. Помимо Chrome, поддерживается также Opera и Mozilla Firefox.

Window Resizer

Этот инструмент позволяет менять размер окна браузера, чтобы тестировать макеты в разном разрешении.

Page Ruler

Линейка, которая позволит измерить пиксельные размеры и позицию любого элемента на любой веб-странице.

Dimensions

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

ColorZilla

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

WhatFont

Самый простой способ определить шрифты, которые используются на веб-странице.

TypeWonder

Позволяет тестировать веб-шрифты на любом веб-сайте в реальном времени.

CSS — Shack

Это десктопное веб-приложение, которое позволяет создавать слои стилей (как в любом графическом редакторе) и экспортировать их в CSS-файл.

Поддерживает все популярные браузеры. Инструмент платный, но бесплатный пробный период никто не отменял.

PerfectPixel by WellDoneCode

Это расширение позволяет разработчикам накладывать изображения полупрозрачным слоем поверх HTML и делать попиксельное сравнение.

Lightshot

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

UX Check

Запускает эвристическую оценку вашего сайта (юзабилити).

Code Cola

Позволяет редактировать наглядно CSS-стили онлайн-страниц.

Corporate Ipsum

Генерирует рандомные корпоративные тексты для тестового наполнения сайта.

Pendule

Набор инструментов веб-девелопера для Chrome.

Fontface Ninja

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

Prospero For Gmail

Инструмент позволяет в один клик добавить шаблон фриланс-предложения в ваше письмо на Gmail. Останется лишь заполнить пробелы.

Расширение Хром: знакомимся ближе.

Расширение Хром: где находится, что устанавливает и о чём следует помнить?

Вы не задумывались о том, чем же конкретно занимается устанавливаемое лично вами расширение для браузера Google Chrome? С поставляемыми во время установки самого браузера вроде бы всё ясно… Нужные и не очень сервисы Google будут отнимать ресурсы компьютера фоном всякий раз, пока запущен сам браузер. А какие файлы устанавливает расширение Хром, и как можно увидеть код этого расширения при помощи сервиса Google? Давайте познакомимся с ними поближе.

Для чего расширения нужны?

Установленные расширения отображаются в шапке браузера соответствующими иконками (встроенных в браузер это не касается):

Основное их назначение — расширение функций браузера. Блокировка рекламы, оптимизация используемой памяти (да, есть и такие), управление паролями, копирование контента страницы, безопасность, вскрытие информации о сайте и т.д. и т.п. Однако следует помнить, что подавляющее большинство расширений имеет корыстную подоплёку, благодаря которой производитель может подсовывать или считывать нужную информацию (в том числе управлять рекламой и надоедливыми оповещениями, следить за посещениями браузера). При этом работая фоном и незаметно для вас, даже изменяя внешний облик страницы. Среди наиболее неприятных свойств вредоносных приложений нужно отметить вероятность засасывания вашего компьютера через браузер в ботнет для DDOS атак и сбор конфиденциальной информации. А это куда серьёзнее, чем та роль маленькой гирьки, которая тащит скорость вашего браузера вниз, которую расширению часто приписывают в надежде ускорить работу Google Chrome. Дочитайте до конца, и вы поймёте почему это сделать в принципе почти невозможно.

Куда расширение Хром устанавливается?

Все расширения по умолчанию устанавливаются по пути:

C:ПользователиИмя_ПользователяAppDataLocalGoogleChromeUser DataDefaultExtensions

Напомню, что папка AppData скрыта по умолчанию, что можно поправить в Свойствах папки в Настройках системы. И, открыв указанный путь, вы увидите несколько папок с произвольным набором символов в имени. Этот набор из 32-х символов (название папки) — ни что иное, как идентификатор расширения.

Как обнаружить расширение среди прочих?

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

Как уже говорилось, самым действенным вариантом поиска (в проводнике Windows) расширения является его ID. Идентификатор обнаруживается на странице с расширением:

Если расширений немного, можно, прогуливаясь по папкам, выцепить используемые расширением значки, ярлыки, иконки и т.д. Наиболее распространённым содержимым каждого также являются html-документы, Java-скрипты, шрифты и т.п. Всё это располагается в подпапке с номером версии расширения. Практически все файлы открываются с помощью текстовых редакторов, например, Блокнота. Однако для корректного просмотра рекомендуется использовать специальные текстовые процессоры типа Notepad++ или AkelPad. Для более тщательного знакомства с расширением Google придумало… ещё одно расширение, которое позволяет просматривать код чужого прямо из браузера. Оно называется Chrome extension source viewer и после установки будет встроено в контекстное меню Google Chrome, доступное по клику правой кнопкой мыши:

Любое расширение Хром всегда доступно для скачивания в архиве из магазина Chrome, если, конечно, оно оттуда уже не удалено. CRX поможет скачать расширение и посмотреть на его код (перед установкой на странице магазина):

Архитектура расширений Chrome или немного теории не помешает…

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

Так вот, к расширениям, созданным для него, Chrome (с самого начала заточенный именно на безопасный серфинг и никак не ресурсосберегающий) относится изначально как к неопасному, но «бажному» (от баг — ошибка). Chrome «разрешает» создавать плагины только если они соответствуют принципам:

• минимум привилегий
• разделение привилегий
• абсолютная изоляция

Если вы хоть немного обеспокоены безопасными методами сетевого сёрфинга, то наверняка знаете, что наиболее опасным «местом на странице» любого сайта является участок с Java-скриптом. Chrome об этом также в курсе, и потому принцип «один процесс следит за одним элементом» позволяет контролировать поведение бесчисленных скриптов. А это прежде всего защита ваших системных файлов.

Расширение Хром чаще всего включает в себя исполнительные скрипты и ядро расширения. Скрипт содержания — это JavaScript, и он может быть инжектирован во время загрузки странички. Он запускается в визуализированном пространстве, которое обеспечивает доступ к древовидной модели DOM стандартного интерфейса управления HTML-объектами. Однако скрипт загружаемого контента благодаря такой архитектуре не способен получить доступ к данным вне этого пространства. В итоге мы имеем картину, когда страница, загруженная в Google Chrome, представляет собой несколько изолированных визуализированных процессов, которые обобщаются на экране… правильно — движком вашего прожорливого браузера. Так же работает и принцип —safe-plugins для запуска Chrome-плагинов (плагины и расширения — вещи разные, не путаем).

Безопасность расширений

Браузер отводит ограниченный набор разрешений каждому из расширений, включая исполнение кода, доступ к сайтам и таким модулям браузера, как вкладки, закладки пользователя, история просмотров, кукисы и местоположение. И каждое из расширений должно задокументировать свои «претензии» на права в обязательном файле manifest.json. И за содержанием Google старается следить, предлагая скачивать расширения только из «родной» галереи. Скрипт может получать доступ к напрямую к содержимому контента, однако по умолчанию ни одно из расширений не имеет доступа ни к одному из модулей Chrome. Кроме, конечно, обращений к ядру расширения через postMessage. Да, у ядра привилегий больше, чем у других функций расширения, но и оно изолировано от страницы в сети. И с целью дальнейшего контроля над потенциально опасным или бажным расширением, Chrome ввёл процедуру зон изоляции. Их три, и в общих чертах смысл каждого таков:

• Зона 1: каждое расширение имеет право на внедрение или изменение объектов в соответствии с присвоенным на этапе создания специальным ключом (перекрёстное разрешение декларируется уже в manifest.json).
• Зона 2: мультипроцессинг Хрома запускает несколько процессов на каждый из обрабатываемый на странице объект; один процесс контролирует один рекламный баннер, другой — игру флеш-плеера, а для безопасности (если что-то на странице «упадёт» или попытается изменить без вашего метода) третий процесс на уровне ядра самого Chrome погружает эти процессы в облако, контролируя работу каждого.
• Зона 3: скрипты содержимого страницы (вкладки) запускаются отдельным JavaScript-движком. И скрипты различного происхождения запускаются также отдельно.

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

10 полезных расширений Google Chrome для разработчиков и дизайнеров

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

ColorZilla

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

Можно сразу скопировать нужный цвет

WhatFont

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

Удобное окно с характеристиками шрифта

CSSViewer

CSSViewer — отличное расширение для исследования CSS-свойств элементов. Включите его, наведите курсор на нужный объект и посмотрите подробное описание стилей.

Подробное описание элемента

Code Cola

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

Изменения сохраняются, для перезагрузки страницы требуется подтверждение

Windows Resizer

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

Пресеты для тестирования адаптивности

PerfectPixel

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

Можно наложить любое изображение

PageLiner

В паре с PerfectPixel отлично работает расширение PageLiner. С его помощью вы добавите в окно браузера горизонтальные и вертикальные линии — прямо как в графическом редакторе.

Удобно равнять элементы интерфейса по линиям

Siteimprove Accessibility Checker

Siteimprove Accessibility Checker помогает убедиться в том, что HTML соответствует стандартам доступности — то есть вашей странице могут пользоваться люди с разными возможностями и ограничениями.

Подробнее о доступности и способах её проверки можно узнать из этой статьи.

Быстрая проверка доступности страницы

Wappalyzer

Увидели классный сайт и захотели повторить отдельные фишки в своём проекте? Узнайте с помощью Wappalyzer, какие технологии, фреймворки и библиотеки для этого нужны.

Вся информация представлена в виде удобной таблицы

Web Developer

Мощное расширение, с помощью которого можно отключать CSS и JavaScript, удалять изображения, проверять валидность HTML и CSS, изменять стили, тестировать формы, смотреть мета-теги, изменять размер окна браузера. В принципе, Web Developer способен заменить практически все указанные выше расширения вместе взятые. Вопрос только в удобстве.

Все необходимые инструменты на одной панели

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

Как пользоваться на Android расширениями для десктопного Google Chrome

У Google Chrome есть свой магазин расширений – мини-программ, которые можно добавить в десктопный вариант браузера. В мобильной же версии поддержка этих дополнений не предусмотрена. Узнайте, как можно перенести некоторые функции компьютерного функционала на телефон.

Почему иногда не хватает расширений из Chrome для компьютера

Дополнения разрабатываются обычно с расчетом, что ими будут пользоваться на компьютерах. Мобильные версии браузеров могут не потянуть слишком сложные скрипты, поэтому многие из них и не работают в телефонах. Это касается дополнений для всех обозревателей, в том числе для «Яндекс.Браузера». Однако даже в мобильной версии последнего предлагаются хоть какие-то мини-программы. В «Google Chrome» же дополнений нет никаких.

Чтобы получить доступ к расширениям «Хрома» на телефоне, нужно установить другой браузер – Kiwi. Он подходит для версий «Андроид» 4.1 и выше. Нужен вариант обозревателя Upsilon. Именно в нем уже есть поддержка расширений из десктопного варианта Chrome. Работает способ за счет того, что Kiwi построен на том же движке Chromium.

Минус метода – придется вручную переносить все закладки из «Google Chrome», так как «Киви» не поддерживает синхронизацию через «Гугл»-аккаунт. Работать в итоге будут большинство скриптов, но не все.

Установка специального браузера на Android

Самая безопасная установка – через «Плей Маркет». Какие шаги нужно выполнить:

1. Найти вручную программу Kiwi Browser через поисковую строку вверху в «Плей Маркете».
2. Нажать на «Установить», а затем на «Принять» в диалоговом окне.
3. Подождать, пока магазин скачает, а затем сразу установит софт.
4. Тапнуть по «Открыть», чтобы запустить браузер, либо открыть программу через иконку в меню приложений.

Добавление расширений

Теперь о том, как установить мини-программу в новый браузер через магазин «Google Chrome»:

1. В запущенном обозревателе щелкнуть по трем точкам вверху справа. В меню выделить пункт «Полная версия», чтобы сайты открывались не в упрощенном мобильном варианте.
2. Перейти в каталог программ «Google Chrome».
3. С помощью строки поиска слева вверху отыскать нужное дополнение, например, блокировщик рекламы uBlock.
4. Нажать на синюю кнопку «Установить» справа. Подтвердить добавление программы в диалоговом окне.
5. Подождать, пока браузер скачает и установит скрипт. Загруженный файл открывать не нужно при этом.
6. Чтобы раскрыть меню самой мини-программы, нужно снова вызвать меню браузера, прокрутить список разделов до конца – там должно быть расширение.
7. Тапнуть по трем точкам и убрать отметку с «Полной версии», когда все необходимые скрипты будут загружены.

Управление расширениями

Дополнения можно отключать на время либо вовсе удалять, если они не нужны:

1. Тапнуть по трем точкам вверху, чтобы открыть меню. Кликнуть по Extensions. Запустится страница с добавленными программами.
2. Найти расширение, которое сейчас не нужно. Для выключения щелкнуть по синему тумблеру – он станет сразу серым. Это будет означать, что дополнение уже неактивно.
3. Если нужно вовсе избавиться от скрипта, нажать на «Удалить» и подтвердить действие.

Большую часть скриптов из магазина «Google Chrome» можно установить в Kiwi Browser. В отличие от оригинального обозревателя, этот сумел предоставить поддержку мини-программ. Инсталляция проходит таким же образом, как и на компьютере через сам «Хром»: открыть сайт магазина, найти дополнение и нажать на «Установить» – дальше браузер сделает все сам и сразу включит дополнение.

11 самых полезных расширений Google Chrome для организатора мероприятий

Судя по статистике, каждый второй пользователь в России используют браузер Google Chrome. Если это не так и вы пользуетесь Mozilla, Safari или IE, то уверен, что этот материал подтолкнет вас стать адептом хрома. Вы узнаете сколько преимуществ все это время было у вас под носом, и какое огромное количество возможностей открывает нам использование расширений. Браузер давно перестал быть программой для простого серфинга интернета, но превратился в универсальный инструмент, с помощью которого можно выполнить десятки и сотни различных задач. Сегодня я хочу вас познакомить с теми расширениями, которые я сам использую и которые могут помочь вам в нелегкой работе организатора мероприятий.

1. OneTab

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

2. Google Mail Checker

Event-менеджер всегда должен быть на связи, оперативно отвечать на письма и направлять подрядчиков. Если в Microsoft Outlook или Apple Mail существуют звуковые оповещения и баннеры, то плагин Google Mail Checker отлично выполнит эту роль для почты Gmail. Простой плагин отображает количество непрочитанных сообщений в вашем почтовом ящике, а простое нажатие на кнопку открывает почту. Кстати, этот плагин будет дополнительным стимулом для достижения заветного «Inbox Zero».

3. Signals by HubSpot

Signals by HubSpot — невероятно удобный лайфхак, позволяющий отслеживать ваши письма. После установки у вас появляется специальное расширение при отправке письма в Gmail (кнопка Send станет оранжевой и появится галка – отслеживать/не отслеживать), для Outlook требуется скачать плагин с сайта. После чего, нажимая на значок приложения, вы можете увидеть подробности: когда пользователь открыл письмо, в каком месте и сколько раз он его просматривал.

4. Planner 5D

Planner 5D — это приложение для создания планировки помещений и дизайна интерьера. Никаких специальных навыков не требуется, приложение проще любой игры. С помощью этого сервиса вы можете создать интерактивную 3D-планировку с мебелью и интерьером и детализировать отделку. После чего скачать ее или сделать скриншот и поместить в вашу презентацию. Сделайте простую схему сами и не напрягайте вашего дизайнера, если для вашей работы не требуется более серьезный софт, такой как Cinema 4D и SketchUp. В принципе, для создания большинства схем планировок подойдет обычный Paint или расширение SketchPad.

5. Приложение SketchPad

Своеобразный аналог Paint, SketchPad обладает гораздо более богатыми возможностями. С его помощью можно сделать простенький эскиз или зарисовать ваши задумки. Для всех тех, кто еще не успел в должной мере освоить Photoshop. Также можно рассмотреть ее как полезное релаксирующее средство и «топливо» для творчества, множество комбинаций и сотни градиентов могут увлечь любого человека.

6. Evernote Web Clipper

Самый простой способ сохранять интересные материалы, которые вы нашли в Интернете, добавлять к ним свои комментарии и делиться с другими людьми. Начиная копированием страниц и заканчивая пометками на снимках экрана, Evernote Web Clipper позволяет сохранять любые материалы из вашего браузера прямиком в Evernote, при чем не только полные веб-страницы, но и отдельные фрагменты, которые приложение «умно» выделит из вашего браузера с помощью пары кликов. Также вы можете сделать нужные пометки с помощью маркера, добавить текстовые комментарии, фигурки и штампы или сохранить всю переписку из Gmail почты вместе с вложениями.

Хороший аналог, которым пользуется автор статьи: Evernote Clearly (те же самые функции).

7. Pocket (экс «Read It Later»)

Light-аналог Web Clipper и Clearly, для всех тех, у кого нет времени разобраться в Evernote. Устанавливаем Pocket , регистрируемся в сервисе, при нажатии на кнопку материал по ссылке отправляется в ваш аккаунт-карман (собственно, «покет»). Позже вы можете прочитать его и на другом вашем устройстве. Все просто.