Как создать простое интерактивное расширение Chrome с нуля.

Мне нужно извлечь данные с веб-сайта.

К сожалению, поцарапать его не так-то просто. Итак, передо мной два варианта:

  1. Собирайте данные вручную с помощью консоли разработчика. (Ручной и трудоемкий).
  2. Создайте веб-расширение, которое сделает это за меня. (Как только он будет построен, просто и быстро).

Как все здравомыслящие люди, обладающие необходимыми навыками, я выбираю последнее.

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

Требования

Прежде чем мы начнем, давайте обозначим некоторые основные требования. Расширение должно:

  1. есть значок.
  2. иметь место в расширительном лотке.
  3. откройте базовый интерфейс с помощью тумблера при нажатии значка на панели задач.
  4. установите фон страницы на серый цвет при нажатии тумблера.

Довольно базовые вещи. Требование четвертое — интерактивность.

Строить

Для нетерпеливых вы можете сразу загрузить простое расширение с моего GitHub.



GitHub — Connor56/bare-bones: простое расширение Chrome для создания и обучения.
Простое расширение Chrome для создания и обучения. - GitHub - Connor56/bare-bones: простое расширение Chrome для…github.com



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

1. Установите папку расширения.

Расширению требуется собственная папка (каталог). Без него у вас нет расширения, поэтому мы начнем с него.

Откройте проводник и перейдите туда, где вы хотите сохранить свое расширение. Создайте в этом месте новый каталог с именем вашего расширения. Я назвал своего bare-bones.

2. Добавьте файл манифеста.

Судовой манифест — это список всего, что находится на корабле или на нем. Аналогично, файл манифеста расширения Chrome представляет собой список всего, что требуется и используется расширением.

Технически это файл метаданных расширения, хранящийся в формате JSON.

Чтобы создать этот файл, откройте свой каталог и создайте новый файл с именем manifest.json. Я сделал это в VSCode, как показано ниже.

Простой, но интерактивный манифест требует следующей настройки.

{
  "manifest_version": 3,
  "name": "Bare-Bones",
  "version": "1.0",
  "description": "A basic Extension",
  "action": {
    "default_popup": "basic_toggle.html",
    "default_icon": "bare-bones_icon.png"
  },
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["background_switcher.js"]
    }
  ]
}

Три верхних поля являются обязательными. Без них расширение не загрузится. Остальные не являются обязательными, но рекомендуются. Вот обзор полей:

  • manifest_version —Формат манифеста. Это контролирует, как Chrome взаимодействует с вашим расширением. Версия 3 является последней (2023 г.) и считается стандартной.
  • name —Имя вашего расширения. Это появится на панели при установке.
  • version — Версия вашего расширения, разрабатываемая. например 1.0, 1.1, 2.0, 2.2 и т. д.
  • description —Описание назначения расширения.
  • action —Этот термин может сбить вас с толку, если вы новичок в расширениях Chrome. Это имя значка на панели задач, который вы видите справа от адресной строки. Это называется действием, потому что пользователь обычно выполняет действия с вашим расширением через трей.
  • permissions — Список функций браузера, к которым вашему расширению необходим доступ. Посмотреть все разрешения можно здесь. У нас есть activeTab, потому что нам нужно иметь возможность взаимодействовать со страницей.
  • background —Список файлов Javascript, которые работают за кулисами вашего расширения. Эти сценарии отделены от компонентов, которые могут вносить видимые изменения. Обычно они передают сообщения между различными частями расширения, прослушивают события и обрабатывают центральную логику.
  • content_scripts — Список файлов Javascript, которые работают в контексте веб-страницы. Эти сценарии могут вносить видимые изменения на странице и передавать информацию обратно в родительское расширение.

Вставьте код в свой файл и сохраните.

Если вы хотите узнать больше, вы можете увидеть все допустимые поля манифеста здесь.

3. Добавьте default_icon

default_icon — это подполе действия (в манифесте), определяющее, как будет выглядеть значок в области уведомлений. Например, иконка Grammarly имеет следующий вид.

Я создал простую иконку для этого расширения в Midjourney и отредактировал ее до необходимого формата 128x128 пикселей. При желании вы можете указать несколько размеров, чтобы избежать пикселизации (например, 16x16).

Вы можете использовать мое изображение или создать свое собственное.

