如何通过Chrome扩展修改网页文本，使用innerText操作无效怎么解决？

1 核心错误：DOM选择器参数错误 #

getElementsByClassName API仅需要传入元素的类名字符串作为参数，你错误传入了完整的HTML片段，会导致无法匹配到任何元素。
原错误写法：

const elements = document.getElementsByClassName('<div class="styles__tokenBalanceText___2eYY7-camelCase">742</div>')

修正后的选择器写法：

const elements = document.getElementsByClassName('styles__tokenBalanceText___2eYY7-camelCase')

2 适配动态渲染页面 #

现代网页大部分内容是前端JS异步渲染生成的，content script默认执行时目标元素可能还没有被插入到DOM中，需要增加轮询逻辑确保能匹配到加载完成的元素，完整的Content.js参考代码如下：

const modifyBalanceText = () => {
  const elements = document.getElementsByClassName('styles__tokenBalanceText___2eYY7-camelCase')
  for (let i = 0; i < elements.length; i++) {
    elements[i].innerText = "123";
  }
  // 未找到元素时100ms后重试
  if(elements.length === 0) {
    setTimeout(modifyBalanceText, 100)
  }
}

modifyBalanceText()

3 manifest配置说明 #

你当前的manifest配置符合Manifest V3规范，不需要调整。

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