📌  相关文章
📜  创建加密货币价格跟踪Chrome扩展程序(1)

📅  最后修改于: 2023-12-03 15:22:40.628000             🧑  作者: Mango

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

本文将介绍如何创建一个基本的加密货币价格跟踪Chrome扩展程序。

准备工作

首先，我们需要准备一些工具和资源：

  • Chrome浏览器
  • 代码编辑器
  • JavaScript基础知识
  • 加密货币API
创建Chrome扩展程序
  1. 首先，在代码编辑器中创建一个新文件夹，命名为“CryptoPriceTracker”。
  2. 在该文件夹中创建一个名为“manifest.json”的文件。此文件描述了扩展的基本信息和功能。在此文件中输入以下代码：
{
    "manifest_version": 2,
    "name": "Crypto Price Tracker",
    "description": "A simple Chrome extension to track cryptocurrency prices",
    "version": "1.0.0",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": ["http://localhost/"]
}

在此代码中，我们定义了扩展的名称、描述、版本号以及浏览器操作信息。我们还指定了扩展需要访问的权限。

  1. 在“CryptoPriceTracker”文件夹中创建一个名为“popup.html”的文件。此文件将显示扩展的主要界面。在该文件中输入以下代码：
<!DOCTYPE html>
<html>
    <head>
        <title>Crypto Price Tracker</title>
        <script src="popup.js"></script>
    </head>
    <body>
        <h1>Crypto Price Tracker</h1>
        <div id="price-list"></div>
    </body>
</html>

在此代码中，我们创建了一个包含扩展标题和价格列表的HTML页面，并在页面底部添加了一个占位符“div”元素，“id”为“price-list”。

  1. 在“CryptoPriceTracker”文件夹中创建一个名为“popup.js”的JavaScript文件。此文件将使用加密货币API获取价格数据。在该文件中输入以下代码：
const endpoint = 'https://api.coinmarketcap.com/v1/ticker/?limit=10';

fetch(endpoint)
    .then((response) => {
        return response.json();
    })
    .then((data) => {
        const priceList = document.getElementById('price-list');
        data.forEach((coin) => {
            const price = document.createElement('p');
            price.textContent = `${coin.name}: $${coin.price_usd}`;
            priceList.appendChild(price);
        });
    });

在此代码中，我们使用Fetch API从coinmarketcap.com API获取加密货币数据，并将其显示在页面上。我们将每个加密货币的名称和价格显示为一个段落元素。

  1. 在Chrome浏览器中打开扩展程序管理页面，或者在地址栏中输入“chrome://extensions/”并回车打开该页面。选择“加载已解压的扩展程序”，然后选择“CryptoPriceTracker”文件夹。至此，扩展程序已安装并在Chrome浏览器中显示。
测试扩展程序
  1. 点击Chrome浏览器中的扩展程序图标，即可启动扩展程序。
  2. 扩展程序将显示当前加密货币的价格列表。
  3. 点击扩展程序图标或列表中的价格，即可打开coinmarketcap.com上的加密货币页面。
结论

在本文中，我们介绍了如何创建一个基本的加密货币价格跟踪Chrome扩展程序。本程序可以作为您学习Chrome扩展开发的起点，希望对您有所帮助。