Поместите окончательное изображение в каталог расширения и убедитесь, что оно имеет то же имя, что и поле default_icon в вашем манифесте. Например, мой сохраняется как bare-bones_icon.jpg.

4а. Добавьте файл default_popup

default_popup — это подполе действия, определяющее, что всплывает при нажатии на значок в трее расширения. Это файл .html, поскольку расширения Chrome используют веб-технологии (Javascript, HTML и CSS).

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Changer</title>
    <script src="basic_toggle.js" defer></script>
  </head>
  <body>
    <button id="toggleColor">Change Background</button>
  </body>
</html>

Это создаст небольшое всплывающее окно с единственной кнопкой в ​​центре. Как только расширение будет полностью настроено, эта кнопка изменит цвет фона веб-сайта.

4б. Добавьте файл Javascript Basic_toggle.

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

Файл Javascript имеет следующую настройку.

document.getElementById("toggleColor").addEventListener("click", () => {
  chrome.runtime.sendMessage({ action: "toggleBackgroundColor" });
});

Если вы раньше использовали веб-технологии, единственным незнакомым кодом будет функция chrome.runtime.sendMessage(...). Функция sendMessage является частью API chrome.runtime. Он позволяет передавать сообщения между различными частями вашего приложения, управлять его жизненным циклом и получать доступ к метаданным. Подробнее смотрите здесь.

Самое главное, это позволяет нам передавать сообщение остальной части расширения при нажатии кнопки!

Наша команда chrome.runtime.sendMessage({ action: "toggleBackgroundColor"}); передает сообщение на весь внутренний номер. Разрешение пересылки данных по отдельным частям. Вы можете прочитать больше здесь".

5. Добавьте файл background.js в качестве сервис-воркера.

Сервисные работники управляют связью между веб-приложениями, браузером и сетью.

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

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "toggleBackgroundColor") {
    (async () => {
      const [tab] = await chrome.tabs.query({
        active: true,
        lastFocusedWindow: true,
      });
      await chrome.tabs.sendMessage(tab.id, {
        action: "toggleBackgroundColor",
      });
    })();
  }
});

Вы заметите повторное появление chrome.runtime. chrome.runtime.onMessage позволяет настроить прослушиватели событий для сообщений, отправленных chrome.runtime.sendMessage. Подробности читайте здесь.

Оператор if проверяет, хочет ли сообщение, чтобы мы переключили цвет фона. Если да, то сервис-воркер находит активную в данный момент вкладку с номером chrome.tabs.query и извлекает ее идентификатор. С помощью идентификатора вы можете настроить таргетинг только на активную вкладку. Это предотвращает активацию сценариев содержимого на всех вкладках.

Как вы увидите, это сообщение запускает сценарий содержимого для изменения цвета фона.

6. Добавьте фоновый_переключатель.js.

Теперь последний кусочек головоломки — наш сценарий контента background_switcher.js. Код этого скрипта приведен ниже.

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request.action === "toggleBackgroundColor") {
    if (document.body.style.backgroundColor !== "yellow") {
      document.body.style.backgroundColor = "yellow";
    } else {
      document.body.style.backgroundColor = "";
    }
  }
});

Этот сценарий также использует chrome.runtime.onMessage для прослушивания отправленных на него сообщений. При получении сообщения с действием "toggleBackgroundColour" сценарий содержимого устанавливает желтый цвет фона активной вкладки.

7. Подведение итогов

Вот и все! Каталог расширений должен выглядеть примерно так.

Если вы хотите немного выйти за рамки простого подхода, добавьте в манифест параметр "icon" и диапазон "default_icon" изображений с разными размерами пикселей.

Если вы будете довольны, пришло время добавить расширение в Google Chrome!

Загрузка вашего расширения

Вы будете приятно удивлены тем, насколько это просто.

1. Перейдите к своим расширениям.

Введите следующее в строку поиска.

Вас встретит следующая веб-страница.

2. Загрузите распакованное расширение.

Нажмите кнопку «Загрузить распакованное» в левом верхнем углу панели навигации «Расширения». Перейдите туда, где находится ваш каталог, выберите расширение и нажмите «Выбрать папку».

Вуаля! Ваше расширение загружено в Google Chrome.

Доступ к нему должен быть через панель приложений. Попробуйте изменить фон некоторых веб-сайтов. (Это работает не для всех).

Стройте с нуля.

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

Пишите, что вы делаете, в комментариях ниже!