Работа с контекстными идентичностями

Многим людям необходимо или желательно взаимодействовать с веб-сайтами, используя несколько ролей. У них могут быть учетные записи для работы в Интернете и личной электронной почты. Они могут выходить из своих учетных записей в социальных сетях перед доступом к онлайн-шопингу, чтобы убедиться, что никакие скрипты отслеживания на сайтах покупок не смогут получить доступ к их активности в социальных сетях. Для удовлетворения этих требований пользователи часто работают со стандартным и частным окном браузера или с двумя разными браузерами.

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

Для получения дополнительной информации об этой функции см.:

API для работы с контекстными идентичностями

Для использования функций контекстной идентичности в расширениях вам понадобятся два API:

contextualIdentities, которые позволяют расширению добавлять, запрошивать, обновлять и удалять контекстные идентичности.
tabs или, точнее, tabs.create, которые позволяют создавать вкладку, использующую контейнер контекстной идентичности (хранилище куки).

Разрешения

Для использования API contextualIdentities необходимо включить разрешение «contextualIdentities» в файле разрешений вашего файла manifest.json. Вам не нужно разрешение «tabs» для использования tabs.create, однако вам необходимо разрешение «cookies» для указания контейнера куки, который вы хотите использовать для вкладки.

Пример пошагового руководства

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

Вот короткое видео работы расширения:

manifest.json

Основные особенности файла manifest.json:

запрос разрешений:

  "permissions": [
      "contextualIdentities",
      "cookies"
  ],

указание кнопки на панели инструментов (browseAction), предоставляющей доступ к функциям расширения:

  "browser_action": {
    "browser_style": true,
    "default_title": "Contextual Identities",
    "default_popup": "context.html",
    "default_icon": {
      "128": "identity.svg"
    }

context.html

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

<body>
  <div class="panel">
    <div id="identity-list"></div>
  </div>
  <script src="context.js"></script>
</body>

context.js

Все функции расширения реализованы в context.js, который вызывается при отображении всплывающего окна на панели инструментов.

Скрипт сначала получает элемент 'identity-list' из context.html.

let div = document.getElementById("identity-list");

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

if (browser.contextualIdentities === undefined) {
  div.innerText = 'browser.contextualIdentities not available. Check that the privacy.userContext.enabled pref is set to true, and reload the add-on.';
} else {

Firefox устанавливается с отключенной функцией контекстной идентичности, она включается при установке расширения, использующего API contextualIdentities. Однако пользователь всё ещё может отключить эту функцию, используя опцию на странице настроек (about:preferences), поэтому требуется проверка.

Теперь скрипт использует contextualIdentities.query, чтобы определить, существуют ли какие-либо контекстные идентичности в браузере. Если нет, в всплывающее окно добавляется сообщение, и скрипт останавливается.

  browser.contextualIdentities.query({})
    .then((identities) => {
      if (!identities.length) {
        div.innerText = 'No identities returned from the API.';
        return;
      }

Если контекстные идентичности присутствуют (Firefox поставляется с четырьмя идентичностями по умолчанию), скрипт перебирает каждую из них, добавляя её имя, стилизованное в выбранном цвете, в элемент <div>. Функция createOptions() затем добавляет параметры «создать» или «закрыть все» в <div> перед добавлением во всплывающее окно.

     for (const identity of identities) {
       const row = document.createElement('div');
       const span = document.createElement('span');
       span.className = 'identity';
       span.innerText = identity.name;
       span.style = `color: ${identity.color}`;
       console.log(identity);
       row.appendChild(span);
       createOptions(row, identity);
       div.appendChild(row);
     }
  });
}

function createOptions(node, identity) {
  for (const option of ['Create', 'Close All']) {
    const a = document.createElement('a');
    a.href = '#';
    a.innerText = option;
    a.dataset.action = option.toLowerCase().replace(' ', '-');
    a.dataset.identity = identity.cookieStoreId;
    a.addEventListener('click', eventHandler);
    node.appendChild(a);
  }
}

Теперь скрипт ждёт, пока пользователь выберет опцию во всплывающем окне.

function eventHandler(event) {

Если пользователь нажимает опцию создания вкладки для идентичности, она открывается с помощью tabs.create, передавая идентификатор хранилища куки идентичности.

if (event.target.dataset.action === "create") {
  browser.tabs.create({
    url: "about:blank",
    cookieStoreId: event.target.dataset.identity,
  });
}

Если пользователь выбирает опцию закрытия всех вкладок для идентичности, скрипт выполняет tabs.query для всех вкладок, использующих хранилище куки идентичности. Затем скрипт передаёт этот список вкладок в tabs.remove.

  if (event.target.dataset.action === 'close-all') {
    browser.tabs.query({
      cookieStoreId: event.target.dataset.identity
    }).then((tabs) => {
      browser.tabs.remove(tabs.map((i) => i.id));
    });
  }
  event.preventDefault();
}

Дополнительная информация

Если вы хотите узнать больше о API contextualIdentities, ознакомьтесь с:

Ссылка на API contextualIdentities.
Исходный код расширения Multi-Account Containers. Это код расширения Firefox Multi-Account Containers. Это расширение предоставляет пользователям расширенные возможности для контекстных идентичностей, такие как возможность долго нажимать на кнопку новой вкладки, а затем выбрать идентичность для использования в новой вкладке. Оно действительно демонстрирует возможности, предлагаемые контекстными идентичностями, и стоит взглянуть на него.

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities