#头条创作挑战赛#
本文同步本人掘金平台的原创翻译:https://juejin.cn/post/6890719051820695565
谷歌扩展程序是个HTML,CSS和JAVASCRIPT应用程序,它可以安装在谷歌浏览器上。
下面的内容,指导感兴趣的人儿创建一个谷歌扩展程序,它允许我们去获取不同国家新型冠状病毒肺炎-covid19案例的信息。
创建一个名为dist的文件夹,然后创建以下的文件。
如下内容:
Covid 19
Covid 19
loading...
New cases:
New deaths:
Total cases:
Total recovered:
Total deaths:
Total tests:
Stay Safe and Healthy
复制代码
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 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));
复制代码
上面,我们创建了一个名为searchForCountry的异步函数,在该函数上,我们可以使用async-await的语法。async await允许我们当正在等待服务端响应的时候,停止执行之后其他相关的代码。在代码片段前使用await关键字,当在执行该代码片段时,它之后的代码将停止执行。
在这个例子中,我们await一个GET请求的响应,然后将响应值赋值给response变量。
Axios是一个很受欢迎的JavaScript库,它可以很好处理HTTP请求,并且可以在浏览器平台和Node.js平台使用。它支持所有的现代浏览器,甚至支持IE8。它是基于promise的,所有很方便我们写async/await代码。
下面是些我们获取数据的API:
根据个人的喜欢,编写对HTML进行装饰
创建一个名为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文件夹。
页面更新:2024-04-24
本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828
© CopyRight 2020-2024 All Rights Reserved. Powered By 71396.com 闽ICP备11008920号-4
闽公网安备35020302034903号