逐步指南：如何创建自动货币转换 Chrome 扩展程序

javascript

2024-03-26 06:35:34

创建自动货币转换 Chrome 扩展程序：循序渐进指南

引言：

在全球化的数字时代，货币转换变得比以往任何时候都更加至关重要。为了简化这一过程，你可以创建自己的 Chrome 扩展程序来自动转换货币。本指南将引导你完成创建此类扩展程序的每个步骤，从头到尾，让你立即开始享受货币转换的便利。

创建扩展程序：

打开 Chrome 扩展程序开发页面： https://developer.chrome.com/extensions
点击“创建新扩展程序”按钮
为你的扩展程序命名，例如“自动货币转换器”

编写清单文件：

清单文件定义了扩展程序的基本信息，包括名称、版本、权限和内容脚本。

manifest.json

{
  "manifest_version": 2,
  "name": "自动货币转换器",
  "version": "1.0",
  "description": "自动将网页上的货币转换为你选择的货币。",
  "permissions": [
    "tabs"
  ],
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ]
}

编写内容脚本：

内容脚本在网页上运行，负责执行扩展程序的逻辑。

content.js

// 从选项页面获取目标货币
const targetCurrency = localStorage.getItem("targetCurrency");

// 遍历网页中的所有货币元素
const currencyElements = document.querySelectorAll("[data-currency]");
currencyElements.forEach((element) => {
  // 获取当前货币
  const currentCurrency = element.getAttribute("data-currency");

  // 使用货币转换 API 将当前货币转换为目标货币
  fetch(`https://api.exchangeratesapi.io/latest?symbols=${targetCurrency}&base=${currentCurrency}`)
    .then((response) => response.json())
    .then((data) => {
      // 计算转换后的金额
      const convertedAmount = data.rates[targetCurrency] * parseFloat(element.textContent);

      // 将转换后的金额替换为原始金额
      element.textContent = `${convertedAmount} ${targetCurrency}`;
    });
});

编写选项页面：

选项页面允许用户配置扩展程序设置，例如目标货币。

options.html

<h1>自动货币转换器选项</h1>
<label for="targetCurrency">目标货币：</label>
<select id="targetCurrency">
  <option value="USD">美元</option>
  <option value="EUR">欧元</option>
  <option value="GBP">英镑</option>
</select>
<button id="saveOptions">保存选项</button>

options.js

// 获取目标货币元素
const targetCurrencyElement = document.getElementById("targetCurrency");

// 添加保存选项的事件监听器
document.getElementById("saveOptions").addEventListener("click", () => {
  // 将目标货币存储到 localStorage
  localStorage.setItem("targetCurrency", targetCurrencyElement.value);

  // 显示成功消息
  alert("选项已保存。");
});