怎樣從零開始創(chuàng)建一個谷歌擴(kuò)展程序？
谷歌擴(kuò)展程序是個HTML,CSS和JAVASCRIPT應(yīng)用程序，它可以安裝在谷歌瀏覽器上。
下面的內(nèi)容，指導(dǎo)感興趣的人兒創(chuàng)建一個谷歌擴(kuò)展程序，它允許我們?nèi)カ@取不同國家新型冠狀病毒肺炎-covid19案例的信息。
步驟1：創(chuàng)建目錄
創(chuàng)建一個名為dist的文件夾，然后創(chuàng)建以下的文件。
步驟2：創(chuàng)建HTML文件
如下內(nèi)容：
html>
<html?lang="en">
??<head>
????<meta?charset="UTF-8"?/>
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0"?/>
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge"?/>
????<title>Covid?19title>
????<link?rel="stylesheet"?href="./style.css"?/>
????<script?src="https://unpkg.com/axios/dist/axios.min.js">script>
????<script?type="text/javascript"?src="index.js"?defer>script>
??head>
??<body>
????<div?class="header">Covid?19div>
????<div?class="container">
????<form?class="form-data"?autocomplete="on">
??????<div?class="enter-country">
????????<b>Enter?a?country?name:b>
??????div>
??????<div>
????????<input?type="text"?class="country-name"?/>
??????div><br>
??????<button?class="search-btn">Searchbutton>
????form>
????<div?class="result">
??????<div?class="loading">loading...div>
??????<div?class="errors">div>
??????<div?class="data">div>
??????<div?class="result-container">
????????<p><strong>New?cases:?strong><span?class="todayCases">span>p>
????????<p><strong>New?deaths:?strong><span?class="todayDeaths">span>p>
????????<p><strong>Total?cases:?strong><span?class="cases">span>p>
????????<p><strong>Total?recovered:?strong>?<span?class="recovered">span>p>
????????<p><strong>Total?deaths:?strong><span?class="deaths">span>p>
????????<p><strong>Total?tests:?strong><span?class="tests">span>p>
????????<center><span?class="safe">Stay?Safe?and?Healthyspan>center>
??????div>
????div>
??div>
body>
html>
步驟3：創(chuàng)建JAVASCRIPT文件
JAVASCRIPT文件用來處理API，內(nèi)容如下：
const?api?=?"https://coronavirus-19-api.herokuapp.com/countries";
const?errors?=?document.querySelector(".errors");
const?loading?=?document.querySelector(".loading");
const?cases?=?document.querySelector(".cases");
const?recovered?=?document.querySelector(".recovered");
const?deaths?=?document.querySelector(".deaths");
const?tests=document.querySelector(".tests");
const?todayCases=document.querySelector(".todayCases");
const?todayDeaths=document.querySelector(".todayDeaths");
const?results?=?document.querySelector(".result-container");
results.style.display?=?"none";
loading.style.display?=?"none";
errors.textContent?=?"";
//?grab?the?form
const?form?=?document.querySelector(".form-data");
//?grab?the?country?name
const?country?=?document.querySelector(".country-name");
//?declare?a?method?to?search?by?country?name
const?searchForCountry?=?async?countryName?=>?{
??loading.style.display?=?"block";
??errors.textContent?=?"";
??try?{
????const?response?=?await?axios.get(`${api}/${countryName}`);
????if(response.data?==="Country?not?found"){?throw?error;??}
????loading.style.display?=?"none";
????todayCases.textContent?=?response.data.todayCases;
????todayDeaths.textContent?=?response.data.todayDeaths;
????cases.textContent?=?response.data.cases;
????recovered.textContent?=?response.data.recovered;
????deaths.textContent?=?response.data.deaths;
????tests.textContent?=??response.data.totalTests;
????results.style.display?=?"block";
??}?catch?(error)?{
????loading.style.display?=?"none";
????results.style.display?=?"none";
????errors.textContent?=?"We?have?no?data?for?the?country?you?have?requested.";
??}
};
//?declare?a?function?to?handle?form?submission
const?handleSubmit?=?async?e?=>?{
??e.preventDefault();
??searchForCountry(country.value);
??console.log(country.value);
};
form.addEventListener("submit",?e?=>?handleSubmit(e));
上面，我們創(chuàng)建了一個名為searchForCountry的異步函數(shù)，在該函數(shù)上，我們可以使用async-await的語法。async await允許我們當(dāng)正在等待服務(wù)端響應(yīng)的時候，停止執(zhí)行之后其他相關(guān)的代碼。在代碼片段前使用await關(guān)鍵字，當(dāng)在執(zhí)行該代碼片段時，它之后的代碼將停止執(zhí)行。
在這個例子中，我們await一個GET請求的響應(yīng)，然后將響應(yīng)值賦值給response變量。
Axios是一個很受歡迎的JavaScript庫，它可以很好處理HTTP請求，并且可以在瀏覽器平臺和Node.js平臺使用。它支持所有的現(xiàn)代瀏覽器，甚至支持IE8。它是基于promise的，所有很方便我們寫async/await代碼。
下面是些我們獲取數(shù)據(jù)的API：
coronavirus-19-api.herokuapp.com/countries - 獲取所有國家的詳情 coronavirus-19-api.herokuapp.com/countries/i… - 獲取印度這個國家的 covid19案例信息
步驟4：創(chuàng)建CSS文件
根據(jù)個人的喜歡，編寫對HTML進(jìn)行裝飾
步驟5：創(chuàng)建MANIFEST.JSON文件
創(chuàng)建一個名為manifest.json的文件，然后將下面的代碼添加到文件中。這個文件包含了谷歌瀏覽器如何處理擴(kuò)展程序的信息。
{
????"manifest_version":?2,
????"name":?"Covid19",
????"version":?"1.0.0",
????"description":?"Provides?the?cases?details?regarding?Covid19?with?respective?to?any?Country",
????"browser_action":?{
??????"default_popup":?"index.html"
????},
????"icons":{
??????"16":?"./icons/16covid-19.png",
??????"64":?"./icons/64covid-19.png",
?????"128":?"./icons/128covid-19.png"
????},
????"content_security_policy":?"script-src?'self'?https://unpkg.com?;?object-src?'self'"
}
manifest_version, name 和 version這三個字段很重要，必須聲明。擴(kuò)展程序必須有"manifest_version": 2的鍵值對，這與最新谷歌瀏覽器合拍。而對于name/version的值我們可以按自己需求賦值。
效果GIF圖如下：
最后一步：添加到谷歌擴(kuò)展程序
你可以點擊chrome://extensions 跳轉(zhuǎn)到谷歌擴(kuò)展應(yīng)用程序的管理頁面。
你也可以如下操作跳轉(zhuǎn)到谷歌擴(kuò)展應(yīng)用程序的管理頁面
步驟：設(shè)置 - 擴(kuò)展程序
當(dāng)你打開擴(kuò)展程序管理頁面后，你可以點擊加載已解壓的擴(kuò)展程序按鈕去上傳最開始新建的dist文件夾。
后話
原文：https://dev.to/sunilaleti/how-to-build-a-chrome-extension-3lpj
更多內(nèi)容：https://github.com/reng99/blogs