Мониторинг курса криптовалют в Google Chrome: как написать полезное расширение с нуля

Богдан Мирченко

15.12.2021 14:27

Разработчик программного обеспечения Нищал Никит опубликовал туториал по созданию расширения Chrome с нуля до размещения в веб-магазине Chrome. Оно сделано с помощью JavaScript и платформы для разработки расширений Manifest V3. Если все сделать правильно, то получится инструмент для мониторинга курса криптовалют. Давайте приступим.

Что такое расширение Chrome

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

Создание расширений начинается с файла manifest.json. Код можно запускать в фоновом режиме с помощью рабочего сервиса background. Любая веб-страница может быть запущена через файл content scripts, в то время как файл Options используется для того, чтобы помочь пользователям настроить расширение, предоставляя страницу опций при нажатии правой кнопкой мыши на значок расширения в панели инструментов. Основной элемент пользовательского интерфейса расширения Chrome под названием CryptoBase будет создан с помощью файла popup.

Вот что должно получиться:

Расширение для мониторинга курса криптовалют

Шаг 1: подготовка проекта

Для инициализации установки используйте следующий код:

CryptoBase
├── icon-32.png
├── popup.html
├── popup.css
├── popup.js
└── background.js

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

Для запуска расширения также нужен файл manifest, который сообщает Chrome все, что необходимо для правильной загрузки расширения. Для этого нужно создать пустой файл manifest.json и поместить его в корневую папку CryptoBase.
Для расширения нужна иконка. Ее размер может быть: 16x16px, 32x32px, 48x48px, 128x128px. Также можно задать размер по умолчанию, чтобы охватить все устройства.
Затем создаем UI для расширения. Для этого нужно в директории CryptoBase создать HTML, CSS и JS файлы для popup-файлов.

Готовый архив с файлами можно скачать по ссылке.

Шаг 2: создание манифеста

После того как основная структура папок будет готова, можно добавить код в файл 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..."

Шаг 3: создание расширения

1. Создание UI

UI будет отображаться при нажатии на значок расширения. Пользовательский интерфейс будет максимально простым и содержать название расширения 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>

Из HTML-файла видно, что он содержит файлы popup.css и popup.js. В них будет храниться логика для расширения, которая будет выполняться при каждом нажатии на его иконку.

2. Построение логики

Последнее, что нужно сделать, это реализовать логику, которая должна выполняться каждый раз, когда пользователь нажимает на значок расширения. Чтобы получить необходимые данные из публичного API, создадим простой запрос на выборку. Когда значок расширения будет нажат, значения будут извлечены и в DOM будет создан соответствующий HTML-элемент. Вот как это сделать:

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);
  });
}

Шаг 4: отправка расширения на модерацию

Перед тем как публиковать расширение в Chrome Web Store, нужно получить разрешение. Вот действия, которые необходимо выполнить перед отправкой расширения на проверку:

Создать zip-файл расширения, который будет содержать все необходимые файлы, активы и, самое главное, файл манифеста в корневом каталоге.

Создать и настроить учетную запись разработчика Chrome Web Store, чтобы опубликовать расширение. Вот как это сделать:

Настройка аккаунта разработчика

Загрузить расширение. Для этого:
- перейдите в Chrome Developer Dashboard;
- войдите в учетную запись разработчика, которую создали ранее;
- нажмите кнопку Add new element;
- нажмите Choose file → выберите zip-файл расширения → нажмите Download.

Добавить активы списка. В Chrome Web Store можно добавить несколько активов для расширения. К ним относятся Screenshots, Promo title и многое другое. Также можно создать отдельную веб-страницу с информацией о расширении.
Отправить элемент для публикации. После загрузки расширения, оно отобразится на приборной панели. Вот что должно получиться:

Расширение после загрузки в Chrome Developer Store

Шаг 5: публикации расширения в Chrome Web Store

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

Сообщение об успешной проверке

Вот и все! После публикации расширение будет доступно всем пользователям Chrome.