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

Внедрить скрипты в активную вкладку

Упростите стиль текущей страницы, щелкнув значок расширения на панели инструментов.

Обзор

В этом руководстве создается расширение, которое упрощает оформление страниц документации расширения Chrome и Интернет-магазина Chrome, чтобы их было легче читать.

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

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

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

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

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

Для начала создайте новый каталог с именем focus-mode , в котором будут храниться файлы расширения. При желании вы можете скачать полный исходный код с GitHub .

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

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

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "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. Инициализируйте расширение.

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

Начните с регистрации сервис-воркера в файле manifest.json :

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

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

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

Первое событие, которое будет прослушивать наш сервис-воркер, — это runtime.onInstalled() . Этот метод позволяет расширению установить начальное состояние или выполнить некоторые задачи при установке. Расширения могут использовать Storage API и IndexedDB для хранения состояния приложения. Однако в этом случае, поскольку мы обрабатываем только два состояния, мы будем использовать сам текст значка действия , чтобы отслеживать, включено ли расширение или выключено.

Шаг 3. Включите действие расширения.

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

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

Используйте разрешение activeTab для защиты конфиденциальности пользователя.

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

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

💡 Какие еще действия пользователя активируют разрешение activeTab в моем собственном расширении?

Нажатие комбинации клавиш.
Выбор пункта контекстного меню.
Принятие предложения от омнибокса.
Открытие всплывающего окна расширения.

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

Чтобы использовать разрешение "activeTab" , добавьте его в массив разрешений манифеста:

{
  ...
  "permissions": ["activeTab"],
  ...
}

Шаг 4. Отслеживайте состояние текущей вкладки

После того, как пользователь нажмет действие расширения, расширение проверит, соответствует ли URL-адрес странице документации. Затем он проверит состояние текущей вкладки и установит следующее состояние. Добавьте следующий код в background.js :

const extensions = 'https://developer.chrome.com/docs/extensions';
const webstore = 'https://developer.chrome.com/docs/webstore';

chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

Шаг 5. Добавьте или удалите таблицу стилей.

Теперь пришло время изменить макет страницы. Создайте файл с именем focus-mode.css и включите следующий код:

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Вставьте или удалите таблицу стилей с помощью API сценариев . Начните с объявления разрешения "scripting" в манифесте:

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}

Наконец, в background.js добавьте следующий код, чтобы изменить макет страницы:

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 Могу ли я использовать API сценариев для внедрения кода вместо таблицы стилей?

Да. Вы можете использовать scripting.executeScript() для внедрения JavaScript.

Необязательно: назначьте сочетание клавиш

Просто ради интереса добавьте ярлык, чтобы упростить включение или отключение режима фокусировки. Добавьте ключ "commands" в манифест.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

Клавиша "_execute_action" запускает тот же код, что и событие action.onClicked() , поэтому дополнительный код не требуется.

Проверьте, что это работает

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

Содержимое папки режима фокуса: манифест.json, фон.js, focus-mode.css и папка изображений.

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

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

Протестируйте расширение на странице документации.

Сначала откройте любую из следующих страниц:

Затем нажмите действие расширения. Если вы настроили сочетание клавиш , вы можете проверить его, нажав Ctrl + B или Cmd + B .

Отсюда следует исходить:

Расширение режима фокусировки ВЫКЛ. — Расширение режима фокусировки отключено

На это:

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

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

Улучшите таблицу стилей CSS.
Назначьте другое сочетание клавиш.
Измените макет вашего любимого блога или сайта документации.

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

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

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

Продолжить изучение

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

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