Учиться чему-то новому всегда интересно и весело. Это может быть немного сложно для новичков, но с людьми, готовыми помочь вам, особенно в вашей организации, все может быть достижимо. Разработка расширения для Chrome была первым проектом, порученным мне в качестве стажера в Headhonchos.com, и благодаря искренним усилиям нашей технической команды я завершил проект всего за 4 недели, учитывая, что начал с нуля. Расширение уже используется на официальном сайте. В этой статье я делюсь своим опытом и трудностями, с которыми я столкнулся при разработке этого расширения.

Что делает расширение?

Расширения позволяют добавлять функциональные возможности в Chrome без изменения внутреннего кода. Основные технологии, используемые при разработке расширения для Chrome (Basic HTML, CSS, JavaScript), аналогичны тем, которые используются в веб-разработке. Следовательно, любой веб-разработчик, обладающий лишь базовыми знаниями основных технологий, может с легкостью разработать расширение для Chrome.

Функционирование расширения Chrome

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

Следующим важным моментом, о котором нужно позаботиться, является понимание контекста. Есть два разных контекста. Один — это контекст расширения, в котором запускаются такие файлы, как popup.html, popup.js, background.js, а другой — контекст веб-страницы/текущей страницы, которую мы посещаем. Файл типа content.js запускается в контексте текущей веб-страницы.

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

Как упоминалось выше, сценарий содержимого выполняется в другом контексте, чем контекст расширения. Если мы намерены создать расширение Chrome, которое выполняет некоторые действия на текущей странице и позволяет отображать результаты в среде расширения, между двумя контекстами требуется какой-то механизм связи. Это достигается за счет использования передачи сообщений. Передача сообщений — это двусторонний процесс, который включает отправку запроса на передачу сообщения либо из context.js, либо из poup.js. Другой файл, popup.js или context.js, отвечает на запрос передачи сообщения желаемой информацией.

Что писать и куда?

Перед разработкой расширения Chrome важно четко понимать, в каких контекстах будет работать каждый из файлов. Также следует четко определиться с файлом, который будет использоваться для написания кода. Если мы хотим, чтобы наше расширение собирало информацию с открытой в данный момент веб-страницы, мы должны указать логику/код для этого в content.js. Точно так же логика того, что отображается пользователю, когда он щелкает значок расширения, должна быть указана в popup.html и popup.js. Если какая-то логика должна работать непрерывно в контексте расширения, без ведома пользователя, она должна быть указана в background.js.

Порядок выполнения файлов

Одна из самых важных вещей, о которой следует помнить при разработке расширения Chrome, — это знать последовательность, в которой выполняются различные файлы в расширении Chrome. При загрузке расширения Chrome для тестирования (в «Chrome://extensions» в режиме разработчика) manifest.json должен быть в правильном формате. Если этого не произойдет, расширение не загрузится. Manifest.json — это первый файл, который обрабатывается после того, как мы пытаемся загрузить наше расширение. Как только файл манифеста будет в правильном формате, расширение будет установлено. После установки первым файлом, который запускается, когда мы нажимаем на значок расширения, является popup.html, за которым следует popup.js. Background.js работает в фоновом режиме, а content.js — в контексте веб-страницы, указанной в разделе контекста файла manifest.json. Понимание порядка выполнения файлов — одна из основных концепций разработки расширения для Chrome. Нужно иметь четкое понимание, иначе они могут оказаться в ситуациях, когда они могут пытаться получить доступ к значениям, недоступным в текущем контексте. Это еще одна часть, где я столкнулся с трудностями, но с помощью кооперативного характера товарищей по команде я получил четкое понимание этого. Поверьте мне; вы получите более широкое представление о функциональности расширения Chrome, как только разберетесь с этим.

На что я ссылаюсь?

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

  1. Официальная документация расширения Chrome доступна по адресу: https://developer.Chrome.com/extensions/ — очень хороший ресурс.
  2. Официальный ютуб-туториал по разработке расширения для Chrome (серия из 40 лекций)
  3. Stackoverflow: универсальное решение для всех проблем программирования.