如何从零开始开发一款 chrome 扩展？

作者：Jackpop

2022 年 6 月 14 日
本文字数：2414 字
阅读完需：约 8 分钟

作为市场份额占有率最高的浏览器，很多同学应该都用过 Google Chrome，而在使用过程中，应该或多或少都是用过 Chrome 扩展。

什么是 Chrome 扩展？

Chrome 扩展是安装在 Chrome 浏览器中的一个程序，可以增强浏览器的功能。

你可以使用 HTML、CSS 和 JavaScript 等技术轻松开个一款 Chrome 扩展。

创建 chrome 扩展程序与创建 Web 应用程序类似，但，有一点不同，它需要一个 manifest.json 文件，这个在后面会介绍。

最终创建的 Chrome 插件长什么样？

编辑切换为居中

添加图片注释，不超过 140 字（可选）

正如你所看到的，上述 chrome 扩展显示了英国冠状病毒（COVID-19）的最新数据。

我们将在这篇文章中研究如何创建这个扩展。

在这里，我们将使用https://api.coronavirus.data.gov.uk/v1/data API 获取数据。

为了简单起见，我们将只显示最新的记录。

如何创建 Chrome 扩展？

首先，我们需要创建一个空的文件夹，用于添加 HTML、CSS 和 JavaScript 文件。

在这个文件夹中，首先创建一个 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 的表格。

表中有四个不同的标题：日期、国家、确认、和死亡数。

在这里，你可以看到每个表的数据 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 的变量中。
td 的 HTML 内容中的 date、areaName、latestBy 和 deathNew 的 id 被 API 的相应值更新

如果在浏览器中打开，就能看到以下结果：

编辑切换为居中

添加图片注释，不超过 140 字（可选）

数据是从 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": "Jackpop",    "action":{        "default_popup": "index.html",        "default_title": "Latest Covid Report"    }}

复制代码

manifest.json 文件包含名称、版本、描述、manifest_version（本例中为 3，即最新的 manifest 版本）、作者和动作字段的值。

在 action 字段中，有个名为 default_popup 的值，其中包含 HTML 文件的路径，本例中为 index.html。

现在，已经添加了 manifest.json 文件，接下来就可以在 Chrome 浏览器中把这个项目作为一个扩展添加。

为此，需要进入选择更多工具，然后从浏览器菜单中选择扩展，如下图所示：