NaiveTab Add Setting Pane
SkillWeb & browsingGuide for developing the Setting pane for the NaiveTab browser extension. Use when the user wants to add a new Setting pane or a new settings page. Covers the complete list of files to modify and registration conventions, to avoid missing key steps.
Available today. Use it from your connected AI after setup.
No other account needed.
Connect ahel once, and every AI you use reads what you have installed.
Then ask your AI: use the NaiveTab Add Setting Pane skill
What this skill tells your AI
The instructions your AI receives, as published by gxfg/newtab-naivetab in .claude/skills/add-setting-pane/SKILL.md and read by ahel’s review.
新增 Setting 面板需按顺序完成以下步骤。
必须修改的文件
Step 1 — src/setting/registry.ts:注册面板
在 SETTING_GROUPS 对应分组中追加:
{
code: 'myPane', // settingPanes 类型中的有效 code
labelKey: 'setting.group.myPane', // i18n key
}
code必须与src/setting/panes/{code}/index.vue路径一致labelKey需要同步添加到 i18n 文件(见 Step 3)
Step 2 — src/setting/panes/{code}/index.vue:面板组件
创建面板组件,必须:
- 使用
<script setup lang="ts"> - 使用
src/setting/fields/中的原子组件,禁止自行封装 - 需要图标时在
src/logic/constants/icons.ts的SETTING_ICON_META中注册
Step 3 — i18n:添加翻译 key
在 src/locales/zh-CN.json 和 src/locales/en-US.json 中同步添加 labelKey 对应的翻译。
Step 4(可选)— 关联 Widget
如果面板供特定 Widget 使用,在 src/common/widget-constants.ts 的 WIDGET_SETTING_PANE_MAP 中注册映射:
myWidget: 'myPane',
注意事项
- 禁止硬编码图标和文本(见 no-hardcode.md)
- 面板内颜色使用双元素数组
[浅色, 深色] - 完整规范见 setting.md
Signals
- GitHub stars
- 129
- Forks
- 11
- Last commit
- Sep 2026
Advanced
- Catalog kind
- skill
- Gateway key
add-setting-pane- Source
- github.com/gxfg/newtab-naivetab