如何使用原生JavaScript用户脚本修改React生成的指定链接点击事件，使其在新标签页打开？

嘿，我完全懂你的困扰——React生成的链接有时候自带的跳转逻辑特别顽固，哪怕你想加target="_blank"都可能被覆盖，而且你只需要修改特定的那个链接，不想动全局的其他链接。下面给你一个纯原生JS的Tampermonkey脚本方案，完美解决这个问题：

首先得明确核心思路：因为React是动态渲染DOM的，这个目标链接大概率不是页面加载完成时就存在的，所以我们得监听DOM变化，一旦目标链接出现就立刻修改它的行为。同时为了防止React的事件系统覆盖我们的设置，我们做两层保障：给链接加target="_blank"，再绑定点击事件手动控制跳转。

直接上可复用的脚本代码，你复制到Tampermonkey里就行，记得把@match里的网址换成你要操作的目标网站：

// ==UserScript==
// @name         React指定链接新标签打开
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  让React生成的特定链接在新标签页打开
// @author       你自己的名字
// @match        https://你的目标网站域名/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 处理单个目标链接的函数
    function fixLinkBehavior(link) {
        // 第一层保障：直接设置target属性
        link.target = '_blank';
        // 第二层保障：监听点击事件，手动控制跳转，防止React覆盖
        link.addEventListener('click', function(e) {
            // 阻止React的默认跳转行为
            e.preventDefault();
            e.stopPropagation();
            // 在新标签页打开链接
            window.open(this.href, '_blank');
        });
    }

    // 先处理页面加载完成时已经存在的目标链接
    const existingLinks = document.querySelectorAll('.tampermonkey-target');
    existingLinks.forEach(fixLinkBehavior);

    // 监听DOM变化，处理后续动态生成的链接
    const domObserver = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            // 遍历所有新增的节点
            mutation.addedNodes.forEach((node) => {
                // 只处理元素节点
                if (node.nodeType !== 1) return;
                
                // 如果当前节点就是目标链接，直接处理
                if (node.classList.contains('tampermonkey-target')) {
                    fixLinkBehavior(node);
                }
                // 如果当前节点的子节点里有目标链接，批量处理
                const childLinks = node.querySelectorAll('.tampermonkey-target');
                childLinks.forEach(fixLinkBehavior);
            });
        });
    });

    // 开始监听整个body的DOM变化（如果知道目标链接的父容器，可以换成父容器，性能更好）
    domObserver.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

关键细节说明： #

• MutationObserver：这是原生JS自带的DOM变化监听API，专门对付React这种动态渲染的场景，确保我们不会错过目标链接的生成时机。
• 双层保障机制：先设置target="_blank"是最直观的方式，但有时候React的重新渲染会把这个属性抹掉，所以绑定点击事件手动跳转是更可靠的兜底方案。
• 精准定位目标：通过.tampermonkey-target类选择器，我们只会修改你指定的那个链接，完全不会影响页面上的其他链接。

你只需要把脚本里的@match替换成实际要操作的网站URL，安装到Tampermonkey后刷新页面，就能看到效果了。

内容来源于stack exchange