如何創(chuàng)建自己的 Google Chrome 擴(kuò)展程序
如果您是 Google Chrome 用戶，您可能已經(jīng)在瀏覽器中使用了一些擴(kuò)展程序。
你有沒有想過如何自己建造一個(gè)？在本文中，我將向您展示如何從頭開始創(chuàng)建 Chrome 擴(kuò)展程序。
BD新標(biāo)簽頁
順便一提，BD新標(biāo)簽頁就是我個(gè)人開發(fā)的一款Chrome擴(kuò)展，有興趣的朋友可以安裝試試哦
目錄
什么是 Chrome 擴(kuò)展程序？
我們的 Chrome 擴(kuò)展程序會是什么樣子？
如何創(chuàng)建 Chrome 擴(kuò)展程序
創(chuàng)建 manifest.json 文件
結(jié)論
什么是 Chrome 擴(kuò)展程序？
chrome 擴(kuò)展程序是安裝在 Chrome 瀏覽器中的程序，用于增強(qiáng)瀏覽器的功能。您可以使用 HTML、CSS 和 JavaScript 等 Web 技術(shù)輕松構(gòu)建一個(gè)。
創(chuàng)建 chrome 擴(kuò)展程序類似于創(chuàng)建 Web 應(yīng)用程序，但它需要一個(gè)manifest.json文件，我們將在本文的最后一節(jié)中討論該文件。
我們的 Chrome 擴(kuò)展程序會是什么樣子？
UK-Chrome 擴(kuò)展的最新 Covid 報(bào)告
如您所見，上述 chrome 擴(kuò)展顯示了英國冠狀病毒 (COVID-19) 的最新數(shù)據(jù)。我們將在這篇博文中研究如何創(chuàng)建這個(gè)擴(kuò)展。
在這里，我們將使用
https://api.coronavirus.data.gov.uk/v1/data API 來獲取數(shù)據(jù)。為簡單起見，我們將僅顯示最新記錄。
這個(gè)項(xiàng)目的完整源代碼可以在GitHub上找到。
如何創(chuàng)建 Chrome 擴(kuò)展程序
首先，我們需要創(chuàng)建一個(gè)空文件夾，我們將在其中添加 HTML、CSS 和 JavaScript 文件。
在該文件夾中，讓我們使用以下 HTML 樣板代碼創(chuàng)建一個(gè) index.html 文件：
<html><head>
? ?<title>Covid-19 Stats- UK</title>
? ?<meta charset="utf-8"></head><body></body></html>
現(xiàn)在，讓我們在 head 標(biāo)簽中添加一個(gè)指向 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>
在演示中，我們看到記錄顯示為表格。所以現(xiàn)在我們需要創(chuàng)建一個(gè)表。
<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>
上面的代碼創(chuàng)建了一個(gè)寬度為450px. 表格中有四個(gè)不同的標(biāo)題：Date、Country、Confirmed和Deaths。
在這里，您可以看到每個(gè)表數(shù)據(jù)td都被分配了不同的 ID。我們將在 JavaScript 中使用這些 ID 的值來更新表數(shù)據(jù)。另外，這里我們在加載完所有 HTML 內(nèi)容后，最后加載了 JavaScript。
現(xiàn)在，由于表格已顯示，我們需要編寫 JavaScript 以便從 API 獲取數(shù)據(jù)。
讓我們創(chuàng)建一個(gè)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();
現(xiàn)在，讓我們分解上面的代碼：
在這里，我們使用名為fetchData.
正在從https://api.coronavirus.data.gov.uk/v1/data API 獲取數(shù)據(jù)。
JSON 數(shù)據(jù)存儲在一個(gè)名為record.
帶有 ids date、areaName和latestBy的td 的 HTML 內(nèi)容deathNew由 API 的相應(yīng)值更新。
如果我們檢查瀏覽器，我們將能夠看到以下結(jié)果。
數(shù)據(jù)是從 API 中獲取的，一旦 API 中的數(shù)據(jù)發(fā)生變化，它就會不斷更新。
Manifest.json 文件
正如我們之前所討論的，構(gòu)建 Chrome 擴(kuò)展程序類似于構(gòu)建任何 Web 應(yīng)用程序。唯一的區(qū)別是 Chrome 擴(kuò)展需要一個(gè)manifest.json我們保存所有配置的文件。
manifest.json 文件包含構(gòu)建 Chrome 擴(kuò)展程序所需的所有必要信息。它是擴(kuò)展檢查的第一個(gè)文件，所有內(nèi)容都是從這個(gè)文件加載的。
現(xiàn)在，讓我們在根文件夾中創(chuàng)建一個(gè)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。
現(xiàn)在，由于我們還添加了 manifest.json 文件，我們準(zhǔn)備將此項(xiàng)目添加為 Chrome 瀏覽器中的擴(kuò)展。
為此，我們需要轉(zhuǎn)到Select More Tools然后Extensions從瀏覽器菜單中進(jìn)行選擇，如下圖所示：
導(dǎo)航到 Chrome 中的擴(kuò)展程序
選擇擴(kuò)展后，它會重定向到 Chrome 中的擴(kuò)展頁面。確保在Developer mode此處啟用。
完成后，您需要單擊Load unpacked允許我們將項(xiàng)目加載到 Chrome 擴(kuò)展程序商店中的按鈕。
現(xiàn)在，該擴(kuò)展程序可在我們的 Chrome 擴(kuò)展程序商店中使用。您還可以將擴(kuò)展固定在瀏覽器中，如下面的 gif 所示：
將擴(kuò)展固定到瀏覽器
此擴(kuò)展僅適用于您的瀏覽器。如果你想在 Chrome Web Store 上發(fā)布它，你可以點(diǎn)擊這個(gè)鏈接。
結(jié)論
如果您有一些 HTML、CSS 和 JavaScript 知識，則可以輕松構(gòu)建 Chrome 擴(kuò)展。我希望在閱讀完這篇博文后，您將創(chuàng)建一些很酷的擴(kuò)展。
快樂編碼！
