Введение
Расширения Chrome — это небольшие программы, которые можно добавить в веб-браузер Google Chrome, чтобы добавить новые функции или изменить способ работы браузера. Их можно использовать для блокировки рекламы, изменения внешнего вида браузера или добавления новых функций на веб-сайты.
Создание расширения для Chrome — относительно простой процесс, который может стать отличным способом узнать больше о веб-разработке. В этой статье мы покажем вам, как создать свое первое расширение для Chrome.
Начиная
Первым шагом в создании расширения Chrome является создание нового каталога для вашего расширения. Имя каталога должно совпадать с именем вашего расширения. Например, если вы создаете расширение под названием «Мое первое расширение», имя каталога должно быть «мое-первое-расширение».
После того, как вы создали каталог, вам нужно будет создать файл манифеста. Файл манифеста — это файл JSON, который содержит информацию о вашем расширении, такую как его имя, версия и разрешения.
Ниже приведен пример файла манифеста:
{ "name": "My First Extension", "version": "1.0", "description": "This is my first Chrome extension.", "manifest_version": 2, "content_scripts": [ { "matches": ["*://*/*"], "js": ["contentscript.js"] } ], "permissions": ["tabs", "contextMenus"] }
- Свойства «имя» и «версия» обязательны.
- Свойство description является необязательным. Для свойства manifest_version должно быть установлено значение 2 или 3.
- Свойство content_scripts — это массив объектов, определяющих сценарии контента. Скрипты контента — это файлы JavaScript, которые запускаются в контексте веб-страницы. Свойство matches указывает URL-адреса, на которых должен выполняться сценарий контента. Свойство «js» указывает путь к файлу сценария содержимого.
- Свойство «разрешения» представляет собой массив строк, в котором перечислены разрешения, необходимые вашему расширению. Необходимые разрешения будут зависеть от того, что делает ваше расширение. Например, если вашему расширению требуется доступ к вкладкам, открытым пользователем, вам нужно будет добавить разрешение «вкладки».
Создание сценария контента
Сценарий контента — это файл JavaScript, который запускается в контексте веб-страницы. Сценарии содержимого можно использовать для изменения содержимого веб-страницы или для добавления новых функций на веб-страницу.
Чтобы создать сценарий содержимого, создайте новый файл JavaScript и сохраните его в том же каталоге, что и файл манифеста. Имя файла должно совпадать с именем скрипта контента, но без расширения «.js». Например, если имя вашего сценария содержимого — «contentscript», имя файла должно быть «contentscript.js».
Ниже приведен пример сценария содержимого:
// This content script adds a button to the top of every web page. alert("hello my first extension")
Приведенный выше сценарий контента будет предупреждать о каждой странице, которую посетит пользователь.
Создание фонового скрипта
Фоновый скрипт — это файл JavaScript, который работает в фоновом режиме браузера Chrome. Фоновые сценарии можно использовать для выполнения задач, которые не нужно выполнять в контексте веб-страницы, таких как получение данных из Интернета или взаимодействие с другими расширениями.
Чтобы создать фоновый сценарий, создайте новый файл JavaScript и сохраните его в том же каталоге, что и файл манифеста. Имя файла должно быть «background.js».
Ниже приведен пример фонового скрипта:
// This background script fetches the latest news headlines from Google News. var xhr = new XMLHttpRequest(); xhr.open("GET", "https://news.google.com/news/rss?q=technology"); xhr.onload = function() { if (xhr.status == 200) { var newsHeadlines = JSON.parse(xhr.responseText); // if the response is in json form // Do something with the news headlines. } else { // Handle the error. } }; xhr.send();
Приведенный выше фоновый скрипт извлекает заголовки последних новостей из Google Новостей. Затем заголовки анализируются в объект JSON, который может использоваться расширением.
Упаковка вашего расширения
После того, как вы создали файл манифеста, сценарий содержимого и фоновый сценарий, вам необходимо упаковать расширение. Для этого создайте новый ZIP-файл и добавьте в него следующие файлы:
- Файл манифеста
- Файл сценария контента
- Файл фонового сценария
- Любые другие файлы, которые нужны вашему расширению, например изображения или файлы CSS.
Имя ZIP-файла должно совпадать с именем вашего расширения с расширением «.zip». Например, если имя вашего расширения «Мое первое расширение», имя ZIP-файла должно быть «мое-первое-расширение.zip».
Установка вашего расширения
- Откройте браузер Chrome.
- Go to
chrome://extensions
. - Включите режим разработчика.
- Нажмите кнопку «Загрузить распакованное расширение».
- Выберите ZIP-файл, содержащий ваше расширение.
- Нажмите «Открыть».
- Ваше расширение будет установлено и доступно на панели расширений Chrome.
Публикация вашего расширения
Если вы довольны своим расширением, вы можете опубликовать его в Интернет-магазине Chrome. Сделать это:
- Перейдите на панель инструментов разработчика Интернет-магазина Chrome и войдите в систему.
- Нажмите кнопку «Добавить новый элемент».
- Выберите «Расширение» из списка типов элементов.
- Введите имя и описание для вашего расширения.
- Выберите разрешения, необходимые вашему расширению.
- Загрузите ZIP-файл вашего расширения.
- Добавьте скриншот и значок для своего расширения.
- Напишите правила проверки для своего расширения.
- Нажмите кнопку «Отправить на проверку».
Ваше расширение будет проверено Google и, если оно будет одобрено, оно будет опубликовано в Интернет-магазине Chrome.
Вот некоторые дополнительные вещи, которые следует учитывать при публикации расширения:
- Ваше расширение должно быть качественным и хорошо написанным.
- Ваше расширение должно быть безопасным и надежным.
- Ваше расширение должно соответствовать правилам Интернет-магазина Chrome.
Если вы не уверены в чем-либо из вышеперечисленного, дополнительную информацию можно найти на панели инструментов разработчика Интернет-магазина Chrome.
Заключение
Создание расширения Chrome — относительно простой процесс. Следуя инструкциям в этой статье, вы сможете быстро создать собственное расширение для Chrome.