谷歌扩展程序是个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="http://www.wokk.cn/style.css" /><script src="http://img.sichuanlong.com/231110/2140431920-2.jpg"></script><script type="text/javascript" src="http://www.wokk.cn/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 http://www.wokk.cn/==="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));复制代码
以上关于本文的内容，仅作参考！温馨提示：如遇健康、疾病相关的问题，请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容，希望对您有所帮助：
- 微信小程序变更主体流程 公众号变更主体需要什么
- 程序设计语言的基本原理 什么是汇编语言源程序
- 英特尔处理器驱动程序 intel驱动程序和支持助理怎么用
- 小程序注册申请流程 小程序发布审核要多久
- 添加开机自启动程序 设置开机自启动软件
- 零基础建立小程序流程 怎样创建微信小程序
- 小程序的推广和营销 小程序如何快速推广
- c语言程序设计基础知识 c语言打开文件路径怎么写
- ps无法打开文件错误解决方法 ps不能保存因为程序错误
- 标签打印机安装与使用 佳博热敏条码打印机怎么安装驱动程序