Я уверен, что вы, должно быть, думали о том, как создать расширение для Chrome хотя бы раз. В этой статье я покажу вам, как вы можете создать расширение Chrome с помощью простых шагов.
Это расширение для Chrome сможет изменить цвет фона веб-страницы.
Разработка
Создайте новый каталог для вашего расширения и создайте следующие файлы:
manifest.json: в этом файле указаны метаданные о вашем расширении, такие как его имя и необходимые разрешения.
{
"manifest_version": 2,
"name": "Webpage Color Changer",
"version": "1.0",
"permissions": ["activeTab"],
"browser_action": {
"default_icon": "icon.png",
"default_title": "Change the webpage color",
"default_popup": "popup.html"
}
}
popup.html: Этот файл содержит HTML-код всплывающего окна, которое появляется при нажатии кнопки расширения. Он должен включать кнопку, которая при нажатии изменит цвет веб-страницы.
<!DOCTYPE html>
<html>
<head>
<style>
button {
height: 30px;
width: 30px;
outline: none;
border: none;
background: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="change-color-button">Change Color</button>
<script src="popup.js"></script>
</body>
</html>
popup.js: Этот файл содержит код JavaScript, который запускается при открытии всплывающего окна. Он должен прослушивать нажатие кнопки «Изменить цвет» и отправлять сообщение сценарию контента (content.js), чтобы изменить цвет веб-страницы при нажатии кнопки.
document.addEventListener("DOMContentLoaded", () => {
const button = document.getElementById("change-color-button");
button.addEventListener("click", () => {
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
chrome.tabs.sendMessage(tabs[0].id, { type: "change-color" });
});
});
});
content.js: Этот файл представляет собой сценарий контента, который запускается в контексте веб-страницы и прослушивает сообщения от расширения. Когда он получает сообщение об изменении цвета веб-страницы, он выполняет необходимый для этого код.
chrome.runtime.onMessage.addListener((message) => {
if (message.type === "change-color") {
document.body.style.backgroundColor = "red";
}
});
Загрузка в Хром
Чтобы загрузить расширение в Chrome, откройте страницу управления расширениями, перейдя chrome://extensions в адресную строку. Включите «Режим разработчика», щелкнув переключатель в правом верхнем углу страницы. Затем нажмите кнопку «Загрузить распакованное» и выберите каталог, содержащий ваши файлы расширения.
Вот и все! Теперь, когда вы нажимаете кнопку расширения на панели инструментов, появляется всплывающее окно, и вы можете нажать кнопку «Изменить цвет», чтобы изменить цвет веб-страницы активной вкладки. Вы можете настроить расширение, изменив HTML и CSS в popup.html
Публикация расширения
Чтобы опубликовать расширение Chrome, выполните следующие действия:
- Перейдите на панель инструментов разработчика Chrome (https://chrome.google.com/webstore/developer/dashboard) и войдите в свою учетную запись Google.
- Нажмите кнопку «Добавить новый элемент».
- Перетащите ZIP-файл вашего расширения или выберите его на своем компьютере. ZIP-файл должен содержать все файлы расширения, включая файл
manifest.json. - Заполните форму, чтобы предоставить информацию о ваших расширениях, такую как название, описание и рекламные изображения.
- Примите соглашение с разработчиком и нажмите кнопку «Опубликовать».
Ваше расширение будет рассмотрено командой Chrome и, если оно будет одобрено, оно будет опубликовано в Интернет-магазине Chrome. Вы можете в любое время просмотреть статус своего расширения и внести в него обновления через панель инструментов разработчика.
