如何使用Greasemonkey修改网页文本中绑定的指定跳转链接

失效的核心原因大概率是目标链接为页面动态渲染生成，你之前针对静态DOM的修改逻辑（即window.onload或DOM加载完成后直接修改）会在元素还没渲染到页面时就执行，因此找不到目标元素自然无法生效。

具体实现步骤 #

• 第一步：获取目标链接的唯一选择器
  打开网页后右键点击你要修改的那段文字链接，选择「检查」，在开发者工具元素面板中高亮的对应节点上右键，选择「复制」-「复制选择器」，记为targetLinkSelector备用。
• 第二步：选择适配的修改方案

  方案1：静态加载场景（链接在页面初始DOM中就存在） #

  直接在你现有脚本逻辑中加入以下代码，替换对应占位符即可：

  // 等待DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', () => {
    const targetLink = document.querySelector('替换为你刚才复制的targetLinkSelector');
    if(targetLink && targetLink.getAttribute('href') === '/maps') {
      targetLink.setAttribute('href', '/search');
      // 若原链接绑定了click事件拦截跳转，可追加以下代码覆盖跳转逻辑
      targetLink.addEventListener('click', (e) => {
        e.stopImmediatePropagation();
        window.location.href = '/search';
      }, true);
    }
  });
  

  方案2：动态加载场景（链接是页面加载后后续渲染生成） #

  用MutationObserver监听DOM变化，匹配到目标链接后自动修改，兼容所有动态渲染场景：

  // 监听DOM变化的Observer
  const observer = new MutationObserver((mutations) => {
    const targetLink = document.querySelector('替换为你刚才复制的targetLinkSelector');
    if(targetLink && targetLink.getAttribute('href') === '/maps') {
      targetLink.setAttribute('href', '/search');
      // 同样可追加上面的click事件监听代码覆盖原有跳转逻辑
      // 匹配修改完成后可停止监听节省性能，不需要可以删掉下一行
      observer.disconnect();
    }
  });
  // 开始监听整个文档的DOM变化
  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
  

• 额外注意：如果修改后点击还是跳转到/maps，说明原链接绑定了onclick事件做跳转拦截，把上面注释里的click事件监听代码加上即可覆盖原有逻辑。

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