Введение

Расширения 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».

Установка вашего расширения

  1. Откройте браузер Chrome.
  2. Go tochrome://extensions.
  3. Включите режим разработчика.
  4. Нажмите кнопку «Загрузить распакованное расширение».
  5. Выберите ZIP-файл, содержащий ваше расширение.
  6. Нажмите «Открыть».
  7. Ваше расширение будет установлено и доступно на панели расширений Chrome.

Публикация вашего расширения

Если вы довольны своим расширением, вы можете опубликовать его в Интернет-магазине Chrome. Сделать это:

  1. Перейдите на панель инструментов разработчика Интернет-магазина Chrome и войдите в систему.
  2. Нажмите кнопку «Добавить новый элемент».
  3. Выберите «Расширение» из списка типов элементов.
  4. Введите имя и описание для вашего расширения.
  5. Выберите разрешения, необходимые вашему расширению.
  6. Загрузите ZIP-файл вашего расширения.
  7. Добавьте скриншот и значок для своего расширения.
  8. Напишите правила проверки для своего расширения.
  9. Нажмите кнопку «Отправить на проверку».

Ваше расширение будет проверено Google и, если оно будет одобрено, оно будет опубликовано в Интернет-магазине Chrome.

Вот некоторые дополнительные вещи, которые следует учитывать при публикации расширения:

  • Ваше расширение должно быть качественным и хорошо написанным.
  • Ваше расширение должно быть безопасным и надежным.
  • Ваше расширение должно соответствовать правилам Интернет-магазина Chrome.

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

Заключение

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