---

title: 注入任意react网站 date: 2024-07-12 23:00:00+8 tags: - 油猴 - 插件 - react - 前端

背景

事情是这样，公司的服务器登录使用的是webshell用的xterm.js框架在升级之前，在window上下文是有一些全局变量，像ws就是这个webshell的WebSocket对象。

之前基于这个ws对象，写了一些发送指令给服务器的油猴脚本，但是后来这个页面升级成react + webpack了，这样没有全局变量了。也就没法完成之前的工作了。

解法1 自行替换WebSocket

其实本质是要WebSocket对象，而这个对象是由全局函数new WebSocket(url)产生的。那么如果能对这个函数进行拦截，然后做相应的处理是不是就完事大吉。

var OldWs = window.WebSocket;

function NewWs(url, protocols) {
    const wsInstance = OldWs(url, protocols);
    // 实现原来功能之后，把全局变量ws赋值
    window.ws = wsInstance;
    return wsInstance;
}
// 原型链 和 静态属性 都copy过来
NewWs.prototype = OldWs.prototype;
Object.setPrototypeOf(NewWs, OldWs);

window.WebSocket = NewWs;

解法2 Proxy增强WebSocket

与解法1一样思路的另一种解法，直接使用js中Proxy函数进行代理。

const OldWs = window.WebSocket;
// 创建一个 Proxy 构造函数来拦截 WebSocket 的实例化
const NewWs = new Proxy(OldWs, {
    construct(target, args) {
        const wsInstance = new target(...args);
        // 将实例附加到全局变量 ws
        window.ws = wsInstance;
        return wsInstance;
    }
});

// 替换原生的 WebSocket 构造函数
window.WebSocket = NewWs;

Proxy显然更贴切一些，不需要处理原型链和属性，他的用法详细可参考MDN，const p = new Proxy(target, handler)。

这里我们只需要捕捉构造函数，所以只需要在hanler中配置construct，这个属性的定义可以参考。

解法2算是解法1的优雅版本。

解法3 解析react组件

前面两个方案都只适用于对已知函数WebSocket的代理，但是实际我发现我还需要xterm中的term对象，来捕捉当前webshell中选中的文字，因为默认的window.getSelection无法获取shell中的选中文本，只能用term.getSelection。

这就只能获取到这个term对象了，他是一个xterm中定义的Terminal类型的对象，但是xterm已经整个被WebPack给打包到bundle.js中了，很难对他进行注入了。

这时候，我使用React的chrome组件发现当前页面结构非常简单，并且很容易就找到了term所在的组件，并且上面所需要的WebSocket实例也在这里面。

那接下来就是如何从一个生产环境的react页面中，解析其中的组件了，这个问题显然抛给GPT在合适不过了，我询问GPT如何在已有的react页面中获取指定名字的组件对象，答案就出来了，稍作加工如下。

//获取React根节点并遍历组件树
function getReactComponent(root, targetComponentName) {
    const reactInstance = root._reactRootContainer._internalRoot.current;

    function findcomponent(node) {
        if (node.elementType && 
            node.elementType.name === targetComponentName) {
            return node;
        }
        const children = node.child;
        while(children){
            const result = findComponent(children);
            if(result) return result;
            children= children.sibling;
        }
        return null;
    }
    return findComponent(reactInstance);
}

var root = document.getElementById("root");

var term = getReactComponent(root, "w").memoizedProps.terminal
var ws = term.websocket;

原来react应用渲染的<div id="root"></div>根节点上会追加一个_reactRootContainer的属性，通过这个属性就能把所有的react组件节点都遍历出来，估计react chrome插件就是这么干的。对于每个子节点的遍历，是通过sibling函数，类似next的作用；对于每个node的名字则是放到了elementType.name中；每个node的属性则是放到了memoizedProps注意不是props，后者是我们开发的时候的叫法。

这里还有个问题就是，w这个名字是打包的时候随机生成的一个简单hash值，他之后网站更新可能不叫w了，所以最好改成一些特征校验，比如说要找一个组件，组件的memoizedProps.terminal != null.

// 根据条件获取组件
function getReactComponent(root, checkFn) {
    const reactInstance = root._reactRootContainer._internalRoot.current;

    function findcomponent(node) {
        if (checkFn(node)) {
                return node;
        }
        const children = node.child;
        while(children){
            const result = findComponent(children);
            if(result) return result;
            children= children.sibling;
        }
        return null;
    }
    return findComponent(reactInstance);
}
var root = document.getElementById("root");

var term = getReactComponent(root, node=>node.memoizedProps && node.memoizedProps.terminal).memoizedProps.terminal
var ws = term.websocket;

启发

通过解法3，给我打开了新世界的大门，之前写的一些油猴脚本，要么就是一些老式网站的增强，要么就是一些全局层面的函数。对于react页面，因为觉得被bundle和compress了，觉得不太能解剖了。结果不经意间问了gpt，发现原来是有解法的。

由此，对于很多工作中的内部管理系统的页面，基本都是react的，很多地方都可以进行增强了。后续有了新的感悟会更新到这里。