Начало работы с расширением Chrome в 2023 году: как создать собственное расширение Chrome

Расширения Chrome — это эффективные инструменты, которые улучшают работу в Интернете, добавляя новые функции и изменяя Google Chrome.

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

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

Как они работают

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

Среда разработки

Вам нужно несколько инструментов и ресурсов для создания расширений Chrome. Сначала убедитесь, что Google Chrome обновлен и установлен на вашем компьютере. После этого настройте текстовый редактор или интегрированную среду разработки (IDE), чтобы вы могли начать писать код. Популярные варианты включают Visual Studio Code, Atom и Sublime Text. вы должны быть знакомы с HTML, CSS и JavaScript.

Структура проекта

Разберем структуру простыми словами:

manifest.json

Считайте файл manifest.json шаблоном или файлом конфигурации вашего расширения Chrome. Он включает важную информацию о вашем расширении, такую как имя, версия и разрешения. В этом файле вы наметите основные файлы и функциональные возможности вашего расширения.

background.js

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

content.js

Файл content.js отвечает за внедрение или изменение содержимого посещаемых вами веб-страниц. Это позволяет вашему расширению взаимодействовать с кодом HTML, CSS и JavaScript веб-страницы. Вы можете использовать content.js для добавления или удаления элементов на веб-странице, изменения ее внешнего вида или взаимодействия с функциональностью страницы.

всплывающее окно.html

Файл popup.html представляет пользовательский интерфейс (UI) вашего расширения. Это окно, которое появляется при нажатии на значок расширения на панели инструментов браузера.

popup.js

Файл popup.js содержит код JavaScript, управляющий поведением и функциями пользовательского интерфейса popup.html.

всплывающее окно.css

В файле popup.css вы можете определить стили и внешний вид элементов пользовательского интерфейса вашего расширения.

Мы создадим одно расширение, которое преобразует все веб-сайты в черно-белые цвета. Мы включим все необходимые файлы и код в блог. Начнем

Давайте сначала создадим точку входа manifest.json,

{
  "manifest_version": 3,
  "name": "Black & White Converter",
  "version": "1.0",
  "description": "Turns all websites black and white.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

manifest_version: указывает версию формата файла манифеста.
name: Имя вашего расширения.
version: номер версии вашего расширения.
description: краткое описание того, что делает ваше расширение.
разрешения: указывает разрешения, необходимые вашему расширению. В этом случае ему нужен доступ к активной вкладке в браузере.
действие: определяет поведение действия браузера (значок расширения на панели инструментов). Мы устанавливаем для «default_popup» значение «popup.html», чтобы при нажатии на значок открывался файл popup.html.
icons: Указывает значки для вашего расширения в разных размерах (16x16, 48x48 и 128x128).
content_scripts: указывает сценарий содержимого для вставки на веб-страницы. Мы будем использовать content.js для изменения внешнего вида веб-сайтов.

На самом деле нам не нужен фоновый скрипт (background.js), так как нет фоновых задач или событий для обработки. поэтому background.js будет пустым.

Всплывающее окно.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="popup.css">
  <script src="popup.js"></script>
</head>
<body>
  <h1>Black & White Converter</h1>
  <button id="convertButton">Convert</button>
  <button id="resetButton">Reset</button>
</body>
</html>

Это будет простой интерфейс для нашего расширения.

h1: отображает название вашего расширения.
button#convertButton: кнопка «Преобразовать» запускает преобразование веб-страницы в оттенки серого.
button#resetButton: Кнопка «Сброс» восстанавливает исходные цвета веб-страницы.

Всплывающее окно.css

body {
  min-width: 200px;
  max-width: 250px;
}

h1 {
  font-size: 20px;
  text-align: center;
}

button {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
}

Этот файл содержит стили для элементов в вашем popup.html. Давайте разберем это:

body: устанавливает минимальную и максимальную ширину всплывающего окна.
h1: устанавливает размер шрифта и центрирует текст.
button: устанавливает ширину, отступы и поля кнопок.

Теперь, когда мы создали базовый пользовательский интерфейс нашего расширения, давайте загрузим расширение в Chrome и посмотрим!

Чтобы загрузить расширение, сначала посетите chrome://extensions/

Сначала вам нужно включить Режим разработчика в правом верхнем углу. Затем выберите Загрузить распакованное в левом верхнем углу и откройте папку проекта.

Вы увидите свой добавочный номер в списке,

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

Popup.js

document.addEventListener('DOMContentLoaded', function() {
  var convertButton = document.getElementById('convertButton');
  var resetButton = document.getElementById('resetButton');

  convertButton.addEventListener('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { action: 'convert' });
    });
  });

  resetButton.addEventListener('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, { action: 'reset' });
    });
  });
});

Этот файл содержит код JavaScript, управляющий поведением пользовательского интерфейса popup.html. Давайте разберем это:

document.addEventListener('DOMContentLoaded', function() {...}): отслеживает событие DOMContentLoaded, указывающее на завершение загрузки popup.html.
var convertButton = document.getElementById('convertButton'); и var resetButton = document.getElementById('resetButton');: извлекает кнопки «Преобразовать» и «Сбросить» из HTML-документа.
convertButton.addEventListener('click', function() {...}): отслеживает событие нажатия на кнопку «Преобразовать» и отправляет сообщение сценарию содержимого (content.js) для преобразования веб-страницы в оттенки серого.
resetButton.addEventListener('click', function() {...}): прослушивает событие нажатия на кнопку «Сброс» и отправляет сообщение сценарию контента (content.js), чтобы сбросить цвета веб-страницы.

Content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'convert') {
    document.documentElement.style.filter = 'grayscale(100%)';
    sendResponse({ message: 'Website converted to black and white.' });
  } else if (request.action === 'reset') {
    document.documentElement.style.filter = 'none';
    sendResponse({ message: 'Website reset to original colors.' });
  }
});

Этот файл представляет собой сценарий содержимого, внедренный в веб-страницы для изменения их внешнего вида. Давайте разберем это:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {...}): прослушивает сообщения от внутреннего номера.
if (request.action === 'convert') {...}: Проверяет, является ли действие сообщения «преобразованием». Если это так, он устанавливает для свойства CSS filter корневого элемента веб-страницы (document.documentElement) значение «оттенки серого (100%)», эффективно превращая страницу в черно-белую.
if (request.action === 'reset') {...}: Проверяет, является ли действие сообщения «сброшенным». Если это так, он удаляет свойство CSS filter из корневого элемента веб-страницы, восстанавливая исходные цвета.
sendResponse({...}): Отправляет ответ на внутренний номер для подтверждения предпринятого действия.

Давайте посмотрим на действие:

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

Заключение

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

Если вы хотите увидеть расширенные темы или руководства, дайте мне знать!

Если вы нашли эту статью полезной, нажмите кнопку аплодисментов 👏
Подпишитесь, чтобы узнать больше! Приятного чтения❤️

Начало работы с расширением Chrome в 2023 году: как создать собственное расширение Chrome

Начало работы с расширением Chrome в 2023 году: как создать собственное расширение Chrome

Вопросы по теме