<![CDATA[ Chrome扩展 - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Chrome扩展 - freeCodeCamp.org ]]> https://www.freecodecamp.org/chinese/news/ Eleventy Mon, 11 May 2026 04:22:29 +0000 60 <![CDATA[ 如何创建你自己的谷歌浏览器扩展 ]]> https://www.freecodecamp.org/chinese/news/building-chrome-extension/ 636a27f7c8777b07d5fd1a1b Tue, 01 Nov 2022 09:56:00 +0000 原文： 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 扩展会是什么样子的

covid_report
Chrome 扩展 - UK Covid 最新报告

正如你所看到的，上述 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 的相应值所更新。

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

covid_browser
浏览器预览 - UK Covid 最新报告

数据是从 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

我们的 manifest.json 文件包含 name、version、description、manifest_version（本例中为 3，即最新的 manifest 版本）、author 和 action 字段的值。在 action 字段中，有 default_popup 的值，其中包含 HTML 文件的路径，本例中为 index.html。

你可以看一下这里，看看 manifest.json 文件的所有配置。

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

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

Untitled-design--1-
在 Chrome 中导航到扩展程序

选择扩展程序后，会重定向到 Chrome 的扩展程序页面。请确保在这里启用 Developer mode（开发者模式）。

Untitled-design--1--1

完成后，你需要点击 Load unpacked 按钮，这将允许我们在 Chrome 扩展商店中加载我们的项目。

现在，该扩展在我们的 Chrome 扩展商店中是可用的。你也可以在浏览器中钉住该扩展，如下面的 gif 所示。

pin_extension

这个扩展只在你的浏览器中工作。如果你想在 Chrome Web 商店发布它，你可以参考这个链接。

总结

如果你有一些 HTML、CSS 和 JavaScript 的知识，你就可以轻松地创建 Chrome 扩展。我希望你读完这篇文章后，会创造出一些很酷的扩展。

Happy Coding!

你可以在 Twitter 上找到我，了解与 Web 开发有关的内容。

]]>