私信图片渲染

缪凌锴_Mathew · 2025-09-01 12:52:31 · 科技·工程

前言

洛谷私信查看图片还要手动点开不爽，故制作此插件，效果：

其实是前几天翻到这篇文章突然想制作的。

安装 tampermonkey

tampermonkey.net

按灰色按钮下载 crx 文件。

在 chrome 的扩展程序界面打开右上角的开发者模式按钮，将 crx 文件拖入 chrome 界面安装。

在插件设置界面打开允许运行用户脚本。

使用方法

私信中的 ![图片](URL) 字段会渲染图片。

安装脚本

Greasyfork

Greasyfork 镜像站

直接输代码

// ==UserScript==
// @name         洛谷私信markdown图片渲染
// @version      0.1
// @description  洛谷私信markdown图片渲染
// @match        https://www.luogu.com.cn/chat$
// @match        https://www.luogu.com.cn/chat/*
// @author       MlkMathew
// @license      MIT
// @grant        none
// @namespace    https://greasyfork.org/users/1068192
// ==/UserScript==

(function() {
    'use strict';
    function text(s){
        let x=document.createElement('Mathew');
        x.textContent=s;
        return x;
    }
    function image(s){
        let x=document.createElement('img');
        x.src=s;
        x.style="width:100%;height:auto;";
        return x;
    }
    function sol(x,s){
        let p=0;
        for(let i=0;i<s.length;i++)
        {
            if(i+3<s.length&&s.substr(i,2)=="!["){
                if(p<=i-1){
                    x.appendChild(text(s.substr(p,i-p)));
                    p=i;
                }
                let pos=0;
                for(let j=i+2;j<s.length;j++)
                {
                    if(s[j]==']'&&s[j+1]=='('){
                        pos=j;
                        break;
                    }
                }
                if(!pos){
                    continue;
                }
                i=pos;
                pos=0;
                for(let j=i+2;j<s.length;j++)
                {
                    if(s[j]==')'){
                        pos=j;
                        break;
                    }
                }
                if(!pos){
                    continue;
                }
                p=pos+1;
                let t=s.substr(i+2,pos-i-2);
                x.appendChild(image(t));
            }
        }
        if(p<=s.length-1){
            x.appendChild(text(s.substr(p,s.length-p)));
        }
    }
    function work(){
        setTimeout(function(){
            let loadmore=document.querySelector('.load-more');
            loadmore.addEventListener("click",work);
            const mes=document.querySelectorAll('[class="message"]');
            for(let cur of mes)
            {
                let txt=cur.textContent;
                cur.textContent="";
                let x=document.createElement('Mathew');
                while(cur.children.length)
                {
                    let chd=cur.children[0];
                }
                sol(x,txt);
                cur.appendChild(x);
            }
        },500)
    }
    window.addEventListener('load',function(){
        const but=document.querySelector("#app > div.main-container > main > div > div.card.wrapper.padding-none > div.side > div.panel-content > div").childNodes;
        for(let i=0;i<but.length;i++)
        {
            but[i].addEventListener("click",work);
        }
    },false);
})();

在油猴界面添加用户脚本粘贴代码。

后记

现阶段有很多 bug，欢迎汇报。

出 bug 刷新试试。