Браузерные расширения: Расширения. Справка

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

Браузеры — это ещё и платформы, предлагающие веб-разработчикам массу удобных инструментов, помогающих создавать замечательные сайты. В распоряжении разработчика, помимо встроенных инструментов, есть огромное количество браузерных расширений. Автор статьи, перевод которой мы сегодня публикуем, отобрал самые лучшие, на его взгляд, расширения, которые призваны помочь программистам в решении самых разных встающих перед ними задач. Это, в основном, расширения для 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 не ограничиваются.
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 предлагает множество инструментов монетизации. Например, вы можете использовать инструмент Active Rewards Program, который позволяет получать деньги за каждого активного пользователя или за пользователей, которые пользуются монетизируемыми виджетами. К другим инструментам монетизации относятся распространение другого ПО вместе с инсталлером, показ купонов, спонсируемых поисковых запросов и т.д.

Для распространения созданного расширения 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 привнёс на рынок браузерных расширений свежую и интересную концепцию — сделать создание браузерных расширений доступным для различных категорий людей, даже для тех, кто не умеет программировать. Мне интересно, как будет развиваться данный проект в дальнейшем и я надеюсь, что команда продолжит развитие в выбранном направлении.

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

Полезные расширения Google Chrome в 2019 году / Блог компании Wrike / Хабр

В моем браузере установлено около 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 лучше.
Полезные расширения Google Chrome для программиста / Хабр
Работа программиста настолько сложна и разнообразна, что в ней просто не обойтись без помощи различных инструментов. Подготовил список из 34 полезных расширений Google Chrome, которые облегчат вашу жизнь и сэкономят время.

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

Картинки по запросу betternet
Это другое, не менее известное расширение, работающее на бесплатной основе. За разработку отвечает немецкая фирма 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, предлагаемых в каждом из четырех основных браузеров, делятся на три широкие категории:

  1. Отсутствие поддержки для всей функции.
    Например, на момент написания Edge не предоставлял поддержку функции Privacy .
  2. Вариации в поддержке функций внутри функции.
    Например, во время написания Firefox не поддерживает метод функции уведомления onButtonClicked , в то время как Firefox является единственным браузером, который поддерживает onShown .
  3. Фирменные функции, поддерживающие специфичные для браузера функции.
    Например, на момент написания, контейнеры были специфической функцией Firefox, поддерживаемой функцией contextualIdentities .

Подробную информацию о поддержке расширенных API-интерфейсов для четырех основных браузеров и Firefox для Android можно найти на странице поддержки браузером Mozilla Developer Network для API-интерфейсов JavaScript. Информация о совместимости браузера также включена в каждую функцию и ее методы, типы и события на справочных страницах API JavaScript Mozilla Developer Network.

Обработка API различий

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

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

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

Следующий код позволяет выполнить проверку во время выполнения:

 if (typeof  === "function") {
   // безопасно использовать функцию
} 

манифест ключей

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

  1. Расширение информационных атрибутов.
    Например, на момент написания Firefox и Opera включают ключ для разработчика для получения подробной информации о разработчике, а также автора расширения.
  2. Особенности расширения.
    Например, на момент написания Edge не поддерживал команды ключ , который позволяет определять сочетания клавиш для расширения.
  3. Ключевые опции.
    Например, на момент написания ключа автор является обязательным в 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 должно быть относительно простым и что-то, что вы можете сделать вручную. Затем вам нужно будет учесть изменения в упаковке расширений и процессы отправки в каждое из хранилищ расширений.

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

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

Отправить ответ

avatar
  Подписаться  
Уведомление о