Chrome - самый популярный веб-браузер на планете. Согласно статистике statuscenter о доле рынка браузеров, браузер Chrome занимает Огромные 65% рынка настольных браузеров по состоянию на конец 2017 года.
Благодаря такой определяющей рынок власти он стал Расширение для разработки и сборки Chrome в браузере Chrome имеет приоритет. То же самое и с расширениями: Chrome предлагает пользователям самую большую базу расширений на сегодняшний день с десятками тысяч расширений, тем и приложений в Интернет-магазине Chrome.
Если вы хотите получить поддержку в этом направлении, вы можете создать собственное расширение для Chrome. Вам просто понадобятся некоторые базовые навыки веб-разработки (HTML, CSS и JavaScript), а также чайная ложка JSON, чтобы связать все это воедино.
В этом посте мы рассмотрим инфраструктуру, необходимую для создания базового расширения в Chrome. Более подробно о возможностях см. Руководство разработчика расширений Chrome.
Написание базового расширения для Chrome
В этом руководстве мы создадим базовое расширение Chrome, которое при нажатии отображает простое всплывающее окно. Нам понадобятся два важных файла: значок («icon.png»), файл HTML («popup.html») и важный манифест («manifest.json»). Все эти файлы будут доступны внутри каталога с именем вашего расширения. В данном случае это называется «Привет, мир».
Расширение Chrome определяется его заявлением. Этот фрагмент из json chrome показывает, как интерпретировать расширение, какие файлы загружать и как взаимодействовать с пользователем.
Файл манифеста для нашего базового расширения выглядит так:
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
} Этот манифест поместит значок на панель инструментов пользователя, который при загрузке загрузит содержимое файла с именем «.всплывающее окно.html. Вот редкое содержание остального контента:
манифест_версия Chrome сообщает версию кодировки манифеста, с которым вы работаете. Для недавних расширений вам нужно установить этот параметр на 2.
имя Показывает имя, которое расширение будет отображаться в Chrome Store, и «chrome: // extensions».
описание Отображает описательный текст, отображаемый на «chrome: // extensions».
действие браузера Загружает значок на панель инструментов. Он также позволяет руководству реагировать на ввод пользователя путем отображения подсказки, всплывающего окна или значка. Проверять Полный список всего «Browser_action», которое может быть выполнено.
default_icon Отображает путь к значку из каталога расширений.
default_popup Отображает путь к файлу, который будет загружен при нажатии значка расширения.
Разрешения Определите функциональную область пристройки. activeTab - самый распространенный, позволяющий добавить доступ к вкладке в самом начале. Google предоставляет список Со всеми разрешениями, которые вы могли запросить Одно из дополнений.
Если вы хотите глубоко погрузиться во все, что они могут провозгласить Заявление о добавлении Chromeсм. Документы Google в данных о расширениях.
Написание базового расширения Chrome: всплывающие окна
Теперь, когда мы написали наше утверждение, мы можем увидеть, что нам будет показано в добавлении. Это связано с файлом popup.html, который будет отображаться при загрузке расширения. Вот что мы будем использовать в этом проекте:
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html> Как видите, это сгенерирует текст в стиле CSS. Если вы хотите добавить в свое расширение внешний JavaScript или CSS, для этого потребуется написать сценарии в манифесте под ключом content_scripts. Как только вы укажете эту опцию в манифесте, вы сможете загружать эти скрипты, как обычно.
Написание базового расширения Chrome: загрузка в Chrome
После того, как мы напишем базовый код для нашего расширения и найдем соответствующий код, мы можем загрузить его в Chrome.
1. Перейдите в «chrome: // extensions» и включите «Режим разработчика», установив флажок в правом верхнем углу.
2. Нажмите кнопку «Загрузить распакованное расширение…» и выберите место назначения расширения.
3. После загрузки расширения вы увидите его значок в строке меню.
4. Щелкните расширение, чтобы увидеть его эффект (очень просто).
Заключение: расширьте расширение Chrome
После того, как ваше расширение будет завершено и готово к публикации, вам нужно будет создать учетную запись разработчика расширения Chrome. Это не совсем простой процесс, но Google предоставляет полные инструкции. Чтобы опубликовать расширение Chrome здесь.
Очевидно, вы можете многое сделать с расширением Chrome, но это выходит за рамки этой статьи. Если вы хотите узнать больше обо всех возможностях расширений Chrome, ознакомьтесь с нашим руководством. Расширения разработчика Google Chrome.
