如何创建自己的谷歌浏览器插件

2022-03-05 本文已影响0人追梦人在路上不断追寻

什么是 Chrome 扩展程序？

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

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

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

covid_report

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

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

covid_browser

<figcaption style="box-sizing: inherit; margin: 1em auto 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.5em; font-family: inherit; font-size: 17.6px; vertical-align: baseline; text-align: center; max-width: 1040px;">英国最新的 Covid 报告 - 浏览器预览</figcaption>

数据是从 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文件包含name, version, description,的值manifest_version（在本例中为 3，这是最新的清单版本），author, 和action字段。在 action 字段中，它的值default_popup包含指向index.html本示例中的 HTML 文件的路径。

您可以在这里查看文件的所有配置manifest.json。

现在，由于我们还添加了 manifest.json 文件，我们准备将此项目添加为 Chrome 浏览器中的扩展。

为此，我们需要转到Select More Tools然后Extensions从浏览器菜单中进行选择，如下图所示：

无题设计--1-

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

无标题设计--1--1

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

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

pin_extension

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

结论

如果您有一些 HTML、CSS 和 JavaScript 知识，则可以轻松构建 Chrome 扩展。我希望在阅读完这篇博文后，您将创建一些很酷的扩展。

如何创建自己的谷歌浏览器插件

什么是 Chrome 扩展程序？

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

如何创建 Chrome 扩展程序

Manifest.json 文件

结论

猜你喜欢

热点阅读