创建一个加密货币价格跟踪 Chrome 扩展

构建 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
  
    
        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 将获取的数据动态添加到表格元素中。

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

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

这就是我们的用户界面的样子——

用户界面

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

Javascript

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

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

Javascript

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

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

制作一个 Chrome 扩展——为了制作一个 Chrome 扩展，我们需要一个manifest.json文件，这个文件的创建如下所示——

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

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

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

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

2.另一种是免费上传到chrome store的方式如下——

• 在 Chrome 浏览器的 URL 中输入 chrome://extensions/
• 现在打开开发者模式。
• 现在点击左上角的按钮，上面写着Load Unpacked。
• 将出现一个弹出栏，并要求您上传上面创建的文件。
• 上传文件，一切顺利

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