So easy ！创建自己的谷歌浏览器插件

「这是我参与2022首次更文挑战的第11天，活动详情查看：2022首次更文挑战」。

什么是 Chrome 扩展程序？

chrome 扩展程序是安装在 Chrome 浏览器中的程序，用于增强浏览器的功能。您可以使用 HTML、CSS 和 JavaScript 等 Web 技术轻松构建一个。

创建 chrome 扩展程序类似于创建 Web 应用程序，但它需要一个manifest.json文件，我们将在本文的最后一节中讨论该文件。

如何创建 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/[email protected]/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/[email protected]/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.
正在从api.coronavirus.data.gov.uk/v1/data API 获取数据。
JSON 数据存储在一个名为record.
带有 ids date、areaName和latestBy的td 的 HTML 内容deathNew由 API 的相应值更新。

如果我们检查浏览器，我们将能够看到以下结果。

covid_browser 数据是从 API 中获取的，一旦 API 中的数据发生变化，它就会不断更新。

Manifest.json 文件

正如我们之前所讨论的，构建 Chrome 扩展程序类似于构建任何 Web 应用程序。唯一的区别是 Chrome 扩展需要一个manifest.json我们保存所有配置的文件。

manifest.json 文件包含构建 Chrome 扩展程序所需的所有必要信息。它是扩展检查的第一个文件，所有内容都是从这个文件加载的。

现在，让我们在根文件夹中创建一个manifest.json文件并添加以下代码：

{
    "name": "Covid-19 Stats US",
    "version": "1.0.0",
    "description": "latest covid data of US",
    "manifest_version": 3,
    "author": "Sampurna Chapagain",
    "action":{
        "default_popup": "index.html",
        "default_title": "Latest Covid Report"
    }
}
复制代码

我们的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从浏览器菜单中进行选择，如下图所示：

导航到 Chrome 中的扩展程序