Обзор архитектуры

Расширения представляют собой заархивированные пакеты HTML, CSS, JavaScript, изображений и других файлов, используемых в веб-платформе, которые настраивают работу браузера Google Chrome. Расширения создаются с использованием веб-технологий и могут использовать те же API, которые браузер предоставляет открытому интернету.

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

Рассматривайте расширения как инструмент, позволяющий сделать браузер Chrome максимально персонализированным.

Файлы расширений

Расширения различаются по типам файлов и количеству каталогов, но для всех них требуется [манифест][docs-manifest]. Некоторые базовые, но полезные расширения могут состоять только из манифеста и его значка на панели инструментов.

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

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}

Расширения должны иметь значок, который размещается на панели инструментов браузера. Значки на панели инструментов обеспечивают легкий доступ и позволяют пользователям видеть, какие расширения установлены. Большинство пользователей будут взаимодействовать с расширением, использующим всплывающее окно , щелкая по значку.

Это расширение Google Mail Checker использует действие браузера :

Скриншот расширения Google Mail Checker

Это расширение Mappy использует скрипт действий страницы и скрипт содержимого :

Скриншот расширения Mappy

Ссылка на файлы

На файлы расширения можно ссылаться с помощью относительного URL-адреса, как и на файлы на обычной HTML-странице.

<img src="images/my_image.png">

Кроме того, доступ к каждому файлу можно получить, используя абсолютный URL-адрес.

chrome-extension://EXTENSION_ID/PATH_TO_FILE

В абсолютном URL-адресе EXTENSION_ID — это уникальный идентификатор, который система расширений генерирует для каждого расширения. Идентификаторы всех загруженных расширений можно посмотреть, перейдя по адресу chrome://extensions . PATH_TO_FILE — это путь к файлу в корневой папке расширения; он соответствует относительному URL-адресу.

В процессе работы над распакованным расширением его идентификатор может изменяться. В частности, идентификатор распакованного расширения изменится, если расширение будет загружено из другой директории; идентификатор снова изменится при упаковке расширения. Если код расширения использует абсолютный URL-адрес, он может использовать метод chrome.runtime.getURL() , чтобы избежать жесткого кодирования идентификатора во время разработки.

Архитектура

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

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

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

Элементы пользовательского интерфейса

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

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

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

Окно браузера, содержащее действие страницы и отображающее всплывающее окно.

Сценарии контента

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

Окно браузера с действием страницы и скриптом содержимого.

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

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

Страница параметров

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

Использование API Chrome

Помимо доступа к тем же API, что и веб-страницы, расширения также могут использовать API, специфичные для расширений , что обеспечивает тесную интеграцию с браузером. И расширения, и веб-страницы могут использовать стандартный метод window.open() для открытия URL-адреса, но расширения могут указать, в каком окне должен отображаться этот URL-адрес, используя вместо этого метод tabs.create из API Chrome.

Асинхронные и синхронные методы

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

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

Если бы метод tabs.query был синхронным, он мог бы выглядеть примерно так, как показано ниже.

//THIS CODE DOESN'T WORK
var tab = chrome.tabs.query({'active': true}); //WRONG!!!
chrome.tabs.update(tab.id, {url:newUrl});
someOtherFunction();

Этот подход потерпит неудачу, потому что query() является асинхронным. Он возвращает результат, не дожидаясь завершения работы, и не возвращает значение. Метод является асинхронным, если параметр обратного вызова доступен в его сигнатуре.

// Signature for an asynchronous method
chrome.tabs.query(object queryInfo, function callback)

Для корректного запроса к вкладке и обновления её URL-адреса расширение должно использовать параметр обратного вызова.

//THIS CODE WORKS
chrome.tabs.query({'active': true}, function(tabs) {
  chrome.tabs.update(tabs[0].id, {url: newUrl});
});
someOtherFunction();

В приведенном выше коде строки выполняются в следующем порядке: 1, 4, 2. Вызывается функция обратного вызова, указанная в query() , после чего выполняется строка 2, но только после того, как становится доступна информация о текущей выбранной вкладке. Это происходит некоторое время после возврата из query() . Хотя update() является асинхронной функцией, код не использует параметр обратного вызова, поскольку расширение ничего не делает с результатами обновления.

// Synchronous methods have no callback option and returns a type of string
string chrome.runtime.getURL()

Этот метод синхронно возвращает URL-адрес в виде string и не выполняет никакой другой асинхронной работы.

Более подробная информация

Для получения более подробной информации ознакомьтесь с документацией по API Chrome и посмотрите следующее видео.

Взаимодействие между страницами

Различные компоненты расширения часто должны взаимодействовать друг с другом. Разные HTML-страницы могут находить друг друга, используя методы chrome.extension , такие как getViews() и getBackgroundPage() . Как только страница получает ссылку на другие страницы расширения, первая из них может вызывать функции на других страницах и манипулировать их DOM. Кроме того, все компоненты расширения могут получать доступ к значениям, хранящимся с помощью API хранилища , и взаимодействовать посредством передачи сообщений .

Сохранение данных и режим инкогнито

Расширения могут сохранять данные, используя API хранилища , API веб-хранилища HTML5 или отправляя запросы к серверу, которые приводят к сохранению данных. Когда расширению необходимо что-то сохранить, сначала следует определить, находится ли оно в режиме инкогнито. По умолчанию расширения не работают в режимах инкогнито.

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

Чтобы определить, находится ли окно в режиме инкогнито, проверьте свойство incognito соответствующего объекта tabs.Tab или windows.Window .

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

Сделайте следующий шаг

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

  • Подробнее о параметрах отладки расширений можно узнать в руководстве по отладке .
  • Расширения Chrome имеют доступ к мощным API, значительно превосходящим возможности открытого веб-пространства. Документация по API chrome.* подробно описывает каждый из этих API.
  • В разделе « Обзор разработки расширений» содержится множество дополнительных ссылок на документацию, относящуюся к созданию сложных расширений.