feat: dashboard panel selector in advanced settings (v1.4.0)

clash-dev · clash-dev · commit e78369423fda · 2026-07-04T03:39:15.000+08:00
- Add 4-option radio selector in Advanced sub-tab: metacubexd / Yacd Meta / Zashboard / Custom

- Custom URL input with placeholder example, enabled only when Custom selected

- Unified placeholder substitution: %host / %port / %secret replaced at runtime

- DASHBOARD_PRESETS const in popup.js; presets not persisted in settings

- Fallback to metacubexd when custom URL empty (avoid about:blank)

- zh/en/ja i18n for 4 new keys

- Bump version 1.3.9 -&gt; 1.4.0 (minor: new feature)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,69 @@
 
 ---
 
+## v1.4.0 (2026-07-04)
+
+**设置页「高级」标签新增控制台面板选择，支持 metacubexd / Yacd Meta / Zashboard / 自定义。**
+
+---
+
+### 一、新功能
+
+- **「高级」子标签页新增「控制台面板」选择器**：4 选 1 单选按钮
+  - `metacubexd`：`https://metacubex.github.io/metacubexd/`（默认）
+  - `Yacd Meta`：`https://yacd.metacubex.one/`
+  - `Zashboard`：`https://board.zash.run.place/`
+  - `自定义`：用户填入 URL 模板，含占位符 `%host` / `%port` / `%secret`
+- **占位符替换机制**：所有面板（预设和自定义）统一使用 `%host` / `%port` / `%secret` 占位符，运行时被 Clash API 实际值替换（encodeURIComponent 编码，避免特殊字符破坏 URL）
+- **自定义 URL 输入框**：仅当选择「自定义」radio 时启用，否则 disabled；切换到 custom 时自动聚焦输入框
+- **placeholder 示例**：`https://example.com/#/setup?hostname=%host&port=%port&secret=%secret`，用户照着填即可
+- **多语言适配**：zh_CN / en / ja 三语言完整翻译面板名、自定义标签、placeholder、提示语
+
+### 二、关键决策
+
+| 决策 | 理由 |
+|---|---|
+| 用 `%host` 等占位符而非 `${host}` 模板字符串 | URL 中 `$` 可能与某些面板自带的模板语法冲突，`%` 更安全且无歧义 |
+| 预设 URL 写在代码常量 `DASHBOARD_PRESETS` 而非 settings | 预设固定不需要持久化，settings 只存类型枚举 + 自定义 URL |
+| 自定义为空时回退到 metacubexd | 避免用户选了 custom 但忘了填 URL 导致打开 `about:blank` |
+| radio 而非 select | 4 个选项用 radio 一目了然，配合 URL 副标题更直观 |
+| 自定义 URL 输入框默认 disabled | 视觉上明确"只有选 custom 才能用"，避免误填了 URL 但实际选的是预设 |
+| minor 版本号 bump（1.3.9→1.4.0） | 新增功能而非纯 bug 修复，按 semver 应 minor bump |
+
+### 三、URL 拼接逻辑
+
+三个面板的实际 URL 模板（运行时被实际值替换）：
+
+```
+metacubexd: https://metacubex.github.io/metacubexd/#/setup?http=true&hostname=%host&port=%port&secret=%secret
+yacd:       https://yacd.metacubex.one/?hostname=%host&port=%port&secret=%secret
+zashboard:  https://board.zash.run.place/#/setup?http=true&hostname=%host&port=%port&secret=%secret
+```
+
+注意 yacd 使用查询参数（`?`），metacubexd 和 zashboard 使用 hash 路由（`#/setup?`），yacd 不需要 `http=true` 参数。
+
+### 四、文件变更清单
+
+| 文件 | 变更 |
+|------|------|
+| `extension/popup/popup.html` | 「高级」子标签页新增 4 个 radio + 自定义 URL 输入框 + 提示语 |
+| `extension/popup/popup.css` | 新增 `.settings-dashboard-options` / `.settings-radio-row` / `.dashboard-name` / `.dashboard-url` 样式，玻璃拟态主题自动适配 |
+| `extension/popup/popup.js` | 新增 `DASHBOARD_PRESETS` 常量；重写 `openWebDashboard()` 走占位符替换；settings 保存/加载添加 `dashboardType` / `dashboardCustomUrl`；radio change 事件动态启用/禁用自定义 URL 输入框 |
+| `extension/background.js` | 默认 settings 新增 `dashboardType: 'metacubexd'` / `dashboardCustomUrl: ''` |
+| `extension/locales/zh_CN.json` | 新增 4 个翻译键：`settings_dashboard_panel` / `settings_dashboard_custom` / `settings_dashboard_custom_placeholder` / `settings_dashboard_hint` |
+| `extension/locales/en.json` | 同上（英文翻译） |
+| `extension/locales/ja.json` | 同上（日文翻译） |
+| `extension/manifest.json` | 版本号 1.3.9 → 1.4.0 |
+| `README.md` / `README_EN.md` | 版本徽章 1.3.9 → 1.4.0 |
+| `docs/index.html` | hero_badge 版本号 1.3.9 → 1.4.0（中/英） |
+
+### 五、向后兼容
+
+- 旧版 settings（无 `dashboardType` 字段）打开 popup 时自动默认 `metacubexd`，且保存设置后会自动补全字段
+- 自定义 URL 输入框为空时打开控制台不报错，回退到 metacubexd
+
+---
+
 ## v1.3.9 (2026-07-04)
 
 **顶部操作栏新增「控制台」按钮，一键打开 metacubexd 网页面板。**
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 <img src="extension/icons/logo128_white.png" width="128" height="128" alt="ClashOmega Logo">
 
