Как создавать и публиковать приложения и расширения Chrome. Расширения Google Chrome для веб-разработки и не только Плагин для google chrome web developer
Эра технологий - Информационный сайт
  • Главная
  • Интернет
  • Как создавать и публиковать приложения и расширения Chrome. Расширения Google Chrome для веб-разработки и не только Плагин для google chrome web developer

Как создавать и публиковать приложения и расширения Chrome. Расширения Google Chrome для веб-разработки и не только Плагин для google chrome web developer

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

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

1 Web Developer

Web Developer Tools является одним из самых полезных расширений для любого разработчика. Он добавляет панель инструментов в Chrome. С её помощью можно удобно редактировать CSS, просматривать JavaScript и многое другое. Расширение доступно для браузеров Chrome, Firefox и Opera.

2 Accessibility Web Developer Tools

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

3 Responsive Web Design Tester

Используйте расширение Responsive Web Design Tester, чтобы проверить, как страница реагирует на различные устройства. Оно отражает размер и браузер мобильного устройства, поставляется с пресетами различных Android устройств. Он также работает в автономном режиме, который полезен при разработке сайтов на локальном хостинге без доступа к Интернету.

4 Wappalyzer

Если вы когда-либо использовали Built With, вы будете знакомы с концепцией Wappalyzer . Это расширение определяет системы управления контентом, платформы электронной коммерции, веб-серверы, базы JavaScript, аналитические инструменты и многое другое. Кроме того, приложение доступно для браузера Firefox.

5 PerfectPixel

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

6 Refined GitHub

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

7 CDN Headers & Cookies

Это расширение позволяет просматривать все HTTP-заголовки и куки в одном месте. Это легкое и простое расширение. Вы можете добавлять, редактировать или удалять пользовательские заголовки запросов и куки, а также заголовки запросов на экспорт и куки в файл CSV.

8 User Agent Switcher

Используйте это расширение , чтобы изменить агента пользователя для подмены устройства и/или браузера. Вы можете быстро переключаться между различными пользователями или добавлять свои собственные с настройками, имитирующими Internet Explorer, iPhone, или имитирую работу Google бота. Это полезно для отладки и тестирования поведения сайта на различных устройствах.

9 JSON Viewer

Расширение для печати JSON и JSONP, которое вы можете настроить под свой вкус. Оно включает в себя такие функции, как разборные узлы; интерактивные URL-адреса; блокнот, в который вы можете внести JSON формат на неопределенное время с помощью одной кнопки или комбинации клавиш; 27 встроенных тем и много другое.

10 Check My Links

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

11 Usersnap

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

12 IE Tab

IE Tab эмулирует Internet Explorer, используя свой движок рендеринга непосредственно в Chrome. Приложение позволяет использовать элементы управления ActiveX для проверки разрабатываемых сайтов с различными версиями IE, начиная от IE6 до IE9.

13 DevTools AutoSave

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

14 Chrome MySQL Admin

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

15 Grunt Devtools

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

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

Существует несколько версий, созданных для различных категорий пользователей. Одна из них называется Google Chrome Developer Edition . Что это за версия такая и зачем она нужна? Об этом и пойдет речь в данном материале.

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

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

Какие вообще версии Chrome бывают?

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

Вот такие версии всеми любимого Гугл Хрома существуют. Однако в данном контексте нам интересна именно Developer Edition. Поэтому нужно рассмотреть все ключевые особенности данной версии подробнее. Только тогда можно сделать заключение.

Особенности Developer Edition

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

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

Еще одна «фишка» — наличие всех последних новшеств, которые перекочевали в данную версию из Canary. Благодаря этому разработчики могут оптимизировать свои расширения под новые возможности веб-обозревателя.

Частые обновления – еще одна отличительная черта Developer Edition. Они приходят иррегулярно, но не позднее, чем раз в две недели. В некоторых случаях обновления могут приходить уже через два дня. Это удобно для тех, кто тестирует новые возможности веб-обозревателя.

Заключение

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

Стоит отметить, что обычным пользователям вовсе не нужно устанавливать Developer Edition. Толку от этого не будет никакого. Тем более, что особой стабильностью эта сборка не отличается. Если вы не разработчик, то лучше использовать Stable.

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

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

Подготовка

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

Шаг 1. Создайте приложение или расширение

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

  1. Создайте на компьютере папку, в которой будут храниться файлы приложения или расширения. Присвойте ей имя приложения.
  2. Создайте файл манифеста.
    1. Создайте в текстовом редакторе файл JavaScript ® Object Notation (JSON). Посмотрите пример файла JSON для приложения-закладки.
    2. Проверьте, правильно ли отформатирован код в файле JSON, с помощью специального инструмента, например JSONLint .
  3. Поместите файл manifest.json в папку приложения или расширения.
  4. Создайте логотип.
    1. Изображение должно иметь размер 128 х 128 пикселей.
    2. Сохраните файл логотипа под названием 128.png в папке приложения.

