什么是 Chrome 扩展程序？
chrome 扩展程序是安装在 Chrome 浏览器中的程序，用于增强浏览器的功能。您可以使用 HTML、CSS 和 JavaScript 等 Web 技术轻松构建一个。
创建 chrome 扩展程序类似于创建 Web 应用程序，但它需要一个manifest.json文件，我们将在本文的最后一节中讨论该文件。
我们的 Chrome 扩展程序会是什么样子？
covid_report
如您所见，上述 chrome 扩展显示了英国冠状病毒 (COVID-19) 的最新数据。我们将在这篇博文中研究如何创建这个扩展。
在这里，我们将使用https://api.coronavirus.data.gov.uk/v1/data API 来获取数据。为简单起见，我们将仅显示最新记录。
这个项目的完整源代码可以在GitHub上找到。
如何创建 Chrome 扩展程序
首先，我们需要创建一个空文件夹，我们将在其中添加 HTML、CSS 和 JavaScript 文件。
在该文件夹中，让我们使用以下 HTML 样板代码创建一个 index.html 文件：
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
现在，让我们在 head 标签中添加一个指向 Bootstrap CDN 的链接。我们将在这里使用Bootstrap 框架，这样我们就不必在此示例中编写一些额外的 CSS。
<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>
在演示中，我们看到记录显示为表格。所以现在我们需要创建一个表。
<!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>
上面的代码创建了一个宽度为450px. 表格中有四个不同的标题：Date、Country、Confirmed和Deaths。
在这里，您可以看到每个表数据td都被分配了不同的 ID。我们将在 JavaScript 中使用这些 ID 的值来更新表数据。另外，这里我们在加载完所有 HTML 内容后，最后加载了 JavaScript。
现在，由于表格已显示，我们需要编写 JavaScript 以便从 API 获取数据。
让我们创建一个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();
现在，让我们分解上面的代码：
- 在这里，我们使用名为
fetchData. - 正在从https://api.coronavirus.data.gov.uk/v1/data API 获取数据。
- JSON 数据存储在一个名为
record. - 带有 ids
date、areaName和latestBy的td 的 HTML 内容deathNew由 API 的相应值更新。
如果我们检查浏览器，我们将能够看到以下结果。
covid_browser
<figcaption style="box-sizing: inherit; margin: 1em auto 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.5em; font-family: inherit; font-size: 17.6px; vertical-align: baseline; text-align: center; max-width: 1040px;">英国最新的 Covid 报告 - 浏览器预览</figcaption>
数据是从 API 中获取的，一旦 API 中的数据发生变化，它就会不断更新。
Manifest.json 文件
正如我们之前所讨论的，构建 Chrome 扩展程序类似于构建任何 Web 应用程序。唯一的区别是 Chrome 扩展需要一个manifest.json我们保存所有配置的文件。
manifest.json 文件包含构建 Chrome 扩展程序所需的所有必要信息。它是扩展检查的第一个文件，所有内容都是从这个文件加载的。
现在，让我们在根文件夹中创建一个manifest.json文件并添加以下代码：
{
"name": "Covid-19 Stats UK",
"version": "1.0.0",
"description": "latest covid data of UK",
"manifest_version": 3,
"author": "Sampurna Chapagain",
"action":{
"default_popup": "index.html",
"default_title": "Latest Covid Report"
}
}
<figcaption style="box-sizing: inherit; margin: 1em auto 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.5em; font-family: inherit; font-size: 17.6px; vertical-align: baseline; text-align: center; max-width: 1040px;">清单.json</figcaption>
我们的manifest.json文件包含name, version, description,的值manifest_version（在本例中为 3，这是最新的清单版本），author, 和action字段。在 action 字段中，它的值default_popup包含指向index.html本示例中的 HTML 文件的路径。
您可以在这里查看文件的所有配置manifest.json。
现在，由于我们还添加了 manifest.json 文件，我们准备将此项目添加为 Chrome 浏览器中的扩展。
为此，我们需要转到Select More Tools然后Extensions从浏览器菜单中进行选择，如下图所示：
无题设计--1-
<figcaption style="box-sizing: inherit; margin: 1em auto 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.5em; font-family: inherit; font-size: 17.6px; vertical-align: baseline; text-align: center; max-width: 1040px;">导航到 Chrome 中的扩展程序</figcaption>
选择扩展后，它会重定向到 Chrome 中的扩展页面。确保在Developer mode此处启用。
无标题设计--1--1
完成后，您需要单击Load unpacked允许我们将项目加载到 Chrome 扩展程序商店中的按钮。
现在，该扩展程序可在我们的 Chrome 扩展程序商店中使用。您还可以将扩展固定在浏览器中，如下面的 gif 所示：
pin_extension
<figcaption style="box-sizing: inherit; margin: 1em auto 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.5em; font-family: inherit; font-size: 17.6px; vertical-align: baseline; text-align: center; max-width: 1040px;">将扩展固定到浏览器</figcaption>
此扩展仅适用于您的浏览器。如果你想在 Chrome Web Store 上发布它，你可以点击这个链接。
结论
如果您有一些 HTML、CSS 和 JavaScript 知识，则可以轻松构建 Chrome 扩展。我希望在阅读完这篇博文后，您将创建一些很酷的扩展。
网友评论