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

📅  最后修改于: 2021-09-01 02:27:40             🧑  作者: Mango

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

什么是 API?

API 代表应用程序编程接口。基本上,它是一个接受我们的请求并相应地返回响应的信使。 API 也有称为端点的东西。端点是一个 URL,它允许 API 访问服务器的某些部分并相应地检索数据。 API 以 JSON(JavaScript Object Notation)的形式返回数据,该数据采用键值对的形式。

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

构建用户界面-

首先,我们将创建两个名为popup.htmlpopup.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}`
        })
        document.querySelector(
            ".data-back").innerHTML = output;
    }
}
xhr.send();
  
}) ();


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}`
        })
        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 扩展程序并能够访问它。