Как сделать расширение

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

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

В этом уроке я собираюсь показать, как создать базовое расширение для Chrome, затратив на это около 5 минут — без шуток!

Что мы собираемся разрабатывать

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

Также я часто проверяю другие сайты, чтобы сравнивать.

Было бы неплохо иметь расширение для Chrome, которое позволяло бы, используя GTmetrix, проверить скорость сайта, который вы в данный момент просматриваете, просто нажав кнопку?

Я проверил Chrome Web Store и не нашел подобного расширения, так что именно это мы и реализуем.

Что такое расширение для Google Chrome

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

На самом базовом уровне расширение Chrome — это набор HTML, CSS и JavaScript-файлов, позволяющий добавить некоторую функциональность в Chrome через JavaScript API, который предоставляет браузер. По сути, расширение — это веб-страница в Chrome, имеющая доступ к некоторым дополнительным API.

В этом уроке я собираюсь показать вам, как создать базовое расширение Chrome, которое называют Browser Action. Этот вид расширения добавляет в панель инструментов Chrome кнопку, нажатие на которую показывает HTML-страницу.

Также такие расширения позволяют выполнять какой-либо JavaScript-код.

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

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

Шаг 1: Создание проекта

Первое, что мы должны сделать, это создать проект и все файлы, которые нужны для нашего расширения. Давайте начнем с создания нового каталога, который мы назовем «GTmetrix Extension». В этот каталог мы поместим все файлы, которые нужны для расширения. Chrome позволяет загрузить плагин, указав директорию, содержащую файлы с расширением.

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

Далее нам потребуется иконка для нашего расширения. Это должен быть PNG-файл 19×19px. Можно взять .

Далее создадим HTML-страницу, которая будет отображаться при нажатии на иконку. ДЛя этого добавим файлы popup.html и popup.js в директорию проекта «GTmetrix Extension».

Из-за ограничений безопасности, мы не можем использовать в расширении JavaScript-код, встроенный в HTML, поэтому мы будем ссылаться на внешний файл.

Шаг 2: Создание файла манифеста

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

Откройте файл manifest.json и добавьте в него следующий код:

Большинство полей в этом JSON-файле не требуют дополнительного объяснения, поэтому я не буду тратить на это время, обратите внимание на раздел browser_action, где мы определяем, какая иконка будет использоваться и какая HTML-страница должна отображаться при нажатии на кнопку.

Вы также, наверное, заметили, что я добавил раздел permissions, который определяет, что расширение имеет доступ к текущей вкладке. Это необходимо для того, чтобы мы могли получить URL в текущей вкладки и перейти к GTmetrix.

Шаг 3: Создание интерфейса

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

Наш интерфейс будет очень простым, содержащим заголовок «GTmetrix Analyzer» и кнопку, по которой пользователь сможет проанализировать текущую страницу.

Откройте popup.html и добавьте следующий код:

В HTML-файле мы подключаем скрипт popup.js. В этом скрипте будет реализована логика нашего расширения, которая будет выполняться при нажатии на кнопку с id checkPage.

Шаг 4: Реализация логики

Последняя вещь, которую нам необходимо будет сделать, это реализация логики, которая должна выполняться при нажатии на кнопку «Check this page now!».

Нам нужно добавить обработчик события click для кнопки checkPage. При нажатии на эту кнопку будет создаваться новая форма, содержащая URL текущей страницы, и отправляться в GTmetrix.

Откройте popup.js и добавьте следующий код:

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

Как вы можете видеть в коде выше, сначала мы регистрируем обработчик события click для кнопки checkPage. Далее, когда кнопка нажата, мы получаем URL текущей вкладки, создаем форму со скрытым полем и отправляем ее GTmetrix. URL текущей страницы используется для того, чтобы указать, какую именно страницу мы хотим анализировать.

Тестирование

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

На этой странице включите галочку «Developer mode», чтобы разрешить загрузку расширений из исходников. И далее нажмите кнопку «Load unpacked extension» или просто перетащите директорию с расширением на эту страницу. Вы должны увидеть, что новая иконка добавилась в панель инструментов браузера.

Чтобы проверить расширение, откройте страницу, которую вы хотите проанализировать в GTmetrix. Нажмите на иконку расширения в панели инструментов, далее нажмите на кнопку «Chech this page now!». Вы должны увидеть результат анализа на текущей вкладке.

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

.

Орфографический словарь

Словарь Ожегова

ХРОМ, хром, -а, м.
1. Химический элемент, твёрдый светло-серый блестящий металл.
2. Род жёлтой краски (спец.).
прил. ~истый, -ая, -ое (к 1 знач.) и ~овый, -ая, -ое. Хромистая сталь. Хромовая руда.
II. ХРОМ, -а, м. Сорт мягкой тонкой кожи.
прил. ~овый, -ая, -ое. Хромовая обувь.

Словарь Даля

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

Словарь Ефремова

