原文： How to Create Your Own Google Chrome Extension
如果你是谷歌浏览器的用户，你可能已经使用了浏览器中的一些扩展。
你是否曾想过如何自己创建一个？在这篇文章中，我将向你展示如何从头开始创建一个 Chrome 扩展。
目录
- 什么是 Chrome 扩展
- 我们的 Chrome 扩展会是什么样子的
- 如何创建 Chrome 扩展程序
- 创建 manifest.json 文件
- 总结
什么是 Chrome 扩展程序
Chrome 扩展是安装在 Chrome 浏览器中的一个程序，可以增强浏览器的功能。你可以使用 HTML、CSS 和 JavaScript 等 Web 技术轻松构建一个扩展。
创建 Chrome 扩展程序与创建 Web 应用程序类似，但它需要一个 manifest.json 文件，我们将在本篇文章的最后一节讨论。
我们的 Chrome 扩展会是什么样子的
正如你所看到的，上述 Chrome 扩展显示了英国新冠病毒（COVID-19）的最新数据
我们将在这篇博文中研究如何创建这个扩展。
在这里，我们将使用 https://api.coronavirus.data.gov.uk/v1/data，以获取数据。为了简单起见，我们将只显示最新的记录。
这个项目的完整源代码可以在 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>现在，让我们在 heda 标签中添加一个指向 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 中获取数据。
- JSON 数据被存储在一个名为
record的变量中。 td的id为date、areaName、latestBy和deathNew的 HTML 内容中的被 API 的相应值所更新。
如果我们在浏览器中检查，我们将能够看到以下结果。
数据是从 API 中获取的，一旦 API 中的数据发生变化，它就会持续更新。
Manifest.json 文件
正如我们之前所讨论的，构建 Chrome 扩展程序与构建任何网络应用程序相似。唯一不同的是，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"
}
}我们的 manifest.json 文件包含 name、version、description、manifest_version（本例中为 3，即最新的 manifest 版本）、author 和 action 字段的值。在 action 字段中，有 default_popup 的值，其中包含 HTML 文件的路径，本例中为 index.html。
你可以看一下这里，看看 manifest.json 文件的所有配置。
现在，既然我们已经添加了 manifest.json 文件，我们就可以在 Chrome 浏览器中把这个项目作为一个扩展来添加。
为此，我们需要进入选择更多工具，然后从浏览器菜单中选择扩展，如下图所示：
选择扩展程序后，会重定向到 Chrome 的扩展程序页面。请确保在这里启用 Developer mode（开发者模式）。
完成后，你需要点击 Load unpacked 按钮，这将允许我们在 Chrome 扩展商店中加载我们的项目。
现在，该扩展在我们的 Chrome 扩展商店中是可用的。你也可以在浏览器中钉住该扩展，如下面的 gif 所示。
这个扩展只在你的浏览器中工作。如果你想在 Chrome Web 商店发布它，你可以参考这个链接。
总结
如果你有一些 HTML、CSS 和 JavaScript 的知识，你就可以轻松地创建 Chrome 扩展。我希望你读完这篇文章后，会创造出一些很酷的扩展。
Happy Coding!
你可以在 Twitter 上找到我，了解与 Web 开发有关的内容。