Шаг 2. Протестируйте приложение или расширение

Разработчики могут тестировать свои приложения и расширения в браузере Chrome или на устройствах Chrome OS.

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

Шаг 3. Создайте коллекцию приложений (необязательно)

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

Шаг 4. Опубликуйте приложение или расширение в Интернет-магазине Chrome

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

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

Чтобы добавить приложение или расширение в Интернет-магазин Chrome, создайте ZIP-архив соответствующей папки, а затем опубликуйте продукт .

Шаг 5. Настройте правила работы с приложением или расширением

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

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

Вот несколько полезных расширений для Google Chrome.

Расширение Web Developer

Хочу отметить самый удобный и мощный инструмент для веб-разработчика и веб-дизайнера - расширение Web Developer для Google Chrome.

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

Расширение имеет большое количество опций.

Например, многим надо просто узнать цвет элемента на экране монитора в шестнадцатиричном формате. Для этого в плагине есть специальная функция. В разделе Miscellaneous выбрать пункт Display Color Picker .

Выбрав пункт Display Color Picker , курсор становится в виде крестика. Теперь, кликая на любую область экрана в правом нижнем углу браузера отображается цвет в шестнадцатиричной системе для использования в CSS.



Google Chrome поддерживает нескольких различных каналов обновлений, начиная от ежедневных сборок Canary и заканчивая стабильными релизами с 6-недельным циклом выхода.

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

Обзоры каналов Google Chrome

  • Stable : данный канал получает полностью протестированные тестовой командой Google версии браузера, которые не содержат серьезных сбоев и значительных проблем. Канал обновляется каждые 2 недели для промежуточных выпусков и каждые 6 недель для основных релизов. Скачать стабильную версию можно на странице - Google Chrome .
  • Beta : Если Вы хотите протестировать новые функции и улучшения с минимальными риском, канал Beta будет отличным выбором. Сборки обновляются каждую неделю, а основные версии появляются каждый 6 недель, более, чем за месяц до выхода стабильной версии.
  • Dev : Если Вы хотите ознакомиться с нововведениями как можно быстрее, вам подойдет канал Dev. Канал Dev получает обновление один или два раза в неделю и наглядно демонстрирует над какими улучшениями ведет работу команда Chrome. Задержка относительно основных версий отсутствует, и пользователь получает последний код. Несмотря на то, что данные сборки проходят тестирования, в них может содержаться большое количество ошибок.
  • Canary : В сборках Canary тестируются изменения, связанные с риском. Релизы выпускаются ежедневно и не проходят предварительное тестирование. Так как нет гарантий, что данные версии запустятся, они используют собственный профиль и настройки, а значит могут работать параллельно релизам другого канала Chrome. По умолчанию версии Canary сообщают о сбоях и статистке использования в Google, но Вы можете отключить данную опцию на странице загрузки.
  • Другие сборки : Если Вы - абсолютно бесстрашный тестировщик, Вы можете загрузить последнюю рабочую сборку из непрерывного потока разработки Chromium, посмотрев на номер под "LKGR", перейдя в загрузочный сегмент Google и скачав соответствующую сборку.

Примечание: Релизы раннего доступа (сборки Canary, Dev и Beta) будут лишь частично переведены на другие языки, отличные от английского. Текст, связанный с новыми функциями может не быть переведен на другие языки до того, как выйдет стабильная версия.

Что нужно знать, перед изменением канала?

Резервное копирование данных

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

Сделайте копию папки User Data\Default directory (например, скопируйте в папку "Default Backup" в той же директории). Путь зависит от операционной системы:

  • Каналы Stable, beta, и dev: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome\User Data\Default
  • Сборки Canary: \Documents and Settings\username\Local Settings\Application Data\Google\Chrome SxS\User Data\Default

Windows Vista или 7:

  • Каналы Stable, beta, и dev: \Users\username\AppData\Local\Google\Chrome\User Data\Default
  • Сборки Canary: \Users\username\AppData\Local\Google\Chrome SxS\User Data\Default
  • Каналы Stable, beta, и dev: ~/Library/Application Support/Google/Chrome/Default
  • Сборки Canary: ~/Library/Application Support/Google/Chrome Canary/Default
  • ~/.config/google-chrome/Default

Примечание: если Вы используете Проводник Windows для поиски папки, может потребоваться включение опции “Показывать скрытые папки и файлы” в Панели управления> Свойства папки (Параметры Проводника) > Вид

Лучшие статьи по теме