ХРОМ 1. м. 1) Химический элемент, твердый серебристый металл, употребляемый при изготовлении твердых сплавов, красок и т.п. 2) Разновидность желтой краски. 2. м. Мягкая тонкая кожа, выдубленная хромовыми (1*2) солями.

Словарь Ушакова

ХРОМ хрома, мн. нет, м. (греч. chroma — цвет). 1. Химический элемент, твердый светлосерый металл, употр. при изготовлении твердых сплавов, красок, протрав, дубителей и т. п. (хим.). 2. Род желтой краски (спец.).
ХРОМ хрома, мн. нет, м. (от греч. chroma — цвет) (спец.). Мягкая тонкая кожа, выдубленная хромовыми (см. хромовый 1) солями.

Энциклопедический словарь

хром (лат. Chromium), химический элемент VIгруппы периодической системы. Назван от греч. chrōma- цвет, краска (из-за яркой окраски соединений). Голубовато-серебристый металл; плотность 7,19г/см3, tпл 1890°C. На воздухе не окисляется. Главные минералы- хромшпинелиды. Хром- обязательный компонент нержавеющих, кислотоупорных, жаростойких сталей и большого числа других сплавов (нихромы, хромали, стеллит).

Применяется для хромирования. Соединения хрома- окислители, неорганические пигменты, дубители.

Недавно просмотрено:

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

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

Рассмотрим данную концепцию на примере браузеров. Расширение для браузера — это компьютерная программа, работающая в связке с обозревателем и наделяющая его новыми возможностями. Терминология при этом в разных программах может отличаться. Они могут назваться дополнениями (add-on), плагинами (plug-in), расширениями (extension), но сути это не меняет.

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

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

Дополнения в Mozilla Firefox

Чтобы перейти к настройке дополнений в Firefox щелкните в верхнем меню пункт «Инструменты» ⇒ «Дополнения» или в правом верхнем углу иконку и затем выбрать пункт «Дополнения», так же можно воспользоваться комбинацией клавиш++. Откроется новая вкладка, где можно увидеть установленные дополнения, настроить их, а так же удалить или наоборот установить новые.

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

Чтобы установить новые, просто выберете пункт «Получить дополнения» и выбирайте нужное вам. Так же можно воспользоваться этой ссылкой, здесь они систематизированы по категориям, популярности, рейтингам и так далее. Щелкнув по конкретному дополнению, вы увидите его описание, версию, автора, рейтинг и отзывы пользователей. Чтобы установить понравившееся дополнение нажмите зеленую кнопку «Add to Firefox». Будет произведена загрузка и после ее окончания появится окно с предупреждениями и просьбой подтвердить установку дополнения. Большинству дополнений для установки требуется перезагрузка браузера, о чем появится соответствующее сообщение.

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

Расширения в Google Chrome

Чтобы управлять расширениями в Chrome перейдите по пути иконка  ⇒ «Дополнительные инструменты» ⇒ «Расширения». Здесь в общем все аналогично Firefox, показывается список установленных расширений, краткая информация о нем и иконки отключения и удаления. В интернет-магазине Chrome расширения так же сгруппированы по категориям и есть поиск. Чтобы установить понравившееся расширение нажмите на синюю кнопку «+бесплатно».

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

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

Браузер Internet Explorer

Здесь данный функционал называется надстройками и доступен по адресу «Сервис» ⇒ «Настроить надстройки». Здесь они сгруппированы по типу. Выделив надстройку щелчком мыши, получаем доступ к управлению ей. Так же в левом нижнем углу окна, есть ссылка на коллекцию надстроек, откуда их можно установить в Internet Explorer.

Расширения в Opera

Поскольку последние версии Opera являются родственниками Chrome, то и выглядит все довольно похоже. Доступ к управлению можно получить, щелкнув значок в левом верхнем углу и выбрав в контекстном меню пункт «Расширения» или просто нажав комбинацию клавиш ++. Здесь можно управлять уже установленными, чтобы установить новое, выберете пункт «Добавить расширение».

В каталоге расширения сгруппированы по категориям, есть возможность поиска. Можно указать, на каком языке показывать расширения. Выбрав приглянувшееся расширение, его можно установить в один клик щелкнув зеленую кнопку «+Добавить в Opera».

Дополнения в Яндекс.браузер

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

Браузер основан на движке WebKit, который используют так же Google Chrome и Opera, поэтому они во многом похожи между собой. Несмотря на это в Яндексе пошли своим путем. Здесь тоже теперь разрешена установка только из доверенных источников, сложность в том, что у Яндекса фактически нет своего каталога.

В разделе «Дополнения» браузера есть всего полтора десятка дополнений, правда их можно поставить одним щелчком мыши. Не думайте, что все так плохо. У него есть родственники с каталогами, из которых так же разрешена установка. Поэтому можно смело идти на Chrome Web Store и выбирать нужную программу. Так же обещана поддержка каталога расширений Opera Addons от одноименного браузера, правда у расширения должно быть указано «Совместимо с Яндекс.Браузером». Ранее установленные расширения из других источников будут автоматически отключаться при перезапуске.

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *