Chrome扩展开发问题：定位元素并修改onclick事件

1. 定位目标元素 #

由于目标元素的class重复，我们可以结合它的onclick属性特征精准筛选——匹配以copyTextToClipboard开头的span.tip_trigger元素：

// 获取所有符合条件的元素（多个的话按需遍历）
const targetElements = document.querySelectorAll('span.tip_trigger[onclick^="copyTextToClipboard"]');
// 取第一个匹配的元素
const targetEl = targetElements[0];

2. 提取值12752 #

有两种稳定的提取方式：

• 直接读取元素文本（如果元素内显示的就是目标值）：

const targetValue = targetEl.textContent.trim(); // 结果为"12752"

• 解析onclick属性里的参数（避免文本被页面动态修改的情况）：

const onClickCode = targetEl.getAttribute('onclick');
const valueMatch = onClickCode.match(/copyTextToClipboard\('(\d+)'\)/);
const targetValue = valueMatch ? valueMatch[1] : ''; // 结果为"12752"

3. 替换onclick事件为新标签页打开链接 #

要完全覆盖原有的复制行为，先清除内联onclick事件，再绑定自定义逻辑：

// 移除原内联onclick属性
targetEl.removeAttribute('onclick');

// 添加新的点击事件
targetEl.addEventListener('click', (e) => {
  e.preventDefault();
  // 替换成你实际需要打开的链接
  const targetUrl = `https://your-target-url.com/${targetValue}`;
  window.open(targetUrl, '_blank');
});

如果页面是动态加载该元素（比如滚动或异步渲染后才出现），用事件委托更可靠：

document.addEventListener('click', (e) => {
  const clickedEl = e.target;
  // 判断是否是目标元素
  if (clickedEl.classList.contains('tip_trigger') && clickedEl.getAttribute('onclick')?.startsWith('copyTextToClipboard')) {
    e.preventDefault();
    e.stopPropagation(); // 阻止原事件触发
    const targetValue = clickedEl.textContent.trim();
    const targetUrl = `https://your-target-url.com/${targetValue}`;
    window.open(targetUrl, '_blank');
  }
});

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