当前位置：网站首页 > IT知识 > 正文

如何创建自己的 Google Chrome 扩展程序

liuian 2024-12-11 15:44 55 浏览

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

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

BD新标签页

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

什么是 Chrome 扩展程序？

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

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

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

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 的相应值更新。

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

数据是从 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 中的扩展程序

选择扩展后，它会重定向到 Chrome 中的扩展页面。确保在Developer mode此处启用。

完成后，您需要单击Load unpacked允许我们将项目加载到 Chrome 扩展程序商店中的按钮。

现在，该扩展程序可在我们的 Chrome 扩展程序商店中使用。您还可以将扩展固定在浏览器中，如下面的 gif 所示：

将扩展固定到浏览器

此扩展仅适用于您的浏览器。如果你想在 Chrome Web Store 上发布它，你可以点击这个链接。