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

Цель этой статьи — представить, что такое контент-скрипты и как они работают. Также будет демонстрационный проект, в котором будут обсуждаться основы расширений Chrome, а в нашем расширении будет использоваться простой скрипт контента. Итак, давайте начнем.

Понимание сценариев контента

Прежде всего, что такое контент-скрипт? Скрипты контента — это коды JavaScript, которые при взаимодействии с веб-страницами через расширение браузера выполняются для изменения веб-страницы.

Этого легко добиться путем взаимодействия с объектной моделью документа веб-страницы. Объектная модель документа веб-страницы представляет собой необработанную структуру данной веб-страницы. Способ, с помощью которого сценарии содержимого Chrome изменяют рассматриваемую веб-страницу, обычно называется инъекцией.

После краткого введения в сценарии контента мы приступили к реализации их на наших веб-страницах. Но до этого нам нужно настроить расширение для браузера, которое будет использовать скрипт.

Настройка расширения Chrome

Настроить файл расширения Chrome довольно просто. Для получения дополнительных справочных сведений о расширениях ниже приведена ссылка на страницу документации расширений Chrome.
Идеальное расширение Chrome должно включать детальный файл манифеста.json, который предоставляет исходную информацию по умолчанию о расширении Chrome.
Кроме того, включен соответствующий файл JS, который необходимо выполнить. Другие дополнительные файлы (HTML и CSS) помогают придать расширению эстетичный вид.
На этом давайте продолжим создавать наше расширение, включающее внедрение скрипта контента. Мы проиллюстрируем возможности контентных сценариев, создав расширение Chrome, которое отображает кнопку, накладываемую на любую активную веб-страницу, на которую мы переходим.

Написание файла манифеста

В этом разделе будут выделены и обсуждены части файла манифеста. Вот код файла манифеста проекта.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": [""],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Версия манифеста: Обычно запрашивается версия манифеста. По умолчанию установлено значение 3. Это значительно лучшее обновление, чем версия 2.
Имя: Имя расширения также вводится в файл манифеста. В моем случае проект называется «Добавить кнопку». Это можно настроить в соответствии с предпочтениями пользователя.
Также вводится версия расширения Chrome. В нашем случае это первая версия расширения, поэтому она называется 1.0. Последующие улучшения этого расширения могут привести к изменению файла для увеличения версий соответственно.
Описание: описание того, что делает расширение, также повышает доверие к расширению Chrome для нетехнических пользователей расширения.

Последующие поднятые вопросы весьма убедительны при построении сценариев контента.

Объект разрешений выделяет маршрут выполнения сценариев содержимого. Это также предотвращает запуск сценариев содержимого на неожиданных вкладках и веб-страницах. Это позволяет нам перечислить все разрешения, которые могут потребоваться нашему расширению Chrome. Некоторым расширениям Chrome может потребоваться доступ к хранилищу браузера, другим API-интерфейсам Chrome и некоторым рассматриваемым сайтам. В нашем случае для этого проекта мы ограничиваем наше расширение Chrome только используемой активной вкладкой браузера. Важно иметь это, чтобы снизить риск того, что расширение Chrome поставит под угрозу другие неиспользуемые части нашего браузера Chrome.

Затем мы настроим поле сценариев контента в нашем файле манифеста.
Поле сценариев содержимого указывает различные файлы кода, которые мы собираемся внедрить на нашу веб-страницу.
Он содержит подполе совпадений, в котором указывается URL-адрес веб-страницы, на который мы хотим, чтобы он действовал. Для простоты использования мы просто включили все URL-адреса, позволяющие этому действовать на всех веб-страницах, к которым мы обращаемся. Однако вы можете указать URL-адрес, который вы собираетесь вставить, в значение подполя. Например, www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

Также указываются JS-файлы, содержащие код внедрения. В нашем случае
Наш JS-файл называется Content script.js. Мы также указали файл CSS, используемый при стилизации этого проекта.

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

Создание сценариев контента

Для простоты мы создадим простую кнопку, при нажатии на которую будет отображаться предупреждающее сообщение. Ожидается, что эта кнопка будет перекрывать существующую веб-страницу.
Вот код ниже

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

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

вот изображение его реализации.

Вот ссылка на исходный код, содержащий стили кода.

Передовые методы и варианты использования

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

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

Заключение

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