谷歌chrome如何扩展：如何创建自己的

小君 2023-03-02 15:54:09 910

谷歌chrome如何扩展：如何创建自己的在这里，我们将使用https://api.coronavirus.data.gov.uk/v1/data API 来获取数据。为简单起见，我们将仅显示最新记录。如您所见，上述 chrome 扩展显示了英国冠状病毒 (COVID-19) 的最新数据。我们将在这篇博文中研究如何创建这个扩展。chrome 扩展程序是安装在 Chrome 浏览器中的程序，用于增强浏览器的功能。您可以使用 HTML、CSS 和 Javascript 等 Web 技术轻松构建一个。创建 chrome 扩展程序类似于创建 Web 应用程序，但它需要一个manifest.json文件，我们将在本文的最后一节中讨论该文件。UK-Chrome 扩展的最新 Covid 报告

谷歌chrome如何扩展：如何创建自己的(1)

如果您是 Google Chrome 用户，您可能已经在浏览器中使用了一些扩展程序。

你有没有想过如何自己建造一个？在本文中，我将向您展示如何从头开始创建 chrome 扩展程序。

BD新标签页

顺便一提，BD新标签页就是我个人开发的一款Chrome扩展，有兴趣的朋友可以安装试试哦

谷歌chrome如何扩展：如何创建自己的(2)

什么是 Chrome 扩展程序？
我们的 Chrome 扩展程序会是什么样子？
如何创建 Chrome 扩展程序
创建 manifest.JSON 文件
结论

什么是 Chrome 扩展程序？

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

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

我们的 Chrome 扩展程序会是什么样子？

谷歌chrome如何扩展：如何创建自己的(3)

UK-Chrome 扩展的最新 Covid 报告

如您所见，上述 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 的相应值更新。

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

谷歌chrome如何扩展：如何创建自己的(4)

数据是从 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" } }Manifest.json

我们的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如何扩展：如何创建自己的(5)