Эта страница переведена с помощью Cloud Translation API.

Управление вкладками

Создайте свой первый менеджер вкладок.

Обзор

В этом руководстве создан менеджер вкладок для организации вкладок расширений Chrome и документации Chrome Web Store.

В этом руководстве мы объясним, как выполнить следующие действия:

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

Прежде чем начать

В этом руководстве предполагается, что у вас есть базовый опыт веб-разработки. Мы рекомендуем ознакомиться с руководством Hello World для ознакомления с рабочим процессом разработки расширений.

Создайте расширение

Для начала создайте новую директорию с именем tabs-manager для хранения файлов расширения. При желании вы можете скачать полный исходный код на GitHub .

Шаг 1: Добавьте данные расширения и значки.

Создайте файл с именем manifest.json и добавьте в него следующий код:

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

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

Создайте папку images , а затем загрузите в неё значки .

Шаг 2: Создайте и оформите всплывающее окно.

API действий управляет действием расширения (значком на панели инструментов). Когда пользователь щелкает по действию расширения, оно либо выполняет некоторый код, либо открывает всплывающее окно, как в этом случае. Начните с объявления всплывающего окна в файле manifest.json :

{
  "action": {
    "default_popup": "popup.html"
  }
}

Всплывающее окно похоже на веб-страницу, за одним исключением: оно не может запускать встроенный JavaScript. Создайте файл popup.html и добавьте следующий код:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

Совет : Вы можете использовать await верхнего уровня , добавив type="module" к тегу <script>.

Далее вам нужно будет оформить всплывающее окно. Создайте файл popup.css и добавьте в него следующий код:

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

Шаг 3: Управление вкладками

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

Запросить разрешение

Многие методы API вкладок можно использовать без запроса каких-либо разрешений. Однако нам необходим доступ к title и URL вкладок; эти конфиденциальные свойства требуют разрешения. Мы могли бы запросить разрешение на доступ "tabs" , но это дало бы доступ ко всем конфиденциальным свойствам вкладок. Поскольку мы управляем только вкладками конкретного сайта, мы запросим узкие разрешения для всего хоста.

Ограниченные права доступа к хостам позволяют защитить конфиденциальность пользователей, предоставляя расширенные права доступа определенным сайтам . Это обеспечит доступ к свойствам title и URL , а также к дополнительным возможностям. Добавьте выделенный код в файл manifest.json :

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 В чём основные различия между правами доступа к вкладкам и правами доступа хоста?

И разрешения для "tabs" , и разрешения для хоста имеют свои недостатки.

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

Диалоговое окно предупреждения о разрешении доступа к вкладкам

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

Диалоговое окно с предупреждением о правах доступа к хосту

Эти предупреждения могут вызывать тревогу у пользователей. Для более удобного процесса регистрации мы рекомендуем добавить возможность предоставления дополнительных разрешений .

Запросить вкладки

Вы можете получить доступ к вкладкам по определенным URL-адресам, используя метод tabs.query() . Создайте файл popup.js и добавьте следующий код:

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 Можно ли использовать API Chrome непосредственно во всплывающем окне?

Всплывающие окна и другие страницы расширений могут вызывать любой API Chrome , поскольку они обслуживаются из схемы Chrome. Например, chrome-extension://EXTENSION_ID/popup.html .

Сосредоточьтесь на вкладке

Во-первых, расширение отсортирует названия вкладок (заголовки содержащихся в них HTML-страниц) в алфавитном порядке. Затем, при щелчке по элементу списка, оно сфокусируется на этой вкладке с помощью tabs.update() и выведет окно на передний план с помощью windows.update() . Добавьте следующий код в файл popup.js :

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 В этом коде используется интересный JavaScript-код

Функция Collator используется для сортировки массива вкладок по предпочтительному языку пользователя.
Тег шаблона используется для определения HTML-элемента, который можно клонировать вместо использования document.createElement() для создания каждого элемента.
Конструктор URL-адресов , используемый для создания и анализа URL-адресов.
Синтаксис Spread используется для преобразования множества элементов в аргументы при вызове функции append() .

Сгруппируйте вкладки

API TabGroups позволяет расширению присваивать имена группам и выбирать цвет фона. Добавьте разрешение "tabGroups" в манифест, добавив выделенный код:

{
  "permissions": [
    "tabGroups"
  ]
}

В popup.js добавьте следующий код для создания кнопки, которая сгруппирует все вкладки с помощью tabs.group() и переместит их в текущее окно.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

Проверьте, работает ли это.

Убедитесь, что файловая структура вашего проекта соответствует следующей структуре каталогов:

Содержимое папки менеджера вкладок: manifest.json, popup.js, popup.css, popup.html и папка images.

Загрузите расширение локально.

Чтобы загрузить распакованное расширение в режиме разработчика, выполните действия, описанные в примере "Hello World" .

Откройте несколько страниц документации.

Откройте следующие документы в разных окнах:

Нажмите на всплывающее окно. Оно должно выглядеть примерно так:

Нажмите кнопку «Группировать вкладки». Должно получиться примерно так:

🎯 Возможные улучшения

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

Настройте таблицу стилей всплывающего окна.
Измените цвет и заголовок группы вкладок.
Управляйте вкладками другого сайта с документацией.
Добавить поддержку отмены группировки сгруппированных вкладок.

Продолжайте строить!

Поздравляем с завершением этого урока 🎉. Продолжайте совершенствовать свои навыки, пройдя другие уроки из этой серии:

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

Продолжайте исследование

Мы надеемся, что вам понравилось создавать это расширение для Chrome, и вы с нетерпением ждёте продолжения своего обучения разработке расширений для Chrome. Мы рекомендуем следующий учебный план:

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

Управление вкладками Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

Обзор

Прежде чем начать

Создайте расширение

Шаг 1: Добавьте данные расширения и значки.

Шаг 2: Создайте и оформите всплывающее окно.

Шаг 3: Управление вкладками

Запросить разрешение

Запросить вкладки

Сосредоточьтесь на вкладке

Сгруппируйте вкладки

Проверьте, работает ли это.

Загрузите расширение локально.

Откройте несколько страниц документации.

🎯 Возможные улучшения

Продолжайте строить!

Продолжайте исследование

Управление вкладками