有无浏览器插件可以显示mihomo分流的当前网页的分组呢?

已解决!
感谢 fangyuan99 大佬提供的代码!
可以进来看看底楼,有很多大佬在贡献代码, 样式种类很多,任意挑选!

我看verge的设置里,外部可以调用API接口,那么有没有大佬做一个浏览器插件,可以将当前网页的host,传入verge,返回这个host对应连接的链路,然后展示在网页的一个角落。
或许可以再多展示一下当前网页的上下载量速度,链路,规则,就好了

12 个赞

可是我没有写插件脚本的经验,真要写的话,还得先学习,这不得好几天

不用系统学,拿着文档比对着改

嗯,好吧,谢谢你的思路,还是得不断的学习才行,我刚弄会远程配置

这不就是dashboard吗,yacd,metacubexd

1 个赞


参考佬的ChatGPT脚本写的

代码
// ==UserScript==
// @name         Clash Connection Monitor
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  优雅地显示当前网页的Clash连接信息
// @author       Your name
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @icon         https://cdn.jsdelivr.net/gh/Dreamacro/clash/docs/logo.png
// ==/UserScript==

(function() {
    'use strict';

    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
        #clash-monitor {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 4px;
            border-radius: 12px;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            font-size: 14px;
            font-weight: 500;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: none;
            border: 1px solid rgba(230, 230, 230, 0);
            color: #333;
        }

        #clash-monitor:hover {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(230, 230, 230, 0.8);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
            padding: 10px 16px;
            backdrop-filter: blur(8px);
        }

        #connection-indicator {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        #status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            transition: all 0.4s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        #connection-details {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.4s ease-out;
            margin-top: 0;
            font-size: 12px;
            color: #666;
        }

        #clash-monitor:hover #connection-details {
            max-height: 500px;
            opacity: 1;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(230, 230, 230, 0.8);
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin: 4px 0;
            white-space: nowrap;
        }

        /* 深色模式 */
        @media (prefers-color-scheme: dark) {
            #clash-monitor {
                color: #f0f0f0;
            }

            #clash-monitor:hover {
                background: rgba(40, 40, 40, 0.95);
                border: 1px solid rgba(70, 70, 70, 0.8);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            }

            #connection-details {
                color: #bbb;
            }
        }
    `;

    document.head.appendChild(style);

    // 创建监视器元素
    const monitor = document.createElement('div');
    monitor.id = 'clash-monitor';
    monitor.innerHTML = `
        <div id="connection-indicator">
            <span id="connection-text">等待连接...</span>
            <div id="status-dot"></div>
        </div>
        <div id="connection-details">
            <div class="detail-item">
                <span>代理链路:</span>
                <span id="proxy-chain">-</span>
            </div>
            <div class="detail-item">
                <span>规则:</span>
                <span id="rule-match">-</span>
            </div>
            <div class="detail-item">
                <span>上传:</span>
                <span id="upload-speed">-</span>
            </div>
            <div class="detail-item">
                <span>下载:</span>
                <span id="download-speed">-</span>
            </div>
        </div>
    `;

    document.body.appendChild(monitor);

    // Clash API 配置
    const CLASH_API = {
        BASE_URL: 'http://127.0.0.1:7890',
        SECRET: 'your-secret-key'
    };

    // 格式化字节数
    function formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 更新连接信息
    function updateConnectionInfo() {
        const currentHost = window.location.hostname;

        GM_xmlhttpRequest({
            method: 'GET',
            url: `${CLASH_API.BASE_URL}/connections`,
            headers: {
                'Authorization': `Bearer ${CLASH_API.SECRET}`
            },
            onload: function(response) {
                try {
                    const data = JSON.parse(response.responseText);
                    const connections = data.connections;
                    const currentConn = connections.find(conn => conn.metadata.host === currentHost);

                    const statusDot = document.getElementById('status-dot');
                    const connText = document.getElementById('connection-text');
                    const proxyChain = document.getElementById('proxy-chain');
                    const ruleMatch = document.getElementById('rule-match');
                    const uploadSpeed = document.getElementById('upload-speed');
                    const downloadSpeed = document.getElementById('download-speed');

                    if (currentConn) {
                        statusDot.style.backgroundColor = '#27ae60';
                        connText.textContent = '已连接';
                        proxyChain.textContent = currentConn.chains.join(' → ');
                        ruleMatch.textContent = currentConn.rule;
                        uploadSpeed.textContent = formatBytes(currentConn.upload);
                        downloadSpeed.textContent = formatBytes(currentConn.download);
                    } else {
                        statusDot.style.backgroundColor = '#95a5a6';
                        connText.textContent = '无连接';
                        proxyChain.textContent = '-';
                        ruleMatch.textContent = '-';
                        uploadSpeed.textContent = '-';
                        downloadSpeed.textContent = '-';
                    }
                } catch (error) {
                    console.error('解析连接信息失败:', error);
                }
            },
            onerror: function(error) {
                console.error('连接Clash API失败:', error);
            }
        });
    }

    // 初始化更新
    updateConnectionInfo();
    // 定期更新
    setInterval(updateConnectionInfo, 5000);

    // 监听页面可见性变化
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            updateConnectionInfo();
        }
    });
})();

3 个赞

一直显示等待链接,是我没设置对吗,要怎么设置啊

你要改一下端口和密码


是这里吗,我已经改过了,代码里的也改了

你先关了密钥,看看直接访问 /connections 能不能获取到信息,保证脚本的Clash API 配置和软件一致

http://127.0.0.1:7890/connections 链接访问不到,我浏览器用了插件,应该不会是这个影响的吧,关了也还是一样

可能是的

你换个浏览器试试就晓得了

不对啊,你外部控制是空的,你要填上 127.0.0.1:7890


好了好了,就是这个问题,第一次用,谢谢佬友解答

感谢佬,真好用 :pray:

感谢,用上了

感谢大佬提供的代码,我稍微改了改,把“已连接”字符串改了,代码里面ctrl+f搜一下“sola”就是我改的部分

sola修改后的代码
// ==UserScript==
// @name         Clash Connection Monitor
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  优雅地显示当前网页的Clash连接信息
// @author       Your name
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @icon         https://cdn.jsdelivr.net/gh/Dreamacro/clash/docs/logo.png
// ==/UserScript==

(function() {
    'use strict';

    // 创建样式
    const style = document.createElement('style');
    style.textContent = `
        #clash-monitor {
            position: fixed;
            bottom: 20px;
            right: 20px;
            padding: 4px;
            border-radius: 12px;
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            font-size: 14px;
            font-weight: 500;
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: none;
            border: 1px solid rgba(230, 230, 230, 0);
            color: #333;
        }

        #clash-monitor:hover {
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(230, 230, 230, 0.8);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
            padding: 10px 16px;
            backdrop-filter: blur(8px);
        }

        #connection-indicator {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 8px;
        }

        #status-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            transition: all 0.4s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }

        #connection-details {
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            transition: all 0.4s ease-out;
            margin-top: 0;
            font-size: 12px;
            color: #666;
        }

        #clash-monitor:hover #connection-details {
            max-height: 500px;
            opacity: 1;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(230, 230, 230, 0.8);
        }

        .detail-item {
            display: flex;
            justify-content: space-between;
            gap: 16px;
            margin: 4px 0;
            white-space: nowrap;
        }

        /* 深色模式 */
        @media (prefers-color-scheme: dark) {
            #clash-monitor {
                color: #f0f0f0;
            }

            #clash-monitor:hover {
                background: rgba(40, 40, 40, 0.95);
                border: 1px solid rgba(70, 70, 70, 0.8);
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            }

            #connection-details {
                color: #bbb;
            }
        }
    `;

    document.head.appendChild(style);

    // 创建监视器元素
    const monitor = document.createElement('div');
    monitor.id = 'clash-monitor';
    monitor.innerHTML = `
        <div id="connection-indicator">
            <span id="connection-text">等待连接...</span>
            <div id="status-dot"></div>
        </div>
        <div id="connection-details">
            <div class="detail-item">
                <span>代理链路:</span>
                <span id="proxy-chain">-</span>
            </div>
            <div class="detail-item">
                <span>规则:</span>
                <span id="rule-match">-</span>
            </div>
            <div class="detail-item">
                <span>上传:</span>
                <span id="upload-speed">-</span>
            </div>
            <div class="detail-item">
                <span>下载:</span>
                <span id="download-speed">-</span>
            </div>
        </div>
    `;

    document.body.appendChild(monitor);

    // Clash API 配置
    const CLASH_API = {
        BASE_URL: 'http://127.0.0.1:9097',
        SECRET: 'Change your password or leave it blank'
    };

    // 格式化字节数
    function formatBytes(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }

    // 更新连接信息
    function updateConnectionInfo() {
        const currentHost = window.location.hostname;

        GM_xmlhttpRequest({
            method: 'GET',
            url: `${CLASH_API.BASE_URL}/connections`,
            headers: {
                'Authorization': `Bearer ${CLASH_API.SECRET}`
            },
            onload: function(response) {
                try {
                    const data = JSON.parse(response.responseText);
                    const connections = data.connections;
                    const currentConn = connections.find(conn => conn.metadata.host === currentHost);

                    const statusDot = document.getElementById('status-dot');
                    const connText = document.getElementById('connection-text');
                    const proxyChain = document.getElementById('proxy-chain');
                    const ruleMatch = document.getElementById('rule-match');
                    const uploadSpeed = document.getElementById('upload-speed');
                    const downloadSpeed = document.getElementById('download-speed');

                    if (currentConn) {
                        // statusDot.style.backgroundColor = '#27ae60';
                        // connText.textContent = '已连接11';
                        //Sola添加↓
                        const chains = currentConn.chains;
                        if (chains.includes('DIRECT')) {
                            connText.textContent = '直连';
                            statusDot.style.backgroundColor = '#D70026';
                        } else {
                            connText.textContent = '代理';
                            statusDot.style.backgroundColor = '#27ae60';
                        }
                        //Sola添加↑
                        proxyChain.textContent = currentConn.chains.join(' → ');
                        ruleMatch.textContent = currentConn.rule;
                        uploadSpeed.textContent = formatBytes(currentConn.upload);
                        downloadSpeed.textContent = formatBytes(currentConn.download);
                    } else {
                        statusDot.style.backgroundColor = '#95a5a6';
                        connText.textContent = '无连接';
                        proxyChain.textContent = '-';
                        ruleMatch.textContent = '-';
                        uploadSpeed.textContent = '-';
                        downloadSpeed.textContent = '-';
                    }
                } catch (error) {
                    console.error('解析连接信息失败:', error);
                }
            },
            onerror: function(error) {
                console.error('连接Clash API失败:', error);
            }
        });
    }

    // 初始化更新
    updateConnectionInfo();
    // 定期更新
    setInterval(updateConnectionInfo, 5000);

    // 监听页面可见性变化
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            updateConnectionInfo();
        }
    });
})();

你的代码块有点问题

啊这,那麻烦大佬再帮我改改,是匹配区分大小写问题吗