Браузеры — это ещё и платформы, предлагающие веб-разработчикам массу удобных инструментов, помогающих создавать замечательные сайты. В распоряжении разработчика, помимо встроенных инструментов, есть огромное количество браузерных расширений. Автор статьи, перевод которой мы сегодня публикуем, отобрал самые лучшие, на его взгляд, расширения, которые призваны помочь программистам в решении самых разных встающих перед ними задач. Это, в основном, расширения для Google Chrome.
Инструменты разработки для React/Redux и Vue.js
React и Vue.js — это широко известные инструменты для фронтенд-разработки. Для того чтобы максимально эффективно с ними работать, стоит установить соответствующие браузерные расширения.
Расширение React Developer Tools увеличивает возможности инструментов разработчика. С его помощью можно исследовать компоненты React, свойства, передаваемые компонентам, состояние компонентов. Оно способно принести React-разработчику реальную пользу.
React Developer Tools
Если вы, при работе с состоянием приложения, столкнулись с какими-то проблемами, вам на помощь может прийти расширение Redux DevTools. Оно может быть использовано для работы с состояниями, устроенными по-разному, особенно хорошо оно показывает себя при использовании с Redux. Кстати, вот вам совет. Установите у себя это расширение и посетите сайт наподобие airbnb.com. На нём используется React/Redux, поэтому вы, с помощью Redux DevTools, сможете узнать о том, как устроено управление состоянием страниц на этом сайте. По мне — так это весьма познавательно.
Vue.js devtools — это то же самое, что и React Developer Tools, но для Vue.js. Это расширение весьма удобно при отладке компонентов Vue и пригодится всем, кто пользуется этим фреймворком.
Vue.js devtools
JSONView
Ловили себя когда-нибудь на мысли о том, что в браузерах других программистов JSON-данные выглядят понятными и аккуратными, а в вашем — нет? Возможно, всё дело в том, что другие пользуются расширением JSONView. Это расширение очень быстро и аккуратно форматирует JSON-данные. JSONView, определённо, одно из моих любимых браузерных расширений.
JSONView
Library Sniffer
Library Sniffer — это отличный инструмент для того, кто хочет быстро узнать о том, с помощью каких средств, библиотек или фреймворков, созданы просматриваемые им страницы. Например, с помощью Library Sniffer можно узнать о том, с помощью чего создан некий сайт: WordPress, Drupal, React, Vue.js, AngularJS…
Library Sniffer
CSS Scan 2.0
CSS Scan 2.0 — это полезное расширение, которое позволяет разработчику исследовать и копировать CSS, просто наводя указатель мыши на элементы страниц. У него, правда, есть один минус. Дело в том, что для работы с ним нужно купить лицензию.
CSS Scan 2.0
У этого расширения есть бесплатная альтернатива — CSS Peeper. Она рассчитана, в основном, на дизайнеров, а не на тех, кто пишет код.
Web Developer
Расширение Web Developer позволяет оснастить браузер панелью, содержащей множество различных инструментов. С их помощью, например, можно отключать на страницах JavaScript, управлять расположением страницы, работать с изображениями. Это расширение доступно для Chrome и Firefox.
Web Developer
WhatFont
WhatFont — это довольно-таки маленькое расширение, которое позволяет идентифицировать шрифты, используемые на веб-страницах. Для того чтобы выяснить то, каким шрифтом оформлен фрагмент текста, достаточно включить расширение и навести указатель мыши на этот фрагмент. Работать с ним, как видите, предельно просто. Им, как и предыдущим расширением, могут пользоваться и те, кто работает в Chrome, и те, кто работает в Firefox.
WhatFont
ColorZilla
Расширением ColorZilla можно пользоваться и в Chrome, и в Firefox. Оно даёт в распоряжение разработчика инструмент для взятия цветопроб, средство для выбора цвета, генератор градиентов и другие полезные инструменты для работы с цветом. Например, с его помощью можно узнать о том, какой цвет имеет любой пиксель веб-страницы. Оно хранит историю работы с цветом и содержит инструмент для просмотра палитр.
ColorZilla
Spectrum
Доступность контента — это важный аспект современной веб-разработки. Дело в том, что возможности многих людей по взаимодействию с веб-страницами ограничены. Одним из таких ограничений является цветовая слепота (Color Vision Deficiency, CVD). Она влияет на возможность человека различать определённые цвета. Расширение Spectrum позволяет исследовать сайты на предмет их пригодности для людей с различными типами CVD.
Spectrum
Site Palette
Расширение Site Palette позволяет извлечь с сайта используемые на нём цвета и оформить их в виде цветовой палитры. Оно поддерживает несколько способов генерирования палитр, позволяет, выдавая специальную ссылку, делиться палитрами, поддерживает возможность печати палитр, умеет конвертировать их в PDF-файлы. И этим возможности Site Palette не ограничиваются.
Toby
Расширение Toby предназначено для организации браузерных вкладок таким образом, чтобы в ходе работы не приходилось бы держать открытым огромное количество вкладок. Это — нечто вроде панели управления вкладками, с которой удобно работать с помощью мыши. Это расширение способно положительно повлиять на продуктивность труда веб-разработчика.
Toby
Talend API Tester
Talend API Tester — это замечательное расширение, которое позволяет работать из браузера с различными API. Это могут быть API, основанные на технологиях REST, SOAP и HTTP. Это похоже, например, на Postman. Бесплатная версия расширения поддерживает выполнение всех видов HTTP-запросов, безопасный обмен данными, аутентификацию.
Talend API Tester
Full Page Screen Capture
Хотелось ли вам когда-нибудь быстро и без лишних движений сделать полный скриншот просматриваемой страницы? Если это так — тогда вам вполне может пригодиться расширение Full Page Screen Capture. С его помощью можно получать скриншоты всего содержимого страниц в формате PDF или в виде изображения. Оно даже может работать с элементами, поддерживающими скроллинг, и с элементами
iframe.Full Page Screen Capture
Итоги
Мы рассмотрели примерно полтора десятка браузерных расширений для веб-разработчиков. Надеемся, вы нашли среди них что-то такое, что вам пригодится.
Уважаемые читатели! Какими браузерными расширениями вы пользуетесь для веб-разработки?
Я знаком с браузерными расширениями не понаслышке, работаю в ИТ-бизнесе и многие из проблем, с которыми я сталкиваюсь в работе, успешно решаются с помощью браузерных расширений.
Некоторое время назад я попытался найти онлайн-сервис, который бы позволял быстро создавать браузерные расширения для различных нужд. Во время поисков я наткнулся на три (бесплатных) сервиса, которые вызвали во мне интерес, и я хочу поделиться ими с вами, уважаемые хабражители.
Community Toolbar
Разработкой этого сервиса занимается компания Conduit, которая занимается браузерными расширениями уже более 10 лет. Они заявляют о примерно 260 тыс. паблишеров и 250 млн. конечных пользователей.
Community Toolbar поддерживает следующие популярные браузеры и их обновления: Chrome, Firefox, Internet Explorer и Safari.
Этот сервис позволяет создавать тулбары и наполнять их различными виджетами, которые могут быть загружены из хранилища Apps Marketplace. Некоторые из этих виджетов монетизируемые и могут приносить доход владельцам тулбаров, или, как их называют, паблишерам.
Для распространения созданного расширения Community Toolbar предоставляет landing-страницу, на которой содержится скриншот созданного тулбара и кнопка для его загрузки.
После того, как вы начнёте кампанию по распространению вашего тулбара, вам скорее всего понадобятся аналитические данные — для этого Community Toolbar предоставляет данные (в том числе пострановые) по количеству установок, активных пользователей, использованию виджетов, но к сожалению здесь не хватает данных о количестве удалений продукта.
Для тех, кто хочет использовать API, сервис предагает документацию, но не предоставляет возможности онлайн-разработки.
Crossrider
Следующий сервис, который заслуживает внимания — Crossrider. Это большая платформа для онлайн-разработки, ориентированная на разработчиков со знанием JavaScript. Согласно данным сервиса, продуктами Crossrider пользуются примерно 15 тыс. разработчиков и 700 млн. (!) конечных пользователей.
На базе платформы Crossrider могут быть созданы различные расширения, среди которых боковые панели (sidebar), браузерные кнопки с различным контентом, расширения без GUI — всё зависит о фантазии и желания разработчика, и Crossrider предоставляет отличные инструменты для этого. Расширение может быть дополнено различными плагинами, такими как поисковый плагин, е-майл плагин и т. д.
Crossrider также поддерживает такие популярные браузеры, как Chrome, Firefox, Internet Explorer, Safari.
Для тех, кто хочет монетизировать создаваемое расширение, Crossrider предоставляет различные инструменты, такие как купоны, спонсируемые поисковые запросы, добавление рекламы InText.
Для распространения расширений Crossrider предлагает более лучшие возможности, чем Community Toolbar — настраиваемая landing-страница, страница “Thank You” (появляется после установки продукта), ссылки для загрузки расширения для каждого браузера в отдельности — это лишь некоторые опции. В дополнение к этому Crossrider предлагает создание продукта специально для Chrome Store и инструкцию по его загрузке.
Что касается аналитических данных, то Crossrider предлагает информацию по количеству установок/удалений, активных пользователей, в том числе по странам и по браузерам.
Без сомнения, Crossrider является лучшим сервисом для разработчиков. Он содержит подробную документацию, позволяет локальную разработку и синхронизацию с онлайн-платформой.
NeoBars
Последним сервисом, который вызвал во мне интерес, является NeoBars — продукт компании “Macte! Labs”, которая занимается разработкой браузерных расширений уже более 5 лет.
На платформе NeoBars можно создавать различные типы расширений: тулбары (InfoBars) с различными виджетами, Notifiers (поп-ап окно с различным контентом, открывающееся в браузерной кнопке). Также можно создавать свои расширения, используя инструмент Developer Tools и знания JavaScript.
NeoBars также поддерживает наиболее популярные браузеры (Chrome, Firefox, Internet Explorer, Safari) а в дополнение к ним ещё и Opera.
Данный сервис пока не использует инструменты монетизации, но как следует из FAQ, команда работает над их внедрением. Однако паблишеры, создающие своё расширение с помощью Developer Tools, могут добавить в код свои инструменты монетизации.
Для распространения созданных расширений NeoBars предлагает landing-страницу с инсталлерами для Windows/Mac и ссылками для каждого браузера в отдельности.
Что касается аналитики, то здесь NeoBars также предоставляет обширные возможности — данные о количестве установок/удалений, активных пользователей, использовании виджетов в тулбарах — все эти данные можно проанализировать по странам и по браузерам. Следует упомянуть то, что NeoBars позволяет получать аналитику в зависимости от способа распространения расширения — с помощью Windows/Mac инсталлера или побраузерно.
NeoBars позволяет разрабатывать собственные расширения онлайн, используя инструмент “Developer Tools”, который позволяет разработчикам создавать модули для InfoBars и Notifiers, или создавать отдельные продукты.
В помощь разработчикам создан отладчик — Debugger Tool, который устанавливается как браузерное расширение и позволяет проверять и отлаживать написанный код.
Чтобы подытожить всё сказанное, я объединил информацию по каждому из сервисов в диаграмме ниже:
Если вкратце подвести итог, то Community Toolbar в настоящее время предлагает только создание тулбаров, хотя браузерные расширения непрерывно развиваются. Crossrider позволяет разрабатывать различные расширения, однако данный сервис доступен только для разработчиков.
NeoBars привнёс на рынок браузерных расширений свежую и интересную концепцию — сделать создание браузерных расширений доступным для различных категорий людей, даже для тех, кто не умеет программировать. Мне интересно, как будет развиваться данный проект в дальнейшем и я надеюсь, что команда продолжит развитие в выбранном направлении.
Спасибо за прочтение, жду ваших мыслей в комментариях.
В моем браузере установлено около 30 расширений, которые упрощают жизнь и работу в интернете. В этой статье я хочу поделиться 10 актуальными расширениями Google Chrome для верстальщика, которые постоянно использую при разработке сайтов.
1. PerfectPixel
Пример использования PerfetPixel при разработке новых блоков на www.wrike.com
Верстка сайта пиксель-в-пиксель вызывает трудности как у новичков, так и у опытных специалистов. PerfectPixel накладывает изображение макета поверх верстки в браузере. В настройках расширения можно отрегулировать прозрачность и расположение макета, что позволяет учесть все необходимые размеры и отступы. Использование этого плагина упростит работу верстальщика и сократит количество правок при сдаче проекта. В моем наборе расширений PerfectPixel занимает первое место за счет своей функциональности и удобства использования.
Ссылка на установку расширения
2. Wappalyzer
Пример использования Wappalyzer на сайте collaborate.wrike.com/2019/london
Всегда интересно какие инструменты и технологии используются на сайтах. Wappalyzer предоставляет информацию о CMS, JS фреймворках, CSS библиотеках, инструментах аналитики и многом другом. Представьте, что анимация на сайте – это бесплатная CSS библиотека, которую вы можете использовать у себя в проекте. Это позволит сократить время поиска необходимого инструмента и быть в курсе технологий, которые использует сайт.
Ссылка на установку расширения
3. HTML5 Outliner
Иерархия заголовков на странице habr.com/ru/company/wrike
HTML 5 Outliner отображает список заголовков на странице сайта. Расширение помогает структурировать заголовки и определять нарушения в иерархии. Например, в теге section HTML 5 Outliner выводит предупреждение об отсутствии тега h3. Это один из быстрых и удобных способов, чтобы определить правильность использования заголовков в верстке.
Ссылка на установку расширения
4. Wireframify
Пример использования Wireframify на сайте www.wrike.com
Дизайнеры проектируют сайты с помощью wireframe — это набор линий, блоков и подписей. Такой подход позволяет создавать архитектуру проекта с учетом отступов, размеров и расположения блоков на странице. Wireframify включает альтернативный вид сайта в виде wireframe, что позволит избежать ошибочного использования:
- отрицательных margin;
- выравнивания элементов с помощью padding;
- добавления отступов с помощью CSS свойств left, right;
Ссылка на установку расширения
5. PageLiner
Пример использования PageLiner на сайте www.wrike.com/apps
В графическом редакторе выровнять элементы или отобразить сетку сайта можно с помощью направляющих линий. Верстальщик может включить этот функционал в браузере используя PageLiner. Расширение отображает похожие направляющие, как в том же Adobe Photoshop. С PageLiner выравнивать элементы становится намного проще.
Ссылка на установку расширения
6. Web Developer
Список возможностей web developer
Web Developer добавляет в браузер дополнительную панель с инструментами. Внутри нее находится 10 вкладок: Disable, Cookies, CSS, Forms, Images, Information, Miscellaneous, Outline, Resize и Tools. Функционал расширения позволяет:
- отключать CSS, JS и изображения;
- проверять валидность HTML, CSS;
- манипулировать CSS стилями;
- тестировать HTML формы;
- отображать необходимую информацию мета тегов;
- изменять размер окна браузера;
- очищать кэш;
Web Developer остается популярным расширением среди разработчиков. Его можно сравнить с мультитулом в реальной жизни: всегда под рукой необходимый набор инструментов.
Ссылка на установку расширения
7. User CSS
Пример использования User CSS на сайте www.wrike.com/customers
Представим, что вы захотели поправить CSS прямо в браузере, но после этого пришлось перезапустить страницу. Все ваши наработки пропали, и приходится вносить изменения заново. Используйте User CSS, который будет сохранять ваши стили. Больше не нужно переживать по поводу того, что CSS исчезнет. Функциональность расширения позволит тестировать написанный CSS при переходе на другие страницы.
Ссылка на установку расширения
8. StyleURL
Пример использования StyleURL на сайте Wrike www.wrike.com/customers
User CSS не заменит панель разработчика браузера. Если вы привыкли работать в devtools и при этом не хотите потерять изменения после обновления браузера – установите StyleURL. Расширение запомнит ваши изменения и предоставит возможность сохранить наработки в отдельном файле или загрузить в github gist.
Ссылка на установку расширения
9. Siteimprove Accessibility Checker
Пример использования Siteimprove Accessibility Checker на сайте www.wrike.com/newsroom
Siteimprove Accessibility Checker — это инструмент, который проверяет HTML на соответствие стандартам доступности, чтобы обеспечить доступ к контенту для всех. Расширение отображает ошибки с подробной информацией. В описании к ним вы можете найти сноски с WCAG 2 и прямые ссылки на подробные статьи о доступности.
Ссылка на установку расширения
10. Tabsbook
Пример использования Tabsbook
Каждый работает с закладками по-своему. Есть те, кто сохраняет ссылки для быстрого доступа к сайтам, и те, кто используют закладки, чтобы хранить полезную информацию. С помощью Tabsbook можно превратить ваши закладки в базу знаний. Интерфейс расширения отображает древовидную структуру папок для удобной навигации по вашим закладкам. Все данные хранятся в облаке, что позволяет иметь доступ к ним с любого устройства.
Ссылка на установку расширения
Расширения будут полезны всем новичкам и опытным специалистам, которые о них не знали. Напишите в комментарии, какие расширения вы используете.
Больше полезных расширений для браузера можно найти по ссылкам Toп-10 плагинов Chrome для дизайнеров и Полезные расширения Google Chrome для программиста.
10 лучших расширений Chrome для дизайнеров / Хабр
Как дизайнеры, мы почти всегда ищем новые советы, хитрости и инструменты, которые помогут ускорить и улучшить наш рабочий процесс. После нескольких месяцев тестирования расширений Chrome я составил список из 10 лучших расширений и плагинов для дизайнеров.
Window Resizer
Если вы дизайнер — вы, скорее всего, смотрите на 27-дюймовый iMac, когда читаете это. Тем не менее, у большинства наших пользователей нет мониторов размером с маленького слона.
Таким образом, встречайте Window Resizer. Это реально спасает жизнь, когда дело доходит до просмотра того, как ваш сайт выглядит в разных окнах просмотра. Просто откройте расширение и либо нажмите предустановленные видовые окна, либо введите что-нибудь нестандартное.
Loom
Говорят, картинка стоит тысячи слов, а видео стоит 10000? 1M? Кто знает — много, хотя. Loom — это действительно потрясающее бесплатное программное обеспечение, которое поможет вам записывать анимации, пользовательские разработки или описать ошибки в работе. Делиться этими видео со своей командой.
За последние несколько месяцев я много использовал этот инструмент. Это замечательно, когда вы пытаетесь передать вещи, которые невозможно запечатлеть, просто скриншотами. Просто установите расширение и нажмите запись. Когда вы закончите, вы можете поделиться своим видео и получить статистику о том, кто его просматривал и многое другое. Оценка приложению 10/10 порекомендовал бы другу — и вам конечно 🙂
Toybox
Вы тратите кучу времени на проверку элементов, захват скриншотов и регистрацию ошибок на вашем сайте? Вы можете решить данные проблемы с расширение Toybox Chrome. Это действительно самый быстрый способ оставить отзыв и проверить CSS прямо на вашем сайте.
Вы можете думать об этом как о комментировании в программах InVision или Zeplin Inspecting — но на вашем сайте. Кроме того, когда вы оставляете комментарий в данной программе, он автоматически делает снимки экрана, записывает данные браузера, информацию об ОС, размер области просмотра и многое другое — что делает диагностику проблем на одном дыхании. Это будет серьезная помощь для любой команды или продуктового агенства.
Muzli
Нужно вдохновение с утренним кофе (или чаем)? Расширение для Chrome Muzli поможет вам. Каждый раз, когда вы открываете новое окно браузера, вы увидите актуальную ленту всех интересных вещей. Они извлекают из тонны дизайнерских источников, чтобы дать вам что-то новое, модное и классное.
Я использовал это расширение в течение многих лет, и это просто замечательно.
SVG Grabber
Иногда вам просто нужно «стянуть» логотип или значки на странице. Если это, то чем вы занимаетесь довольно часто — тогда попробуйте SVG Grabber в своей жизни. Нажмите одну кнопку, и она автоматически вытянет все SVG, которые находятся на странице. Получите полное представление о том, как быстро загрузить то что вам нужно.
Не скажу что это то расширение, которым я пользуюсь все время, но порой оно выручает в сложные моменты.
Page Ruler
Измерение размера объектов на вашей странице может быть серьезной болью. Если вы часто открываете инструмент для создания скриншотов, я бы определенно рекомендовал вам приобрести расширение Page Ruler.
Откройте расширение, установите блок для измерения, и все готово! Ничего лишнего.
Dark Mode Dev Tools
Темная тема — настоящая необходимость для любого дизайнера. Так что эта утилита на самом деле встроена прямо в Chrome Dev Tools и не является расширением — но я думаю, что я все еще упомяну это;)
Просто откройте Инструменты разработчика> Нажмите на многоточечные эллипсы в правом верхнем углу> Нажмите «Настройки»> «Под внешним видом», переключите его на «Темный».
ColorZilla
Иногда вам просто нужен быстрый способ узнать, какой цвет используется, и ColorZilla — отличное решение именно для этого. Просто наведите курсор мыши на элементы на своей странице, чтобы увидеть используемые значения цветов hex и rgb. Нажмите, чтобы быстро скопировать его в буфер обмена. Это быстро, просто и эффективно.
У виджета есть и несколько других функций, но они не слишком часто используются.
Fontface Ninja
Еще одно простое, свежее и красивое расширение для вашего браузера — Fontface Ninja. Это приложение позволяет вам наводя курсор на элементы увидеть, какие шрифты они используют. Вы также можете перейти прямо с показываемых шрифтов на страницу, где их можно купить.
Простое и удобное расширение для док-станции.
Custom Cursor
Этот финт не совсем дизайнерский, но я нашел его на днях и подумал, что это настоящий хит. Пользовательский курсор позволяет вам изменить курсор по умолчанию на любой из выбранных кастомный, а также загрузить пользовательский курсор.
Очень весело, очень забавно, очень свежо
Спасибо что дочитали, и я надеюсь, что вам понравятся некоторые из этих расширений так же, как и мне 🙂 Пожалуйста, оставьте комментарий, если у вас есть другие расширения, которые вы используете в своем рабочем процессе!
Сделаем web лучше.
1. Octotree
Если вы любите GitHub и помногу читаете код, то, вероятно, знаете, как неудобно устроен обзор GitHub-файлов онлайн. Теперь этот процесс можно упростить при помощи расширения Octotree. Здесь предоставляется панель инструментов с удобной навигацией, также поддерживающая приватные репозитории.
2. PerfectPixel by WellDoneCode
Это расширение позволяет разработчикам накладывать изображения полупрозрачным слоем поверх HTML и делать попиксельное сравнение.
3. GitHub Repository Size
Удобный и простой плагин, отображающий как объем отдельного репозитория, так и размер кажого файла в нем.
4. Refined Github
Расширение отображает недавно опубликованные бранчи, а также позволяет по-новому работать с запросами и показывает аватары пользователей, которые отреагировали на коммент.
5. Code Cola
Плагин, который предлагает широкие возможности визуального редактирования стилей CSS.
При помощи данного расширения можно редактировать основные стили CSS3 прямо на сайте.
6. DomFlags
Расширение для быстрой работы с Chrome Developer Tools.
Создает меню ссылок для быстрой навигации по вашему коду.
7. JSON Formatter
Расширение упрощает читаемость JSON. Имеет подсветку синтаксиса, отступы, кликабельные ссылки.
8. EditThisCookie
EditThisCookie — это менеджер cookie. С его помощью вы можете добавлять, удалять, изменять, искать, защищать и блокировать cookie
9. Redux DevTools
Инструмент для отладки приложений с использованием Redux.
10. iMacros for Chrome
Если вам надо настроить тестирование веб-страницы путём циклического совершения определённых действий, то это приложение именно то, что нужно.
11. github npm stats
Плагин показывает статистику загрузок пакета на сайте NPM.
12. RailsPanel
Расширение для разработки Rails приложений, которое будет обрабатывать лог файл. Получите доступ ко всей информации о запросах вашего Rails приложения прямо в консоли.
13. Xdebug helper
Простое расширение отладки, профилирования и трассировки для Xdebug
14. Resolution Test
Resolution Test — поможет при тестировании веб-приложений на разных разрешениях и размерах экрана. Выбрать распространенное разрешение можно из списка, или же ввести необходимые размеры вручную. Это расширение изменяет размеры браузера и эмулирует ваше приложение в нужном разрешении экрана.
15. CSS Peeper
Расширение для просмотра используемых на сайтах цветов и ассетов: иллюстраций, текстовых документов, файлов вёрстки, видеофайлов.
16. Android SDK search
Расширение помогает быстро найти Android SDK на официальном сайте разработчика.
17. WhatRuns
WhatRuns позволяет увидеть все фреймворки и инструменты, обеспечивающие работу сайта, включая WordPress и другие материалы, такие как Google Analytics.
18. WordPress Site Manager
Расширение пригодится тем, кто хочет собрать всю необходимую для авторизации на своих сайтах информацию в одном месте. WordPress Site Manager сохранит вашу информацию и обеспечит доступ к главным страницам ваших сайтов прямо из браузера.
19. BuiltWith Technology Profiler
Расширение позволяет определить, каким образом был разработан тот или иной веб-сайт.
20. User-Agent Switcher
Расширение для того, чтобы увидеть, как сайт будет выглядеть на разных устройствах.
21. Stylebot
Stylebot — это расширение для браузера Chrome, которое позволяет настраивать отображение страниц в браузере согласно своим предпочтениям. Причем делается это легким и удобным способом, с мгновенным отображением изменений, так что справиться сможет любой человек, без необходимости знания HTML и CSS.
22. PHP Ninja Manual
Расширение позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.
Трудно запомнить каждую функцию, и если раньше вы тратили часы на поиск в Google, то это расширение облегчит вам жизнь.
23. Restlet Client — REST API Testing
Автоматизируйте свои тесты API с помощью этого расширения.
24. CSS-Shack
С помощью расширения сможете создавать дизайн и экспортировать его в CSS файл для использования на сайте. Оно поддерживает слои и содержит множество инструментов, которые можно использовать и в стандартном фоторедакторе.
25. Web Maker
Это расширение предоставляет удобную и автономную площадку для веб-экспериментов.
Идеально подходит для разработчиков, которые хотят экспериментировать или практиковаться в HTML/CSS/JS. Работает без подключения к интернету.
26. npmhub
При просмотре репозитория на github.com, в котором есть файл package.json, это расширение будет анализировать зависимости в пакете и отображать ссылки с описанием для них чуть ниже файла README.
27. Augury
Плагин расширяет инструментарий разработчика, добавляя инструменты для отладки и профилирования AngularJS
28. JetBrains IDE Support
Расширение для редактирования HTML/CSS/JavaScript и отладка JavaScript с использованием IDE JetBrains.
29. PHP Console
Расширение отображает ошибки PHP и дампы в консоли Google Chrome и всплывающих окнах уведомлений.
30. Advanced REST client
С помощью расширения, вы сможете заполнять данные форм и делать POST, PUT, GET, DELETE запросы, делать запросы к RestFul сервисам, смотреть ответы от сервера и многое другое.
31. DevTools Autosave
Плагин позволяет автоматически сохранять любые изменения в CSS или JS с помощью инструментов среды Chrome Dev к его исходному файлу.
32. JSONView
Плагин для проверки и просмотр документов JSON. Умеет автоматически делать форматирование, подсветку синтаксиса и прочие удобства для повышения читаемости JSON.
33. Isometric Contributions
Расширение позволяет переключаться между обычной диаграммой вклада на GitHub и версией изометрического пиксельного искусства.
34. OctoLinker
Расширение обеспечивает быструю навигацию по коду благодаря превращению элементов кода (например, include, require или import) в кликабельные ссылки. Переход по такой ссылке позволяет найти первоисточник. В зависимости от языка программирования расширение показывает исходный файл или же переносит пользователя на внешний сайт.
Надеюсь вы нашли для себя что-нибудь новое.
Мой список неполный, напишите в комментарии, какими расширениями вы пользуетесь и можете порекомендовать.
Мой телеграм-канал (@iscanner), пишу о Web и App аналитике
отзывы и обзор ВПН расширений для браузера
В последнее время активно блокируются многие интернет-ресурсы, для получения доступа к которым можно использовать технологию VPN. Она предусматривает передачу данных между компьютерами по шифрованным протоколам. Это востребовано во многих коммерческих организациях, где важно обеспечить конфиденциальность данных и гарантировать невозможность доступа посторонних. Технология скрывает IP-адрес пользователя и открывает полноценный доступ к интернет-ресурсам без каких-либо ограничений. Бесплатный vpn гарантирует анонимность в сети, за счет чего и происходит обход блокировки. Скачав vpn для яндекс браузера вы сильно упростите себе жизнь и больше не столкнетесь с сообщениями о невозможности доступа к заблокированному ресурсу. Среди подобных программ хотелось бы отметить zenmate и browsec — они бесплатные, а для включения VPN требуется проделать лишь несколько несложных действий. Вам необходимо лишь выбрать страну и нажать клавишу подключения.
Betternet VPN
Если вам нужен vpn для chrome, то обратите внимание на расширение — Betternet VPN.Это бесплатный сервис, что стало возможным благодаря интегрированной рекламе, на которой и зарабатывают разработчики. Расширение работает на условиях абсолютной конфиденциальности, не сохраняя и не передавая третьим лицам ваши логины, а также пароли.
ZenMate
Это другое, не менее известное расширение, работающее на бесплатной основе. За разработку отвечает немецкая фирма ZenGuard, которая является одним из мировых лидеров среди VPN-провайдеров и сосредоточила свои усилия на создании качественного софта для безопасного посещения заблокированных интернет-ресурсов. С помощью расширения осуществляется шифрование трафика и открывается доступ к любому сайту, существующему в мире. В результате интернет-браузинг будет защищен от любых угроз и сохранит вашу личность анонимной.
7 Chrome-расширений для обхода блокировок / Хабр
В последние годы вопрос обхода различных блокировок сайтов стоит достаточно остро. Проще всего решить ее можно с помощью прокси-расширений для браузера. А поскольку самым популярным браузером сейчас является Chrome, то я решил собрать в одном материале все самые адекватные варианты прокси и VPN-расширений для него.
Бесплатный инструмент (есть и платные тарифы), который предоставляет пользователям возможность использовать для подключения более 338 серверов на пяти континентов. Это приложение работает быстрее многих других подобных продуктов и пользуется популярностью – у расширения для Chrome более 200 тысяч установок, средняя оценка – 4.5 звезды.
Из важных технических возможностей: работа в фоновом режиме, поддержка любого типа интернет-соединений, простое подключение в один клик, понятный интерфейс, поддержка Windows, MacOS, Android, iOS, Linux.
Недавно появившийся бесплатный VPN и прокси-сервис, который набирает популярность. Согласно данным магазина расширений Chrome сейчас у него более 30 тысяч пользователей и средняя оценка в четыре звезды. В последние пару недель я тоже пользуюсь им, так что включил в список под первым номером.
Из плюсов заметна скорость — включенное расширение не сильно замедляет браузинг (в блоге проекта можно найти кое-какие данные по поводу того, какой скорости следует ждать), доступны сразу несколько серверов в странах Европы и США, что обеспечивает возможность доступа практически к любому заблокированному сайту.
Популярный инструмент с миллионами пользователей. Разработчики позиционируют свое расширение в качестве средства обеспечения информационной безопасности, а не только прокси — сервис позволяет пользователю избежать слежки за собой со стороны интернет-маркетологов, систем аналитики сайтов и других инструментов отслеживания поведения в сети. Существует также платная версия сервиса (от $7,99/мес), при покупке которой можно рассчитывать на более высокую скорость, поддержку 24/7 и получить возможность выбора серверов в большем количестве локаций.
Еще один известный инструмент для обхода блокировок, созданный компанией Anchor Free. Помимо собственно расширения для Chrome, существуют версии продукта для iOS, Android, Windows Phone, OS X и Windows. Как и в случае ZenMate сервисом можно пользоваться как бесплатно, так и купить расширенную версию (цена стартует с $5,99).
По статистике Google, этим сервисом пользуются меньше людей, чем предыдущими двумя, однако у него наилучшие оценки — средний балл находится на уровни пяти звезд. Это не VPN в полном понимании слова, скорее его можно назвать прокси-сервисом, использующим шифрование. И при работе именно с расширением для браузера, а не десктопной версии, шифруется только браузерный трафик
Проект уделяет большое внимание защищенности – летом 2017 года компания объявила о том, что прошла независимый аудит информационной безопасности от компании Cure53 и устранила найденные ошибки в расширении для Chrome.
Бесплатная версия TunnelBear имеет ограничения по трафику — максимум 500 мегабайт в месяц, затем понадобится платная подписка, цена на которую начинается с $4,99 при оплате сразу на год.
Полностью бесплатное решение для обхода блокировок — проект монетизируется за счет рекламы (для ее просмотра нужно нажать специальную кнопку), что позволяет сохранять его не только бесплатным, но и безлимитным. Для начала использования не нужно создавать никаких учетных записей, достаточно просто установить расширение и выбрать виртуальную локацию.
Бесплатный VPN-сервис без ограничения трафика и скорости передачи данных, предоставляющий выбор виртуального местоположения в 15 различных странах. Hola выступает как одноранговый сервис: в качестве маршрутизаторов для передачи данных используются компьютеры участников системы. С этим был связан скандал, когда создателей Hola VPN обвинили в продаже трафика и наличии уязвимостей в их программном обеспечении — команда проекта изначально не сообщала о такой схеме работы.
Еще несколько альтернатив:
Дополняйте список в комментариях!
расширений браузера — Mozilla | MDN
Расширенияили надстройки могут изменять и расширять возможности браузера. Расширения для Firefox создаются с использованием кросс-браузерной технологии API WebExtensions.
Технология расширений в Firefox в значительной степени совместима с API расширений, поддерживаемым браузерами на основе Chromium, такими как Google Chrome, Microsoft Edge, Opera, Vivaldi. В большинстве случаев расширения, написанные для браузеров на основе Chromium, запускаются в Firefox с небольшими изменениями.
- направляющих
Если вы только начинаете или ищете более подробные советы, узнайте о том, как работают расширения, и используйте API WebExtensions из нашего обширного набора учебных пособий и руководств.
- Рекомендации
Получите исчерпывающую информацию о методах, свойствах, типах и событиях API WebExtensions и полную информацию о ключах манифеста.
- Рабочий процесс Firefox
Узнайте, как создавать и публиковать расширения для Firefox: ознакомьтесь с инструментами разработчика, публикацией и распространением, а также портированием в Extension Workshop.
Если у вас есть идеи или вопросы или вам нужна помощь, вы можете связаться с нами в списке рассылки dev-addons или в комнате дополнений на Matrix.
Начало работы
Узнайте, что могут делать расширения, прежде чем создавать свое первое расширение. Узнайте об анатомии расширения и получите обзор процесса разработки и публикации расширения в стиле Firefox. Изучите немного глубже с исчерпывающим выбором примеров расширений, которые вы можете запустить прямо в Firefox.
Концепции
Получите подробную информацию о концепции, лежащей в основе расширений, от обзора API JavaScript через скрипты контента, шаблоны соответствия, работу с файлами, интернационализацию и политику безопасности контента, до более сложных тем, таких как собственный обмен сообщениями, с помощью API-интерфейсов devtools, и родные манифесты.
Пользовательский интерфейс
Откройте для себя все компоненты пользовательского интерфейса, которые вы можете использовать в своих расширениях, с примерами кодирования и советами.
Как до
Из шаблонов, которые вы будете регулярно использовать, таких как работа с API-интерфейсом вкладок и добавление кнопки на панель инструментов, к более сложным темам, таким как перехват HTTP-запросов и работа с контекстными идентификаторами, вы найдете множество учебных пособий для начала работы.
Рабочий процесс Firefox
Когда вы будете готовы создать свое расширение для Firefox или перенести расширение Chrome в Extension Workshop. Здесь вы найдете подробности по:
Ссылка
API JavaScript
Получите исчерпывающую информацию о методах, свойствах, типах и событиях для всех JavaScript API.Также есть подробная информация о совместимости каждого API с основными браузерами. Большинство справочных страниц также содержат примеры кодирования и ссылки на примеры расширений, которые используют API.
ключей манифеста
Получите полную информацию о ключах манифеста, включая все их свойства и настройки. Также есть подробная информация о совместимости каждого ключа с основными браузерами.
,Создание кросс-браузерного расширения — Mozilla
Внедрение API расширений для браузера создало единый ландшафт для разработки расширений для браузера. Однако среди браузеров, использующих API расширений (основными из которых являются Chrome, Firefox, Opera и Edge), существуют различия как в реализации API, так и в охвате. А затем Safari использует свой собственный Safari Extensions JS.
Максимизировать охват вашего расширения браузера означает разработку его как минимум для двух разных браузеров, возможно, даже больше.В этой статье рассматриваются шесть основных проблем, с которыми сталкиваются при создании кросс-браузерного расширения, и в каждом случае предлагается, как решить эту проблему.
В этой статье не обсуждается создание расширений браузера для Safari. Может быть возможно совместно использовать некоторые ресурсы с расширением Safari, такие как изображения и контент HTML. Тем не менее, кодирование JavaScript должно осуществляться как отдельный проект разработки, если только вы не хотите создавать свой собственный polyfill.
Кросс-платформенное расширение кодирования препятствий
При работе с кроссплатформенным расширением необходимо учитывать шесть областей:
- API namespace
- API асинхронная обработка событий
- Покрытие функций API
- Ключи манифеста
- Удлинительная упаковка
- Расширение Издательства
API namespace
В четырех основных браузерах используются два пространства имен API:
- браузер
.*, предлагаемый стандарт для расширений API, используемый Firefox и Edge. -
хром. *используется Chrome и Opera.
Firefox также поддерживает пространство имен chrome. * для API-интерфейсов, совместимых с Chrome, в первую очередь для облегчения портирования. Тем не менее, использование браузера . * пространство имен является предпочтительным. В дополнение к предлагаемому стандарту браузер . * использует обещания — современный и удобный механизм обработки асинхронных событий.
Только в самых тривиальных расширениях пространство имен может быть единственной межплатформенной проблемой, которую необходимо решить. Поэтому редко, если вообще когда-либо, полезно пытаться решить эту проблему в одиночку. Наилучшим подходом является решение этой проблемы с помощью асинхронной обработки событий.
API асинхронная обработка событий
Существует два подхода к обработке асинхронных событий, используемых в четырех основных браузерах:
- Обещания , предлагаемый стандарт для расширений API, используемый Firefox.
- Обратные вызовы , используемые Chrome, Edge и Opera.
Firefox также поддерживает обратные вызовы для API, которые поддерживают пространство имен . * . Однако рекомендуется использовать обещания (и браузер . * Пространство имен * ). Обещания были приняты как часть предлагаемого стандарта. Это значительно упрощает асинхронную обработку событий, особенно там, где вам нужно объединить события в цепочку.
API браузера WebExtension Polyfill
Итак, как вы легко можете воспользоваться обещаниями, когда Firefox — единственный браузер, поддерживающий его? Решение состоит в том, чтобы кодировать Firefox, используя обещания, и использовать API-интерфейс браузера WebExtension Polyfill!
Этот polyfill обращается к пространству имен API и асинхронной обработке событий в Firefox, Chrome и Opera.На момент написания статьи (ноябрь 2018 года) поддержка Edge находилась в стадии разработки.
Чтобы использовать полифилл, установите его в свою среду разработки с помощью npm или загрузите его непосредственно из выпусков GitHub.
Затем ссылка browser-polyfill.js в:
-
manifest.json, чтобы сделать его доступным для фоновых и контентных скриптов. - HTML-документов, таких как
browserActionвсплывающих окон или вкладок. - Выполнение
сценариявызывает динамически внедряемые сценарии содержимого, загружаемые вкладками.executeScript, где он не был загружен с использованием декларацииcontent_scriptsв manifest.json .
Так, например, этот код manifest.json делает полизаполнение доступным для фоновых скриптов:
{
// ...
"задний план": {
"скрипты": [
"браузер-polyfill.js",
"background.js"
]
}
} Ваша цель — убедиться, что polyfill выполняется в вашем расширении раньше, чем любой другой скрипт ожидает браузер .* Выполняется пространства имен API.
Существуют и другие варианты полизаполнения, но на момент написания ни одна из них не обеспечивала покрытие API-интерфейса браузера WebExtension Polyfill. Таким образом, если вы не выбрали Firefox в качестве первого выбора, вы можете принять ограничения альтернативных полифилов, портировать на Firefox и добавить поддержку кросс-браузера или разработать собственный полифилл.
Покрытие функций API
Различия в функциях API, предлагаемых в каждом из четырех основных браузеров, делятся на три широкие категории:
- Отсутствие поддержки для всей функции.
Например, на момент написания Edge не предоставлял поддержку функции Privacy . - Вариации в поддержке функций внутри функции.
Например, во время написания Firefox не поддерживает метод функции уведомленияonButtonClicked, в то время как Firefox является единственным браузером, который поддерживаетonShown. - Фирменные функции, поддерживающие специфичные для браузера функции.
Например, на момент написания, контейнеры были специфической функцией Firefox, поддерживаемой функциейcontextualIdentities.
Подробную информацию о поддержке расширенных API-интерфейсов для четырех основных браузеров и Firefox для Android можно найти на странице поддержки браузером Mozilla Developer Network для API-интерфейсов JavaScript. Информация о совместимости браузера также включена в каждую функцию и ее методы, типы и события на справочных страницах API JavaScript Mozilla Developer Network.
Обработка API различий
Простой подход к устранению этих различий заключается в ограничении функций, используемых в вашем расширении, функциями, которые предлагают одинаковую функциональность во всех целевых браузерах.На практике для большинства расширений этот подход может быть слишком ограничительным.
Вместо этого, в случае различий между API-интерфейсами, вы должны либо предложить альтернативные реализации, либо использовать запасную функциональность. (Помните: вам также может понадобиться сделать это, чтобы учесть различия в поддержке API между версиями того же браузера .)
Использование проверок во время выполнения на наличие функций функции является рекомендуемым подходом для реализации альтернативных или резервных функций.Преимущество выполнения проверки во время выполнения состоит в том, что если функция становится доступной, вам не нужно обновлять и распространять расширение, чтобы воспользоваться им.
Следующий код позволяет выполнить проверку во время выполнения:
if (typeof=== "function") { // безопасно использовать функцию }
манифест ключей
Различия в ключах файлов manifest.json , поддерживаемых четырьмя основными браузерами, делятся на три категории:
- Расширение информационных атрибутов.
Например, на момент написания Firefox и Opera включают ключдля разработчикадля получения подробной информации о разработчике, а такжеавторарасширения. - Особенности расширения.
Например, на момент написания Edge не поддерживал командыключ, который позволяет определять сочетания клавиш для расширения. - Ключевые опции.
Например, на момент написания ключаавторявляется обязательным в Edge, но необязательным в других основных браузерах.
Информация о совместимости браузера включена с каждым ключом в справочную страницу ключей Mozilla Developer Network manifest.json .
Поскольку manifest.json файлы, как правило, мало меняются — за исключением номеров выпусков, которые могут различаться в разных браузерах, создание и редактирование статической версии для каждого браузера обычно является наиболее простым подходом.
Удлинительная упаковка
Упаковка расширения для распространения через магазины расширений браузера относительно проста.
- Firefox, Chrome и Opera используют простой формат zip, для которого требуется, чтобы файл
manifest.jsonнаходился в корне zip-пакета. - Однако для отправки в магазин Microsoft требуется дополнительная упаковка файла расширения.
Подробнее об упаковке см. Руководство по порталу для разработчиков соответствующего расширения.
Расширение издательства
Каждый из четырех основных браузеров поддерживает магазины расширений браузера.Каждый магазин также выполняет проверку вашего расширения для выявления уязвимостей в безопасности.
Как следствие, вам нужно подходить к добавлению и обновлению вашего расширения для каждого магазина в отдельности. В некоторых случаях вы можете загрузить свое расширение с помощью утилиты.
В таблице ниже приведены подходы и особенности каждого магазина:
| Браузер | Регистрационный взнос | Загрузить утилиту | Процесс подготовки к публикации | Двухфакторная аутентификация аккаунта |
|---|---|---|---|---|
Firefox | № | web-ext | Автомат, несколько секунд 1 | № |
Chrome | Да | Да | Автоматически, менее часа | Да |
Opera | № | № | Руководство, SLA не предоставляется | № |
Edge | Да | № | Руководство, до 72 часов 2 | Да |
1 После публикации выполняется проверка расширения вручную, что может привести к его приостановке в случае обнаружения проблем, требующих исправления.
2 На момент написания этой статьи Microsoft разрешала публиковать только предварительно утвержденные расширения.
Прочие соображения
Расширение именования
Microsoft требует, чтобы расширения имели уникальные имена, и предоставляет процесс запроса одного или нескольких имен для вашего расширения через Центр разработки Windows. Поэтому целесообразно зарезервировать добавочное имя в Microsoft, даже если вы не собираетесь немедленно поддерживать Edge.
Ни один из других магазинов не применяет ограничения имен.
Номер версии
Магазины Firefox и Chrome требуют, чтобы каждая загруженная версия имела отдельный номер версии. Это означает, что вы не можете вернуться к более раннему номеру версии, если вы столкнулись с проблемами в выпуске.
Поделиться содержанием
Даже если вы включаете разработку расширений для Safari, существует ряд ресурсов, которые вы можете совместно использовать во всех своих реализациях. К ним относятся:
Заключение
При подходе к разработке кроссплатформенного расширения можно устранить фундаментальные различия между реализациями API расширений, ориентируясь на Firefox и используя API-интерфейс браузера WebExtension Polyfill.Следуя этому подходу, вы получаете выгоду от использования функций API, которые тесно связаны с предлагаемым стандартом API расширений и предлагают простоту обещаний для асинхронной обработки событий.
Большая часть вашей кроссплатформенной работы, вероятно, будет сосредоточена на обработке изменений между функциями API, поддерживаемыми основными браузерами. Создание ваших файлов manifest.json должно быть относительно простым и что-то, что вы можете сделать вручную. Затем вам нужно будет учесть изменения в упаковке расширений и процессы отправки в каждое из хранилищ расширений.
Вы можете использовать шаблон расширения браузера для быстрой настройки рабочего проекта для создания и публикации расширения браузера.
Следуя советам, приведенным в этой статье, вы сможете создать расширение, которое хорошо работает во всех четырех основных браузерах, что позволит вам предоставлять функции расширения большему количеству людей.