怎样创建一个谷歌扩展程序

　　头条创作挑战赛
　　本文同步本人掘金平台的原创翻译：https：juejin。cnpost6890719051820695565
　　谷歌扩展程序是个HTML，CSS和JAVASCRIPT应用程序，它可以安装在谷歌浏览器上。
　　下面的内容，指导感兴趣的人儿创建一个谷歌扩展程序，它允许我们去获取不同国家新型冠状病毒肺炎covid19案例的信息。
　　步骤1：创建目录
　　创建一个名为dist的文件夹，然后创建以下的文件。
　　步骤2：创建HTML文件
　　如下内容：！DOCTYPEhtmlhtmllangenheadmetacharsetUTF8metanameviewportcontentwidthdevicewidth，initialscale1。0metahttpequivXUACompatiblecontentieedgetitleCovid19titlelinkrelstylesheethref。style。cssheadbodyCovid19loading。。。pstrongNewcases：strongspanclasstodayCasesspanpstrongNewdeaths：strongspanclasstodayDeathsspanpstrongTotalcases：strongspanclasscasesspanpstrongTotalrecovered：strongspanclassrecoveredspanpstrongTotaldeaths：strongspanclassdeathsspanpstrongTotaltests：strongspanclasstestsspancenterspanclasssafeStaySafeandHealthyspancenterbodyhtml复制代码步骤3：创建JAVASCRIPT文件
　　JAVASCRIPT文件用来处理API，内容如下：constapihttps：coronavirus19api。herokuapp。comcountries；consterrorsdocument。querySelector（。errors）；constloadingdocument。querySelector（。loading）；constcasesdocument。querySelector（。cases）；constrecovereddocument。querySelector（。recovered）；constdeathsdocument。querySelector（。deaths）；consttestsdocument。querySelector（。tests）；consttodayCasesdocument。querySelector（。todayCases）；consttodayDeathsdocument。querySelector（。todayDeaths）；constresultsdocument。querySelector（。resultcontainer）；results。style。displaynone；loading。style。displaynone；errors。textContent；grabtheformconstformdocument。querySelector（。formdata）；grabthecountrynameconstcountrydocument。querySelector（。countryname）；declareamethodtosearchbycountrynameconstsearchForCountryasynccountryName｛loading。style。displayblock；errors。textContent；try｛constresponseawaitaxios。get（｛api｝｛countryName｝）；if（response。dataCountrynotfound）｛throwerror；｝loading。style。displaynone；todayCases。textContentresponse。data。todayCases；todayDeaths。textContentresponse。data。todayDeaths；cases。textContentresponse。data。cases；recovered。textContentresponse。data。recovered；deaths。textContentresponse。data。deaths；tests。textContentresponse。data。totalTests；results。style。displayblock；｝catch（error）｛loading。style。displaynone；results。style。displaynone；errors。textContentWehavenodataforthecountryyouhaverequested。；｝｝；declareafunctiontohandleformsubmissionconsthandleSubmitasynce｛e。preventDefault（）；searchForCountry（country。value）；console。log（country。value）；｝；form。addEventListener（submit，ehandleSubmit（e））；复制代码
　　上面，我们创建了一个名为searchForCountry的异步函数，在该函数上，我们可以使用asyncawait的语法。asyncawait允许我们当正在等待服务端响应的时候，停止执行之后其他相关的代码。在代码片段前使用await关键字，当在执行该代码片段时，它之后的代码将停止执行。
　　在这个例子中，我们await一个GET请求的响应，然后将响应值赋值给response变量。
　　Axios是一个很受欢迎的JavaScript库，它可以很好处理HTTP请求，并且可以在浏览器平台和Node。js平台使用。它支持所有的现代浏览器，甚至支持IE8。它是基于promise的，所有很方便我们写asyncawait代码。
　　下面是些我们获取数据的API：coronavirus19api。herokuapp。comcountries获取所有国家的详情coronavirus19api。herokuapp。comcountriesi获取印度这个国家的covid19案例信息步骤4：创建CSS文件
　　根据个人的喜欢，编写对HTML进行装饰步骤5：创建MANIFEST。JSON文件
　　创建一个名为manifest。json的文件，然后将下面的代码添加到文件中。这个文件包含了谷歌浏览器如何处理扩展程序的信息。｛manifestversion：2，name：Covid19，version：1。0。0，description：ProvidesthecasesdetailsregardingCovid19withrespectivetoanyCountry，browseraction：｛defaultpopup：index。html｝，icons：｛16：。icons16covid19。png，64：。icons64covid19。png，128：。icons128covid19。png｝，contentsecuritypolicy：scriptsrcselfhttps：unpkg。com；objectsrcself｝复制代码
　　manifestversion，name和version这三个字段很重要，必须声明。扩展程序必须有manifestversion：2的键值对，这与最新谷歌浏览器合拍。而对于nameversion的值我们可以按自己需求赋值。
　　效果GIF图如下：
　　最后一步：添加到谷歌扩展程序
　　你可以点击chrome：extensions跳转到谷歌扩展应用程序的管理页面。
　　你也可以如下操作跳转到谷歌扩展应用程序的管理页面
　　步骤：设置扩展程序
　　当你打开扩展程序管理页面后，你可以点击加载已解压的扩展程序按钮去上传最开始新建的dist文件夹。