Внутреннее устройство расширения

Расширение состоит из набора файлов, упакованных для распространения и установки. В этой статье мы быстро рассмотрим файлы, которые могут присутствовать в расширении.

manifest.json

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

Этот манифест также может содержать указатели на несколько других типов файлов:

  • Background pages: Реализует долгоиграющую логику.
  • Иконки для расширения и любых кнопок, которые оно может определить.
  • Sidebars, popups, and options pages: HTML-документы, которые предоставляют содержимое для различных компонентов пользовательского интерфейса.
  • Content scripts: JavaScript сценарии вашего расширения, которые будут исполняться на веб-страницах.
  • Web-accessible resources: Делает контент вашего расширения видимым для веб-страниц и скриптов.

Для получения подробной информации см. справочную страницу manifest.json

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

Фоновые скрипты

Расширения часто должны поддерживать долгосрочное состояние или выполнять долгосрочные операции независимо от срока жизни любой конкретной веб-страницы или окна браузера. Для этого нужны фоновые сценарии.

Фоновые сценарии загружаются сразу после загрузки расширения и остаются загруженными до тех пор, пока расширение не будет отключено или удалено. вы можете использовать любой API расширений в сценарии, если вы запросили необходимые разрешения.

Спецификации фоновых скриптов

Вы можете включить фоновый скрипт, используя background ключ в «manifest.json»:

json
// manifest.json

"background": {
  "scripts": ["background-script.js"]
}

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

Вместо указания несколько фоновых сценариев вы можете указать фоновую страницу, которая так же преимущества поддержки ES6 модулей:

manifest.json:

json
// manifest.json

"background": {
  "page": "background-page.html"
}

background-page.html:

html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script type="module" src="background-script.js"></script>
  </head>
</html>

Окружение фоновых скриптов

DOM APIs

Фоновые скрипты запускаются в пространстве специальной страницы, называемой фоновой. Это даёт им доступ к глобальному window объекту, а так же ко всем его DOM APIs.

WebExtension API

Фоновые скрипты могут использовать любые API расширений, если расширение имеет необходимые разрешения.

Многоцелевой доступ

Фоновые скрипты могут осуществлять XHR запросы к любому домену, если расширение имеет host разрешения.

Web-содержимое

Фоновые скрипты не получают прямого доступа к веб-страницам. Однако они могут загружать скрипты содержимого на веб-страницы и взаимодействовать с этими скриптами с помощью API передачи сообщений.

Политика безопасности содержимого

Фоновые скрипты ограничены в выполнении потенциально опасных операций, таких как eval(), через политику безопасности содержимого. Подробнее см. Content Security Policy.

Боковые панели (sidebar), всплывающие окна (popup), страницы настроек

Ваше расширение может иметь разнообразные компоненты интерфейса, определённые в HTML документах:

Для каждого из этих компонентов вы создаёте HTML файл и помещаете специальную информацию в manifest.json. HTML файл может в себя включать CSS и JavaScript файлы, как и любая web-страница.

Всё это типы веб-страниц расширения, и, в отличие от нормальных веб-страниц, ваш JavaScript может использовать все привелегии WebExtension API, как и ваши фоновые скрипты. Они даже могут получить доступ к переменным в фоновой странице, используя runtime.getBackgroundPage().

Веб-страницы расширения

Вы также можете включить HTML документы в ваше расширение, даже если они не будут включены в какой-либо существующий компонент пользовательского интерфейса. В отличие от документов, которые вы можете предоставить для боковых панелей, всплывающих окон или страниц настроек, эти документы не содержатся в manifest.json. Однако, они также имеют такой же доступ к WebExtension API, как и фоновые скрипты.

Вы можете загрузить такую страницу, используя windows.create() или tabs.create().

Подробнее см. Extension pages.

Встраиваемые скрипты

Используйте встраиваемые скрипты для доступа и изменения веб-страниц. Встраиваемые скрипты загружаются в веб-страницу и исполняются в контексте данной конкретной страницы.

Встраиваемые скрипты предоставляются расширением; этим они отличаются от скриптов, загруженных самой веб-страницей, включая тех, что загружены с помощью <script> элемента веб-страницы.

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

В отличие от обычных скриптов, они могут:

  • Осуществлять XHR запросы.
  • Использовать часть API расширений.
  • Обмениваться сообщениями с их фоновыми скриптами и таким образом иметь доступ ко всему WebExtension API.

Встраиваемые скрипты не могут напрямую взаимодействовать с обычными скриптами на странице, но они могут обмениваться сообщениями с помощью стандартного window.postMessage() API.

Обычно, когда мы говорим о встраиваемых скриптах, мы отсылаемся к JavaScript, но вы так же можете внедрить CSS в веб-страницы, используя этот же механизм.

Подробнее см. content scripts.

Веб-доступные ресурсы

Веб-доступные ресурсы - это ресурсы вроде изображений, HTML, CSS и JavaScript, которые вы включаете в расширение и хотите сделать доступными для встраиваемых скриптов и оригинальных скриптов веб-страницы. Такие ресурсы могут быть доступны скриптам через специальную URI схему.

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

Подробнее см. web_accessible_resources секцию manifest.json.