-[![Version](https://img.shields.io/badge/version-1.3.9-blue?style=flat-square)](https://github.com/ciskonc/ClashOmega)
+[![Version](https://img.shields.io/badge/version-1.4.0-blue?style=flat-square)](https://github.com/ciskonc/ClashOmega)
 [![Platform](https://img.shields.io/badge/platform-Chromium%20Browsers-green?style=flat-square)](https://github.com/ciskonc/ClashOmega)
 [![License](https://img.shields.io/badge/license-MIT-orange?style=flat-square)](LICENSE)
 [![Manifest](https://img.shields.io/badge/Manifest-V3-purple?style=flat-square)](https://developer.chrome.com/docs/extensions/mv3/intro/)
diff --git a/README_EN.md b/README_EN.md
@@ -6,7 +6,7 @@
 
 <img src="extension/icons/logo128_white.png" width="128" height="128" alt="ClashOmega Logo">
 
-[![Version](https://img.shields.io/badge/version-1.3.9-blue?style=flat-square)](https://github.com/ciskonc/ClashOmega)
+[![Version](https://img.shields.io/badge/version-1.4.0-blue?style=flat-square)](https://github.com/ciskonc/ClashOmega)
 [![Platform](https://img.shields.io/badge/platform-Chromium%20Browsers-green?style=flat-square)](https://github.com/ciskonc/ClashOmega)
 [![License](https://img.shields.io/badge/license-MIT-orange?style=flat-square)](LICENSE)
 [![Manifest](https://img.shields.io/badge/Manifest-V3-purple?style=flat-square)](https://developer.chrome.com/docs/extensions/mv3/intro/)
diff --git a/docs/index.html b/docs/index.html
@@ -868,7 +868,7 @@
     <div class="hero-content">
       <div class="hero-badge">
         <span class="dot"></span>
-        <span data-i18n="hero_badge">Chrome 扩展 · v1.3.9 · 致敬 SwitchyOmega</span>
+        <span data-i18n="hero_badge">Chrome 扩展 · v1.4.0 · 致敬 SwitchyOmega</span>
       </div>
       <h1 class="hero-title">
         <span data-i18n="hero_title_1">掌控 Clash</span>
@@ -1183,7 +1183,7 @@ <h4 data-i18n="footer_related">相关</h4>
         doc_title: 'ClashOmega — Clash 代理规则管理扩展 | 致敬 SwitchyOmega',
         nav_features: '功能', nav_compare: '对比', nav_flow: '流程',
         nav_modes: '模式', nav_install: '安装', nav_compat: '兼容',
-        hero_badge: 'Chrome 扩展 · v1.3.9 · 致敬 SwitchyOmega',
+        hero_badge: 'Chrome 扩展 · v1.4.0 · 致敬 SwitchyOmega',
         hero_title_1: '掌控 Clash', hero_title_2: '一键切换 Ω',
         hero_subtitle: 'ClashOmega 是一款 Chrome 浏览器扩展，让你<strong>三模式切换</strong>、<strong>域名匹配检测</strong>、<strong>快捷规则管理</strong>，告别繁琐的 Clash 配置文件手动编辑。',
         stat_features: '功能特性', stat_browsers: '浏览器', stat_languages: '语言', stat_deps: '依赖',
@@ -1239,7 +1239,7 @@ <h4 data-i18n="footer_related">相关</h4>
         doc_title: 'ClashOmega — Clash Proxy Rule Manager | Tribute to SwitchyOmega',
         nav_features: 'Features', nav_compare: 'Compare', nav_flow: 'Workflow',
         nav_modes: 'Modes', nav_install: 'Install', nav_compat: 'Compat',
-        hero_badge: 'Chrome Extension · v1.3.9 · Tribute to SwitchyOmega',
+        hero_badge: 'Chrome Extension · v1.4.0 · Tribute to SwitchyOmega',
         hero_title_1: 'Master Clash', hero_title_2: 'One Switch Ω',
         hero_subtitle: 'ClashOmega is a Chrome extension that lets you <strong>switch between three modes</strong>, <strong>detect domain matching</strong>, and <strong>manage rules instantly</strong> — say goodbye to manual Clash config editing.',
         stat_features: 'Features', stat_browsers: 'Browsers', stat_languages: 'Languages', stat_deps: 'Dependencies',
diff --git a/extension/background.js b/extension/background.js
@@ -26,6 +26,11 @@ chrome.runtime.onInstalled.addListener(async () => {
         clashConfigPath: '',
         writeToYaml: false,
         disableFallback: false,
+        // 控制台面板类型：metacubexd | yacd | zashboard | custom
+        dashboardType: 'metacubexd',
+        // 自定义控制台 URL 模板（仅当 dashboardType='custom' 时使用）
+        // 必须含占位符 %host / %port / %secret，运行时会被实际值替换
+        dashboardCustomUrl: '',
         language: 'zh_CN'
       }
     });
diff --git a/extension/locales/en.json b/extension/locales/en.json
@@ -75,6 +75,11 @@
   "settings_write_to_yaml": "Write to YAML config file",
   "settings_write_to_yaml_hint": "Default: write to Script.js extension script. If checked, write to the current subscription's YAML config file (.yaml in profiles dir). Requires Clash restart.",
 
+  "settings_dashboard_panel": "Dashboard Panel",
+  "settings_dashboard_custom": "Custom",
+  "settings_dashboard_custom_placeholder": "https://example.com/#/setup?hostname=%host&port=%port&secret=%secret",
+  "settings_dashboard_hint": "Click the \"Console\" button at the top of popup to open this panel in a new tab. Clash API host/port/secret are auto-filled (placeholders %host / %port / %secret are replaced with actual values).",
+
   "settings_title": "Settings",
   "settings_api_url": "Clash API URL",
   "settings_api_hint": "Auto-generated from host+port. You can also edit the full URL manually.",
diff --git a/extension/locales/ja.json b/extension/locales/ja.json
@@ -75,6 +75,11 @@
   "settings_write_to_yaml": "YAML 設定ファイルに書き込む",
   "settings_write_to_yaml_hint": "デフォルト: Script.js 拡張スクリプトに書き込み。チェックすると現在のサブスクリプションの YAML 設定ファイル（profiles ディレクトリ内の .yaml）に書き込み。Clash の再起動が必要",
 
+  "settings_dashboard_panel": "コンソールパネル",
+  "settings_dashboard_custom": "カスタム",
+  "settings_dashboard_custom_placeholder": "https://example.com/#/setup?hostname=%host&port=%port&secret=%secret",
+  "settings_dashboard_hint": "popup 上部の「コンソール」ボタンをクリックすると新しいタブでこのパネルを開きます。Clash API の host/port/secret が自動入力されます（プレースホルダー %host / %port / %secret は実際の値に置換されます）",
+
   "settings_title": "設定",
   "settings_api_url": "Clash API URL",
   "settings_api_hint": "ホスト+ポートから自動生成。完全なURLを手動で編集することも可能。",
diff --git a/extension/locales/zh_CN.json b/extension/locales/zh_CN.json
@@ -71,6 +71,11 @@
   "settings_write_to_yaml": "写入 YAML 配置文件",
   "settings_write_to_yaml_hint": "默认写入 Script.js 扩展脚本；勾选后写入当前订阅的 YAML 配置文件（profiles 目录下的 .yaml），需重启 Clash 生效",
 
+  "settings_dashboard_panel": "控制台面板",
+  "settings_dashboard_custom": "自定义",
+  "settings_dashboard_custom_placeholder": "https://example.com/#/setup?hostname=%host&port=%port&secret=%secret",
+  "settings_dashboard_hint": "点击 popup 顶部「控制台」按钮在新标签页打开此面板，自动填入 Clash API 地址与密钥（占位符 %host / %port / %secret 会被实际值替换）",
+
   "settings_title": "设置",
   "settings_api_url": "Clash API 地址",
   "settings_api_hint": "修改 API 地址和端口后自动拼接，也可手动编辑完整 URL",
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,7 +1,7 @@
 {
     "manifest_version": 3,
     "name": "ClashOmega",
-    "version": "1.3.9",
+    "version": "1.4.0",
     "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA6E2OkWEYxSLKTaKIEPoetsEO5X7epTeeu831FNeICghst6xVhku1TOHxj371CjbRDUWdnQTI+xlD8UtGW0Kkx4j7mWNOvIDnW/idpiORExFn7/vMaEXeEfM18qBN9PSldChG3FAZ2PLhinZYoZPXRI63eVt5aU1yCn+Jw9va+OS1SZs+esjj1wPv12jaju3J5Uf1F/v7qUoYu3FPuPak/O0k+5LJbd29zKcDF5Vnp49g/fLuqzYjqi+RyJUMNnzxMsf2HOsvIK3Ynxr2mkWeVdcdwptFOdQFegldflLPo5f4E3A7XMiGG8cix5ceGMSKme0sR3Vl9P8aimB+4IsObwIDAQAB",
     "description": "控制 Clash 代理模式，直接管理 YAML 规则（致敬 SwitchyOmega / ZeroOmega）",
     "permissions": [
diff --git a/extension/popup/popup.css b/extension/popup/popup.css
@@ -757,6 +757,57 @@ input, button, select, textarea {
   font: var(--md-typescale-body-medium);
   color: var(--md-sys-color-on-surface);
 }
+
+/* ──── 控制台面板选择（radio + 自定义 URL） ──── */
+.settings-dashboard-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-spacing-1);
+  margin-top: var(--md-spacing-2);
+}
+.settings-radio-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--md-spacing-2);
+  padding: var(--md-spacing-1) 0;
+  cursor: pointer;
+  user-select: none;
+}
+.settings-radio-row input[type="radio"] {
+  width: 16px;
+  height: 16px;
+  margin-top: 2px;
+  cursor: pointer;
+  accent-color: var(--md-sys-color-primary);
+  flex-shrink: 0;
+}
+.settings-radio-row label {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  flex: 1;
+}
+.settings-radio-row .dashboard-name {
+  font: var(--md-typescale-body-medium);
+  color: var(--md-sys-color-on-surface);
+}
+.settings-radio-row .dashboard-url {
+  font: var(--md-typescale-body-small);
+  color: var(--md-sys-color-on-surface-variant);
+  word-break: break-all;
+}
+.settings-radio-row input[type="radio"]:disabled ~ label,
+.settings-radio-row input[type="radio"]:disabled + label {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+#settings-dashboard-custom-url {
+  margin-top: var(--md-spacing-1);
+}
+#settings-dashboard-custom-url:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .native-host-status-hint {
   width: 100%;
   margin-top: var(--md-spacing-1);
diff --git a/extension/popup/popup.html b/extension/popup/popup.html
@@ -263,6 +263,39 @@ <h3 class="md3-section-title" data-i18n="settings_title">设置</h3>
       <div class="settings-sub-tab-content" data-sub-tab-content="advanced">
         <div class="settings-group" id="settings-group-advanced">
           <div class="settings-group-title" data-i18n="settings_group_advanced">高级</div>
+
+          <!-- 控制台面板选择 -->
+          <label data-i18n="settings_dashboard_panel">控制台面板</label>
+          <div class="settings-dashboard-options">
+            <div class="settings-radio-row">
+              <input type="radio" id="dashboard-metacubexd" name="dashboard-type" value="metacubexd" checked>
+              <label for="dashboard-metacubexd">
+                <span class="dashboard-name">metacubexd</span>
+                <span class="dashboard-url">https://metacubex.github.io/metacubexd/</span>
+              </label>
+            </div>
+            <div class="settings-radio-row">
+              <input type="radio" id="dashboard-yacd" name="dashboard-type" value="yacd">
+              <label for="dashboard-yacd">
+                <span class="dashboard-name">Yacd Meta</span>
+                <span class="dashboard-url">https://yacd.metacubex.one/</span>
+              </label>
+            </div>
+            <div class="settings-radio-row">
+              <input type="radio" id="dashboard-zashboard" name="dashboard-type" value="zashboard">
+              <label for="dashboard-zashboard">
+                <span class="dashboard-name">Zashboard</span>
+                <span class="dashboard-url">https://board.zash.run.place/</span>
+              </label>
+            </div>
+            <div class="settings-radio-row">
+              <input type="radio" id="dashboard-custom" name="dashboard-type" value="custom">
+              <label for="dashboard-custom" data-i18n="settings_dashboard_custom">自定义</label>
+            </div>
+            <input class="md3-text-field" id="settings-dashboard-custom-url" type="text" placeholder="https://example.com/#/setup?hostname=%host&port=%port&secret=%secret" data-i18n-placeholder="settings_dashboard_custom_placeholder" disabled>
+          </div>
+          <div class="settings-hint" data-i18n="settings_dashboard_hint">点击 popup 顶部「控制台」按钮在新标签页打开此面板，自动填入 Clash API 地址与密钥（占位符 %host / %port / %secret 会被实际值替换）</div>
+
           <div class="settings-checkbox-row">
             <input type="checkbox" id="settings-write-to-yaml" style="cursor: pointer;">
             <label for="settings-write-to-yaml" data-i18n="settings_write_to_yaml" style="cursor: pointer;">写入 YAML 配置文件</label>
diff --git a/extension/popup/popup.js b/extension/popup/popup.js

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"manifest_version": 3,`
`3`	`3`	`"name": "ClashOmega",`
`4`		`- "version": "1.3.9",`
	`4`	`+ "version": "1.4.0",`
`5`	`5`	`"key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA6E2OkWEYxSLKTaKIEPoetsEO5X7epTeeu831FNeICghst6xVhku1TOHxj371CjbRDUWdnQTI+xlD8UtGW0Kkx4j7mWNOvIDnW/idpiORExFn7/vMaEXeEfM18qBN9PSldChG3FAZ2PLhinZYoZPXRI63eVt5aU1yCn+Jw9va+OS1SZs+esjj1wPv12jaju3J5Uf1F/v7qUoYu3FPuPak/O0k+5LJbd29zKcDF5Vnp49g/fLuqzYjqi+RyJUMNnzxMsf2HOsvIK3Ynxr2mkWeVdcdwptFOdQFegldflLPo5f4E3A7XMiGG8cix5ceGMSKme0sR3Vl9P8aimB+4IsObwIDAQAB",`
`6`	`6`	`"description": "控制 Clash 代理模式，直接管理 YAML 规则（致敬 SwitchyOmega / ZeroOmega）",`
`7`	`7`	`"permissions": [`