Мониторинг курса криптовалют в Google Chrome: как написать полезное расширение с нуля
Разработчик программного обеспечения Нищал Никит опубликовал туториал по созданию расширения Chrome с нуля до размещения в веб-магазине Chrome. Оно сделано с помощью JavaScript и платформы для разработки расширений Manifest V3. Если все сделать правильно, то получится инструмент для мониторинга курса криптовалют. Давайте приступим.
Расширение — это набор HTML-, CSS-, и JavaScript-фрагментов, которые позволяют выполнять некоторые дополнительные функции с помощью JavaScript API, которые предоставляет браузер. Говоря простым языком, расширение — это веб-страница, размещенная в Chrome и с доступом к определенным API.
Создание расширений начинается с файла manifest.json. Код можно запускать в фоновом режиме с помощью рабочего сервиса background. Любая веб-страница может быть запущена через файл content scripts, в то время как файл Options используется для того, чтобы помочь пользователям настроить расширение, предоставляя страницу опций при нажатии правой кнопкой мыши на значок расширения в панели инструментов. Основной элемент пользовательского интерфейса расширения Chrome под названием CryptoBase будет создан с помощью файла popup.
Вот что должно получиться:
CryptoBase ├── icon-32.png ├── popup.html ├── popup.css ├── popup.js └── background.js
CryptoBase. В ней будут храниться все файлы. Chrome позволяет загружать и тестировать расширение, указывая на определенную папку, содержащую все файлы.manifest.json и поместить его в корневую папку CryptoBase.16x16px, 32x32px, 48x48px, 128x128px. Также можно задать размер по умолчанию, чтобы охватить все устройства.popup-файлов.Готовый архив с файлами можно скачать по ссылке.
manifest.json, который описывает расширение для браузера. Для этого используйте приведенный ниже сниппер:"name": "Cryptobase",
"description": "Cryptobase",
"version": "1.1",
"manifest_version": 3,
"permissions": [],
"host_permissions": [],
"background": {
"service_worker": "background/background.js"
},
"action": {
"default_title": "Cryptobase",
"default_icon": "assets/icon-32.png",
"default_popup": "popup/popup.html"
},
"icons": {
"16": "assets/icon-16.png",
"32": "assets/icon-32.png",
"48": "assets/icon-48.png",
"128": "assets/icon-128.png"
},
"key": "MIIBIjANBgk..." CryptoBase, за которым будет следовать список 50 самых популярных криптовалют (в соответствии с их рыночной капитализацией). Вот как должен выглядеть popup.html:<!doctype html>
<html>
<head>
<link rel="stylesheet" href="popup.css" />
</head>
<body>
<main>
<div class="container">
<h1 class="heading">CryptoBase</h1>
<h3 class="sub-heading">Chrome extension for cryptocurrencies.</h3>
<div id="main-content"></div>
</div>
</main>
<script src="popup.js"></script>
</body>
</html> popup.css и popup.js. В них будет храниться логика для расширения, которая будет выполняться при каждом нажатии на его иконку.const baseCoinAPI = "https://pro-api.coinmarketcap.com/";
const apiVersion = "v1";
const apiKey = `&CMC_PRO_API_KEY=${REACT_APP_CMC_KEY}`;
//Function to get the top 25 coins.
const getCoins = async (endPoint) => {
let path = `${baseCoinAPI}${apiVersion}${endPoint}${apiKey}`;
const fetchResult = await fetch(path);
const result = await fetchResult.json();
if (fetchResult.ok) {
return result;
}
const responseError = {
type: "Error",
message: result.message || "Something went wrong",
data: result.data || "",
code: result.code || "",
};
let error = new Error();
error = { ...error, ...responseError };
throw error;
};
//DOM Manipulation to show all the coins and respective values
const coins = getCoins("/cryptocurrency/listings/latest?limit=25");
var mainContent = document.getElementById("main-content");
if (coins.length > 0) {
coins.forEach((coin) => {
var content = document.createElement("div");
var paragraph = document.createElement("p");
paragraph.textContent = `${coin.name} - ${coin.quote.USD.price}`;
content.appendChild(paragraph);
mainContent.appendChild(content);
});
} Перед тем как публиковать расширение в Chrome Web Store, нужно получить разрешение. Вот действия, которые необходимо выполнить перед отправкой расширения на проверку:
Screenshots, Promo title и многое другое. Также можно создать отдельную веб-страницу с информацией о расширении.После того как расширение будет загружено, оно пройдет процесс модерации. Время проверки зависит от типа и сложности расширения. В конце должна появиться такая плашка:
Вот и все! После публикации расширение будет доступно всем пользователям Chrome.
На фоне роста спроса на ликвидность в бычьем рынке 2025 года, криптозаймы снова выходят на…
Прокси (proxy), или прокси-сервер — это программа-посредник, которая обеспечивает соединение между пользователем и интернет-ресурсом. Принцип…
Согласитесь, было бы неплохо соединить в одно сайт и приложение для смартфона. Если вы еще…
Повсеместное распространение смартфонов привело к огромному спросу на мобильные игры и приложения. Миллиарды пользователей гаджетов…
В перечне популярных чат-ботов с искусственным интеллектом Google Bard (Gemini) еще не пользуется такой популярностью…
Скрипт (англ. — сценарий), — это небольшая программа, как правило, для веб-интерфейса, выполняющая определенную задачу.…