—»     —»   Как создать расширение для Google Chrome
  Раздел: Браузеры   Нет комментариев  

Как создать расширение для Google Chrome

Как создать расширение для Google Chrome

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

Также следует отметить, что вы можете создавать собственные расширения используя лишь HTML, CSS и javascript, и поэтому многим из вас не придется изучать новые языки программирования. Вы уже все знаете, вам нужно лишь понять, как эти знания можно применить на Chrome.

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

О расширениях Chrome

Первое, что вам нужно знать, это то, что существует два типа расширений:

* Операции на страницах, зависящие от страниц
* Операции в браузере, которые не зависят от страниц

Взгляните на такую ситуацию:

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

Первая иконка за пределами адресной строки – это камера, которая демонстрирует нам пример расширения для создания скриншотов страниц. Оно всегда доступно и не зависит от страниц. Это операция в браузере, которая не зависит от страниц.

Сегодня мы расскажем вам о создании простого браузерного расширения.

Создаем расширение

Первое, что нам нужно сделать, это создать root-папку для нашего расширения и добавить туда manifest.json, в котором будет содержаться JSON-объект с характеристиками нашего расширения:

{
“name": "BrowserAction",
"version": "0.0.1",
"manifest_version": 2,
}

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

"background": {
“scripts”: [“main.js”, "script.js"]
}

Нам также нужно внедрить сюда объект browser_action, - здесь будет размещаться простой UI нашего расширения. Так как это браузерная операция, и при нажатии кнопки на панели инструментов, скорее всего, будет вылезать всплывающее окно, этот объект позволяет нам как раз-таки вписать исходный код этого окна: иконки, видимые пользователю, заголовок и так далее:

"browser_action": {
“default_icon”: “icon.png”,
“default_title”: "The Title",
"default_popup": "popup.html"
}

Если мы добавим это к нашему манифесту, то получим нечто вроде следующего:

{
"name": "BrowserAction",
"version": "0.0.1",
"manifest_version": 2,
"background": {
“scripts": [“main.js”, "script.js"]
}
"browser_action": {
"default_icon": "icon.png",
"default_title": "The Title",
"default_popup": "popup.html"
}
}

После того, как мы все это проделаем, все что останется сделать, это создать непосредственно само приложение.

Расширение

Задача данного руководства заключалась в том, чтобы создать простую jQuery-пипетку при помощи javascript-плагина Spectrum. Итак, наш popup.html будет выглядеть следующим образом:

<head>
<title>Simple Extension</title>
<link rel='stylesheet' href='spectrum.css' />
</head>
<body>
<section>
<input type=‘text' class="picker"/>
<em id=‘picker-log'></em>
</section>
<script src="jquery.js"></script>
<script src='spectrum.js'></script>
<script src="popup.js"></script>
</body>

Как видно, все, что мы сделали, это лишь добавили раздел, который содержит два необходимых элемента, чтобы Spectrum заработал, а затем запустили все файлы вроде jquery, spectrum.js, css-файл, а также popup.js, где и будет инициализироваться код spectrum.

Наш javascript-код состоит из всего 6 строк ввиду простоты самого плагина:

$(".picker").spectrum({
color: "#fff",
change: function(color) {
$("#picker-log").text("The Color is: " + color.toHexString());
}
});

(этот код – это лишь пример, и он не трогает Chrome API, так как нам нужно было просто продемонстрировать то, как использовать простой HTML/CSS и javascript коды для создания того, что вам нужно в браузере Chrome).

Тестируем приложение

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

Поэтому давайте протестируем его локально. Для этого, откройте в Chrome chrome://extensions, и убедитесь, что у вас включен режим разработчика (Developer Mode). Если да, то можете загрузить распакованное приложение или перетащить папку с рабочего стола, и тогда ваше приложение немедленно отобразится на панели инструментов. Это сработает только в режиме разработчика. Если вы хотите загрузить расширение в Google Store, то вам нужно будет запаковать приложение, так как Chrome Store позволяет загружать файлы только в формате .crx.

В завершение

Расширения для Chrome – это не так уж сложно и страшно, как казалось ранее. И создавать их можно довольно быстро, буквально за несколько минут.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Google Chrome
Опубликовал Design FactoRy   Прочитано (раз): 10665   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031