Chrome扩展开发问题：亚马逊商品价格替换为工时显示异常

你的代码出现页面全替换的问题，核心原因有两个：

1. 选择器范围过度宽泛：*:not(script):not(style)会选中页面几乎所有元素，包括包含价格的父容器。比如某个div里嵌套着价格文本，这个div本身的innerText也会匹配到价格正则，替换操作会直接覆盖整个div的所有内容，导致页面结构崩溃。
2. 替换逻辑错误：直接设置element.innerText会把元素内的所有内容一次性替换，而不是只修改文本中的价格片段。

方案1：精准定位亚马逊价格元素（推荐） #

亚马逊的价格元素有固定类名，主价格通常集中在a-price相关容器内，用精准选择器能避免误操作无关元素：

const hourlyWage = 15;

// 选择亚马逊常见的价格展示元素，可根据实际页面微调
const priceElements = document.querySelectorAll('.a-price .a-offscreen, .a-price-whole, .a-price-fraction');

priceElements.forEach(element => {
  const priceText = element.innerText.trim();
  // 提取纯数字价格，兼容带$符号的情况
  const priceMatch = priceText.match(/\d+\.\d{2}|\d+/);
  if (priceMatch) {
    const price = parseFloat(priceMatch[0]);
    const hours = price / hourlyWage;
    const roundedHours = Math.round(hours * 100) / 100;
    
    element.innerText = `${roundedHours} hours of work`;
  }
});

方案2：遍历文本节点（通用兼容） #

如果要适配更多场景，避免选中父容器，可以直接遍历页面的文本节点，只修改包含价格的文本内容：

const hourlyWage = 15;
const priceRegex = /\$\d+\.\d{2}/g;

// 递归遍历所有文本节点，跳过script和style
function traverseTextNodes(node) {
  if (node.nodeType === Node.TEXT_NODE) {
    const text = node.textContent;
    // 替换所有匹配到的价格片段
    const newText = text.replace(priceRegex, match => {
      const price = parseFloat(match.replace(/[^0-9.]/g, ''));
      const hours = price / hourlyWage;
      const roundedHours = Math.round(hours * 100) / 100;
      return `${roundedHours} hours of work`;
    });
    if (newText !== text) {
      node.textContent = newText;
    }
  } else if (node.nodeType === Node.ELEMENT_NODE && !['SCRIPT', 'STYLE'].includes(node.tagName)) {
    node.childNodes.forEach(child => traverseTextNodes(child));
  }
}

// 启动遍历
traverseTextNodes(document.body);

• 亚马逊大量内容是异步加载的，Chrome扩展中需要配合MutationObserver监听页面元素变化，在新价格元素加载完成后再执行替换逻辑。
• 测试时可以先打印选中的元素列表，确认只选中了目标价格元素后再执行替换。

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