构建 Chrome 扩展程序需要您具备 HTML、CSS、JavaScript 和 Bootstrap 的知识。在本文中，我们将进行扩展以跟踪各种加密货币的价格。为了获取有关加密货币价格的数据，我们将使用称为 CryptoCompare 的 API。
什么是 API?
API 代表应用程序编程接口。基本上，它是一个接受我们的请求并相应地返回响应的信使。 API 也有称为端点的东西。端点是一个 URL，它允许 API 访问服务器的某些部分并相应地检索数据。 API 以 JSON(JavaScript Object Notation)的形式返回数据，该数据采用键值对的形式。
让我们开始构建加密货币价格跟踪器！！！
构建用户界面-
首先，我们将创建两个名为popup.html和popup.js 的文件(为什么我们将它们命名为 popup 稍后会清楚。现在在 popup.html 中，我们将创建扩展的基本 UI。首先添加HTML 的基本样板代码比 body 部分添加如下所示的代码：-
HTML
CryptoCount
CryptoCount
Javascript
document.querySelector(".changeData")
.addEventListener("click", changeData);
const getDataAndRender =
(function getData(currency = "INR") {
const xhr = new XMLHttpRequest();
const url =
"min-api.cryptocompare.com/data/top/totalvolfull";
xhr.open("GET",
`https://{url}?limit=10&tsym=${currency}&api_key={API_KEY}`,
true);
let output = "
Coin
PRICE
HIGH DAY
LOW DAY
";
xhr.onload = function () {
if (this.status === 200) {
const response = JSON.parse(this.responseText);
const dataArr = response.Data;
dataArr.forEach(function (data) {
const name = data.CoinInfo.FullName;
const imgURL = data.CoinInfo.ImageUrl;
const price = data.DISPLAY.INR.PRICE;
console.log(typeof data.CoinInfo.FullName);
const img =
`https://www.cryptocompare.com/${imgURL}`;
const highDay = data.DISPLAY.INR.HIGHDAY;
const lowDay = data.DISPLAY.INR.LOWDAY;
output +=
` 
${name}
${price}
${highDay}
${lowDay} Javascript
function getCurrency() {
const selectElement =document.querySelector('#select1');
const output = selectElement.value;
// console.log("get" ,output);
return output;
}Javascript
function changeData(){
const newOutput=getCurrency();
console.log(newOutput);
document.querySelector(".data-back").innerHTML="";
getDataNew(newOutput);
}Javascript
{
"manifest_version":2,
"name":"CryptoCount",
"description":"CryptoCount tells you
the current price of top cryptocurrencies",
"version":"1.0.0",
"icons":{"128":"favicon.png"},
"browser_action":{
"default_icon":"favicon.png",
"default_popup":"popup.html"
},
"permissions":["activeTab"]
}此代码将添加标题 CryptoCount(这是我们命名它的名称，您可以随意命名)和一个包含 4 个选项的下拉列表，用于更改我们将从 CryptoCompare API 获取的数据的货币。添加了一个按钮，它将从 API 中获取数据，我们将使用 JavaScript 将获取的数据动态添加到表格元素中。
添加一些 JavaScript –
在我们的popup.js文件中，我们将添加一个IFFE函数，基本上这个函数会在 DOM 加载后立即调用。我们将用于获取数据的 API 是：- https://min-api.cryptocompare.com/data/top/totalvolfull?limit=10&tsym=INR&api_key={your_API_KEY go here}。此 IFFI函数将呈现您可以通过执行 console.log(response) 检查的数据。
Javascript
document.querySelector(".changeData")
.addEventListener("click", changeData);
const getDataAndRender =
(function getData(currency = "INR") {
const xhr = new XMLHttpRequest();
const url =
"min-api.cryptocompare.com/data/top/totalvolfull";
xhr.open("GET",
`https://{url}?limit=10&tsym=${currency}&api_key={API_KEY}`,
true);
let output = "
Coin
PRICE
HIGH DAY
LOW DAY
";
xhr.onload = function () {
if (this.status === 200) {
const response = JSON.parse(this.responseText);
const dataArr = response.Data;
dataArr.forEach(function (data) {
const name = data.CoinInfo.FullName;
const imgURL = data.CoinInfo.ImageUrl;
const price = data.DISPLAY.INR.PRICE;
console.log(typeof data.CoinInfo.FullName);
const img =
`https://www.cryptocompare.com/${imgURL}`;
const highDay = data.DISPLAY.INR.HIGHDAY;
const lowDay = data.DISPLAY.INR.LOWDAY;
output +=
` ${name}
${price}
${highDay}
${lowDay}
现在我们已经将数据记录到控制台中，我们可以看到我们能够成功地从 API 获取数据。现在是时候将这些数据反映到我们扩展的 UI 中了。为此，我们将选择类名为 data-back 的 DOM 元素。现在我们将插入包含
这就是我们的用户界面的样子——
用户界面
