Chrome插件，真實用！
作為上市場份額占有率最高的瀏覽器，很多同學(xué)應(yīng)該都用過Google Chrome，而在使用過程中，應(yīng)該或多或少都是用過Chrome擴展。
什么是Chrome擴展？
Chrome擴展是安裝在Chrome瀏覽器中的一個程序，可以增強瀏覽器的功能。
你可以使用HTML、CSS和JavaScript等技術(shù)輕松開發(fā)一款Chrome擴展。
創(chuàng)建chrome擴展程序與創(chuàng)建Web應(yīng)用程序類似，但，有一點不同，它需要一個manifest.json文件，這個在后面會介紹。
最終創(chuàng)建的Chrome插件長什么樣？
正如你所看到的，上述chrome擴展顯示了英國冠狀病毒（COVID-19）的最新數(shù)據(jù)。
我們將在這篇文章中研究如何創(chuàng)建這個擴展。
在這里，我們將使用https://api.coronavirus.data.gov.uk/v1/data API獲取數(shù)據(jù)。
為了簡單起見，我們將只顯示最新的記錄。
如何創(chuàng)建Chrome擴展？
首先，我們需要創(chuàng)建一個空的文件夾，用于添加HTML、CSS和JavaScript文件。
在這個文件夾中，首先創(chuàng)建一個index.html文件：
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
現(xiàn)在，在head標簽中添加一個指向Bootstrap CDN的鏈接。
在這里會使用Bootstrap框架，這樣就不必在這個例子中編寫一些額外的CSS。
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
在演示中，我們看到記錄被顯示為一個表。
所以，現(xiàn)在我們需要創(chuàng)建一個表。
<!DOCTYPE html>
<html>
<head>
<title>Covid-19 Stats- UK</title>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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)建了一個寬度為450px的表格。
表中有四個不同的標題：日期、國家、確診、和死亡數(shù)。
在這里，你可以看到每個表的數(shù)據(jù)td都被分配了不同的ID，我們將在JavaScript中使用這些ID的值來更新表格數(shù)據(jù)。
另外，在這里，在加載所有的HTML內(nèi)容后，在最后加載了JavaScript。
現(xiàn)在，由于表格已經(jīng)顯示出來了，需要著手編寫JavaScript，從API中獲取數(shù)據(jù)。
讓我們創(chuàng)建一個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的異步函數(shù)從https://api.coronavirus.data.gov.uk/v1/data API中獲取數(shù)據(jù) JSON數(shù)據(jù)被存儲在一個名為 record的變量中。td的HTML內(nèi)容中的date、areaName、latestBy和deathNew的id被API的相應(yīng)值更新
如果在瀏覽器中打開，就能看到以下結(jié)果：
數(shù)據(jù)是從API中獲取的，一旦API中的數(shù)據(jù)發(fā)生變化，它就會不斷得更新。
Manifest.json文件
正如之前討論的那樣，構(gòu)建Chrome擴展程序與構(gòu)建任何網(wǎng)絡(luò)應(yīng)用程序類似。
唯一不同的是，Chrome擴展程序需要一個manifest.json文件，我們需要在該文件中保存所有配置。
manifest.json文件包含構(gòu)建Chrome擴展程序所需的所有必要信息，它是擴展程序檢查的第一個文件，所有內(nèi)容都從這個文件中加載。
現(xiàn)在，讓我們在根文件夾中創(chuàng)建一個manifest.json文件并添加以下代碼：
{
"name": "Covid-19 Stats UK",
"version": "1.0.0",
"description": "latest covid data of UK",
"manifest_version": 3,
"author": "Jackpop",
"action":{
"default_popup": "index.html",
"default_title": "Latest Covid Report"
}
}
manifest.json文件包含名稱、版本、描述、manifest_version（本例中為 3，即最新的 manifest 版本）、作者和動作字段的值。
在action字段中，有個名為default_popup的值，其中包含HTML文件的路徑，本例中為index.html。
現(xiàn)在，已經(jīng)添加了manifest.json文件，接下來就可以在Chrome瀏覽器中把這個項目作為一個擴展添加。
為此，需要進入選擇更多工具，然后從瀏覽器菜單中選擇擴展，如下圖所示：
選擇擴展程序后，會重定向到Chrome的擴展程序頁面，請確保在這里啟用開發(fā)者模式。
選擇剛才創(chuàng)建的項目就可以完成安裝，進而就可以在擴展列表里打開剛剛開發(fā)的Chrome擴展。
本文以一個簡單的例子，從頭到尾介紹了一下如何開發(fā)并安裝一款Chrome擴展，拋磚引玉，感興趣的同學(xué)可以挖掘并開發(fā)更多有趣的Chrome擴展。
推薦大家關(guān)注：