创建加密货币价格跟踪Chrome扩展程序

构建Chrome扩展程序要求您具有HTML，CSS，JavaScript和Bootstrap的知识。在本文中，我们将进行扩展，以跟踪各种加密货币的价格。为了获取有关加密货币价格的数据，我们将使用称为CryptoCompare的API。

什么是API?

API代表应用程序编程接口。基本上，它是一个使者，它接受我们的请求并相应地返回响应。 API也有称为终结点的东西。端点是一个URL，它使API可以访问服务器的某些部分并相应地检索数据。 API以JSON(JavaScript对象表示法)的形式返回数据，该数据以键值对的形式出现。

让我们开始构建加密货币价格跟踪器！！！

构建用户界面

首先，我们将创建两个名为popup.html和popup.js的文件(为什么我们将它们命名为popup，稍后会清除。现在在popup.html中，我们将创建扩展程序的基本UI。首先添加HTML的基本样板代码比正文部分中的代码如下所示：-

HTML

  

    
    
  
    
    CryptoCount
  
    
        html,
        body {
            font-family: "Open Sans", sans-serif;
            font-size: 14px;
            margin: 0;
            min-height: 600px;
            padding: 0;
            width: 500px;
        }
    

  

    
        CryptoCount
        
            
                INR
                USD
                EUR
                BTC
            
            
                Fetch Data
            
        
        
        
    
  
    

  

这段代码将添加标题CryptoCount(这是我们命名的名称，您可以根据需要命名)和一个下拉列表，其中包含4个选项，用于更改将从CryptoCompare API获取的数据的币种。添加了一个按钮，它将带走来自API的数据，我们将使用JavaScript动态地将带走的数据添加到table元素。

添加一些JavaScript –

在我们的popup.js文件中，我们将添加一个IFFE函数，该函数基本上是在加载DOM后立即调用的。我们将用于获取数据的API是：-https://min-api.cryptocompare.com/data/top/totalvolfull?limit=10&tsym=INR&api_key= {您的API_KEY在这里}。此IFFI函数将通过执行console.log(response)呈现您可以检查的数据。

Java脚本

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}`
        })
        document.querySelector(
            ".data-back").innerHTML = output;
    }
}
xhr.send();
  
}) ();

现在，当我们将数据记录到控制台中时，我们可以看到我们已经成功地能够从API提取数据。现在是时候将该数据反映到我们扩展的UI中了。为此，我们将选择具有data-back类名称的DOM元素。现在，我们将插入包含 元素的输出变量，并使用诸如图像，名称，价格之类的参数(您可以从API中获取大量信息，但为简单起见，我们将仅使用图像URL，名称，硬币价格)。现在，使用以下代码行将其添加到DOM：– document.querySelector(“。data-back”)。innerHTML = output;

这就是我们的UI外观-

使用者介面

现在，我们将实现动态更改货币类型的功能。为了实现这一点，我们将获得下拉列表中存在的字段的值。默认情况下，货币类型为卢比。为了获得下拉列表中存在的货币类型，我们将创建一个名为getCurrency()的函数。

Java脚本

function getCurrency() { 
    const selectElement =document.querySelector('#select1'); 
                
    const output = selectElement.value; 
     
    // console.log("get" ,output);
    return output;
}

当有人选择货币类型时，getCurrency方法将返回是“ INR”，“ USD”，“ BTC”还是“ EUR”。现在，我们将端点从INR(默认端点)更改为从列表中选择的值，以进行新的API调用。

Java脚本

function changeData(){
  
    const newOutput=getCurrency();
    console.log(newOutput);
    document.querySelector(".data-back").innerHTML="";
      
    getDataNew(newOutput);
}

单击Fetch按钮将获取数据，并触发方法changeData，该方法将首先清除DOM中已经存在的内容，并将具有新货币类型的新表元素插入DOM中，并且还将进一步调用两个函数告诉货币类型，其他将在DOM中插入更改了货币类型的新表。函数getDataNew的实现与上面讨论的getData函数的实现相同。该CryptoCurrency价格跟踪器的开发部分已经结束。现在，我们将对其进行chrome扩展。

制作一个Chrome扩展程序–要制作一个Chrome扩展程序，我们需要一个manifest.json文件，该文件的创建如下所示–

Java脚本

{
    "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"]
}

这是根据https://developer.chrome.com/extensions/manifest的文档创建清单文件的方法。将此文件与popup.html，popup.js一起添加到文件夹中。根据文档，我们将它们命名为popup.js和popup.html。创建一个名为images的文件夹，然后将要显示的图像放置在Google Chrome的Chrome扩展栏中。

现在，有两种方法可以上传到chrome商店-

1.一种方法是支付5美元的费用并创建一个开发人员帐户。

2.另一种是免费上传到chrome商店的方法，如下所示–

• 在您的Chrome浏览器的网址中，输入chrome：// extensions /
• 现在打开开发人员模式。
• 现在，单击左上角的按钮，显示“装入未包装的货物”。
• 将会出现一个弹出栏，并要求您上传上面创建的文件。
• 上传文件，一切顺利

上传完文件后，您将看到此内容。现在，转到Chrome扩展程序栏，您将能够看到自己的Chrome扩展程序并可以访问它。