如何获取Chrome鼠标悬停HTML链接时生成的URL以用于Steam库存油猴脚本开发

你遇到的问题本质是Steam库存页面的异步DOM更新逻辑导致的：点击左侧道具后，右侧信息区的属性赋值操作滞后于点击事件同步触发时机，你直接读取href属性时，前端逻辑还未完成新链接的更新，因此只能拿到上一次的旧值，需要两次点击才能读取到正确值。浏览器悬停时显示的链接正确，是因为Steam会在按钮hover阶段完成href属性的最终赋值，避免用户看到错误的跳转地址。

可用解决方案 #

方案1：用MutationObserver监听属性变化（最稳定，无延迟） #

直接监听「查看徽章进度」按钮的href属性变化，只要属性更新就自动获取最新值，不需要手动控制时机，适配所有异步更新场景。
示例代码：

// 替换成你实际用的「查看徽章进度」按钮选择器
const badgeBtnSelector = '/* 你的按钮选择器，比如.btn_green_white_innerfade */';

// 初始化监听器
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'href') {
      const latestHref = mutation.target.href;
      // 此处写拿到最新链接后的处理逻辑
      console.log('最新徽章链接：', latestHref);
    }
  });
});

// 监听配置：仅监听href属性变化
const observerConfig = { attributes: true, attributeFilter: ['href'] };

// 页面加载完成后绑定监听器，也可在道具点击时动态绑定
window.addEventListener('load', () => {
  const badgeBtn = document.querySelector(badgeBtnSelector);
  if (badgeBtn) {
    observer.observe(badgeBtn, observerConfig);
  }
});

方案2：读取dataset预存的链接 #

Steam前端逻辑通常会把资源的真实地址提前存在元素的data-*自定义属性里，更新时间远早于href属性，你可以在DevTools中查看按钮元素的属性，找到类似data-href、data-badge-url的字段，直接读取该属性值即可，无需等待href更新。
示例读取方式：

const badgeBtn = document.querySelector(badgeBtnSelector);
// 字段名替换为你实际找到的自定义属性名
const latestHref = badgeBtn.dataset.badgeUrl;

方案3：点击道具后加延迟读取 #

如果不想写复杂的监听逻辑，也可以在左侧道具的点击回调里加100-200ms的延迟再读取href，等待Steam的DOM更新完成后再取值，绝大多数场景都可生效。
示例代码：

// 替换为你实际用的左侧库存道具选择器
const itemSelector = '.inventory_item';
document.addEventListener('click', (e) => {
  if (e.target.closest(itemSelector)) {
    // 点击道具后延迟200ms读取链接
    setTimeout(() => {
      const badgeBtn = document.querySelector(badgeBtnSelector);
      const latestHref = badgeBtn?.href;
      if (latestHref) {
        console.log('最新徽章链接：', latestHref);
      }
    }, 200);
  }
});

方案4：监听按钮悬停事件获取 #

你也可以直接监听按钮的mouseenter事件，触发时读取href值即可，此时Steam已经完成了链接赋值，和浏览器左下角显示的内容完全一致。
示例代码：

document.addEventListener('mouseenter', (e) => {
  const badgeBtn = e.target.closest(badgeBtnSelector);
  if (badgeBtn) {
    const latestHref = badgeBtn.href;
    console.log('最新徽章链接：', latestHref);
  }
}, true); // 开启捕获模式提前拿到事件

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