开发Chrome扩展时如何基于p标签原有ID值动态追加计算后内容

问题原因 #

• 直接调用$(".c1.c2").append()没有遍历每个元素单独处理，不同元素的ID数值不同，无法统一传入相同内容
• 你大概率是给append方法传入了未执行的函数声明，导致直接把函数的toString结果作为文本追加到了内容中

实现方案 #

基于jQuery的实现（如果你的扩展引入了jQuery） #

遍历每个匹配元素单独处理：

$(".c1.c2").each(function() {
  // 读取当前元素原有文本
  const originText = $(this).text();
  // 提取ID后的数字，支持ID和数字之间有任意空格
  const idNum = parseInt(originText.match(/ID\s+(\d+)/)[1], 10);
  // 计算平方
  const sqResult = idNum * idNum;
  // 追加内容
  $(this).append(` SQ ${sqResult}`);
});

原生JS实现（无需引入jQuery，更适合Chrome扩展） #

如果你的扩展没有额外引入jQuery，可以直接用原生DOM API实现：

// 选中所有符合条件的p标签
const targetElements = document.querySelectorAll('p.c1.c2');
targetElements.forEach(el => {
  const originText = el.textContent;
  const idNum = parseInt(originText.match(/ID\s+(\d+)/)[1], 10);
  el.textContent += ` SQ ${idNum * idNum}`;
});

注意事项 #

• 如果原网站的p标签是动态渲染的，需要等内容加载完成后再执行代码，可以将Chrome扩展的content script run_at配置设为document_idle，或者使用MutationObserver监听节点变动触发处理逻辑
• 如果文本格式完全固定为ID X，也可以用更简单的方式提取数字：const idNum = parseInt(originText.split(' ')[1], 10)

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