已解决！
感谢 fangyuan99 大佬提供的代码！
可以进来看看底楼，有很多大佬在贡献代码， 样式种类很多，任意挑选！
我看verge的设置里，外部可以调用API接口，那么有没有大佬做一个浏览器插件，可以将当前网页的host，传入verge，返回这个host对应连接的链路，然后展示在网页的一个角落。
或许可以再多展示一下当前网页的上下载量速度，链路，规则，就好了
12 Likes
可是我没有写插件脚本的经验，真要写的话，还得先学习，这不得好几天
不用系统学，拿着文档比对着改
嗯，好吧，谢谢你的思路，还是得不断的学习才行，我刚弄会远程配置
这不就是dashboard吗，yacd，metacubexd
1 Like
参考佬的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 Likes
一直显示等待链接，是我没设置对吗，要怎么设置啊
你要改一下端口和密码
你先关了密钥，看看直接访问 /connections 能不能获取到信息，保证脚本的Clash API 配置和软件一致
http://127.0.0.1:7890/connections 链接访问不到，我浏览器用了插件，应该不会是这个影响的吧，关了也还是一样
可能是的
你换个浏览器试试就晓得了
不对啊，你外部控制是空的，你要填上 127.0.0.1:7890
感谢佬，真好用 
感谢，用上了
感谢大佬提供的代码，我稍微改了改，把“已连接”字符串改了，代码里面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();
}
});
})();
你的代码块有点问题
啊这，那麻烦大佬再帮我改改，是匹配区分大小写问题吗