谷歌扩展程序是个HTML,CSS和JAVASCRIPT应用程序，它可以安装在谷歌浏览器上。
下面的内容，指导感兴趣的人儿创建一个谷歌扩展程序，它允许我们去获取不同国家新型冠状病毒肺炎-covid19案例的信息。
步骤1：创建目录
创建一个名为dist的文件夹，然后创建以下的文件。
步骤2：创建HTML文件
如下内容：
<!DOCTYPE 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 19</title> <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 19</div> <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\">Search</button> </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 Healthy</span></center> </div> </div> </div></body></html>复制代码步骤3：创建JAVASCRIPT文件
JAVASCRIPT文件用来处理API，内容如下：
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 formconst form = document.querySelector(\".form-data\");// grab the country nameconst country = document.querySelector(\".country-name\");// declare a method to search by country nameconst 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 submissionconst handleSubmit = async e => { e.preventDefault(); searchForCountry(country.value); console.log(country.value);};form.addEventListener(\"submit\", e => handleSubmit(e));复制代码上面，我们创建了一个名为searchForCountry的异步函数，在该函数上，我们可以使用async-await的语法。async await允许我们当正在等待服务端响应的时候，停止执行之后其他相关的代码。在代码片段前使用await关键字，当在执行该代码片段时，它之后的代码将停止执行。
在这个例子中，我们await一个GET请求的响应，然后将响应值赋值给response变量。
Axios是一个很受欢迎的JavaScript库，它可以很好处理HTTP请求，并且可以在浏览器平台和Node.js平台使用。它支持所有的现代浏览器，甚至支持IE8。它是基于promise的，所有很方便我们写async/await代码。
下面是些我们获取数据的API：
- coronavirus-19-api.herokuapp.com/countries – 获取所有国家的详情
- coronavirus-19-api.herokuapp.com/countries/i… – 获取印度这个国家的covid19案例信息
步骤4：创建CSS文件
根据个人的喜欢，编写对HTML进行装饰
步骤5：创建MANIFEST.JSON文件
创建一个名为manifest.json的文件，然后将下面的代码添加到文件中。这个文件包含了谷歌浏览器如何处理扩展程序的信息。
{ \"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这三个字段很重要，必须声明。扩展程序必须有”manifest_version”: 2的键值对，这与最新谷歌浏览器合拍。而对于name/version的值我们可以按自己需求赋值。
效果GIF图如下：
最后一步：添加到谷歌扩展程序
你可以点击chrome://extensions 跳转到谷歌扩展应用程序的管理页面。
你也可以如下操作跳转到谷歌扩展应用程序的管理页面
步骤：设置 – 扩展程序
当你打开扩展程序管理页面后，你可以点击加载已解压的扩展程序按钮去上传最开始新建的dist文件夹。
本文内容由互联网用户自发贡献，该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 97552693@qq.com 举报，一经查实，本站将立刻删除。本文链接：https://m.teaffka.com/n/13684.html
