Создаем расширение для браузера на HTML
Здравствуйте! Сегодня браузеры являются неотЪемлемой частью жизни многих пользователей ПК.
И не секрет что они имеют свои магазины с расширениями, позволяющими улучшать функционал используемого
поисковика.
Сегодня я хотел бы показать, как создавать расширение для браузера Chrome при помощи HTML и
добавить его к браузеру.
И так, создадим пустую папку ChromeExt. Внутрь помещаем три файла index.html, script.js, manifest.json.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-3" style="width: 450px;">
<h2 class="text-center">Covid Latest Report-UK</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Country</th>
<th>Confirmed</th>
<th>Deaths</th>
</tr>
</thead>
<tbody>
<tr>
<td id="date"></td>
<td id="areaName"></td>
<td id="latestBy"></td>
<td id="deathNew"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script src="script.js"></script>
</html>
script.js
async function fetchData() {
const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data");
const record=await res.json();
document.getElementById("date").innerHTML=record.data[0].date;
document.getElementById("areaName").innerHTML=record.data[0].areaName;
document.getElementById("latestBy").innerHTML=record.data[0].latestBy;
document.getElementById("deathNew").innerHTML=record.data[0].deathNew;
}
fetchData();
И последний файл, позволяющий превратить наш проект в расшение для браузера.
manifest.json
{
"name": "Covid-19 Stats UK",
"version": "1.0.0",
"description": "latest covid data of UK",
"manifest_version": 3,
"author": "XXXXXXX TTTTTTTT",
"action":{
"default_popup": "index.html",
"default_title": "Latest Covid Report"
}
}
Далее, переходим в браузер и заходим во вкладку расширения командой chrome://extensions/.
Включаем плашку режим разработчика и нажимаем кнопку Загрузить распакованное расширение. Далее
выбираем папку с проектом и загружаем его.
