如何通过Chrome扩展将Amazon.ca的CAD价格转换为INR并替换显示

你已经在本地测试页面完成了CAD转INR的价格转换逻辑，要让功能直接作用在Amazon.ca页面上，只需调整扩展配置并优化脚本适配目标页面的动态特性即可，具体修改和操作步骤如下：

1. 修正manifest.json（核心配置） #

原配置缺少内容脚本注入规则，这是让content.js能在Amazon.ca页面运行的关键。修改后的配置如下：

{
  "name": "Amzn CAD-INR",
  "version": "1.0.0",
  "description": "Convert CAD to INR in Amazon.ca",
  "manifest_version": 3,
  "author": "AZZIOI",
  "content_scripts": [
    {
      "matches": ["*://*.amazon.ca/*"],
      "js": ["content.js"],
      "run_at": "document_idle"
    }
  ],
  "host_permissions": ["https://cdn.jsdelivr.net/*"]
}

• matches：指定脚本要注入的目标网址，这里匹配所有Amazon.ca的页面
• run_at：设置脚本在页面空闲时运行，避免阻塞页面加载
• host_permissions：声明需要访问的汇率API域名，符合Manifest V3的权限要求

2. 优化content.js适配Amazon.ca动态页面 #

Amazon.ca的商品价格可能是动态加载的（比如滚动加载更多商品），仅靠window.load无法覆盖所有情况，改用MutationObserver监听页面DOM变化，确保所有价格元素都能被处理：

async function exchangeCurrency() {
  // 获取CAD到INR的汇率
  const url = "https://cdn.jsdelivr.net/gh/fawazahmed0/currency-api@1/latest/currencies/cad.json";
  const response = await fetch(url);
  const obj = await response.json();
  const curVal = obj.cad.inr;

  // 处理页面上所有价格元素
  const processPrices = () => {
    const cadPriceWhole = document.getElementsByClassName("a-price-whole");
    const cadPriceFraction = document.getElementsByClassName("a-price-fraction");

    for (let i = 0; i < cadPriceWhole.length; i++) {
      // 跳过已处理过的元素，避免重复转换
      if (cadPriceWhole[i].innerHTML.includes("-")) continue;

      const wCAD = parseInt(cadPriceWhole[i].innerHTML.replace(/[^0-9]/g, ''));
      const fCAD = parseInt(cadPriceFraction[i]?.innerHTML.replace(/[^0-9]/g, '') || 0);
      const totalCAD = wCAD + (fCAD / 100);
      const inr = Math.round(totalCAD * curVal);

      // 修改价格显示，保留原CAD价格并追加INR价格
      cadPriceWhole[i].innerHTML += ` - ${inr.toLocaleString()} INR`;
      // 清空小数位（可选，根据需求调整）
      if (cadPriceFraction[i]) cadPriceFraction[i].innerHTML = "";
    }
  };

  // 页面加载完成后先处理一次
  processPrices();

  // 监听DOM变化，处理动态加载的价格
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => processPrices());
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
}

// 启动转换功能
exchangeCurrency();

• 新增processPrices函数封装转换逻辑，方便重复调用
• 添加重复处理判断，避免同一价格被多次转换
• 用MutationObserver监听页面DOM变化，覆盖动态加载的商品价格
• 优化汇率获取的代码写法，更符合现代JS规范

3. 加载扩展到浏览器 #

1. 打开浏览器的扩展管理页面（Chrome为例：chrome://extensions/）
2. 开启右上角的「开发者模式」
3. 点击「加载已解压的扩展程序」，选择包含manifest.json和content.js的文件夹
4. 打开Amazon.ca页面，即可看到价格自动转换为CAD+INR显示

内容的提问来源于stack exchange，提问作者AZZlOl