Tabby插件开发入门：创建第一个自定义插件

你是否曾觉得终端工具不够个性化？想添加专属功能却不知从何入手？本文将带你从零开始构建Tabby插件，无需复杂配置，15分钟即可完成第一个功能插件开发。读完本文后，你将掌握插件项目结构设计、核心API使用、本地调试与打包发布全流程。## 插件开发准备工作### 开发环境搭建Tabby插件开发需要以下环境依赖：- Node.js（15.x或更高版本）- Yarn包管理器- Git版本...

gitblog_00002

481人浏览 · 2025-10-01 04:17:20

gitblog_00002 · 2025-10-01 04:17:20 发布

Tabby插件开发入门：创建第一个自定义插件

【免费下载链接】tabby A terminal for a more modern age 项目地址: https://gitcode.com/GitHub_Trending/ta/tabby

你是否曾觉得终端工具不够个性化？想添加专属功能却不知从何入手？本文将带你从零开始构建Tabby插件，无需复杂配置，15分钟即可完成第一个功能插件开发。读完本文后，你将掌握插件项目结构设计、核心API使用、本地调试与打包发布全流程。

插件开发准备工作

开发环境搭建

Tabby插件开发需要以下环境依赖：

Node.js（15.x或更高版本）
Yarn包管理器
Git版本控制工具

首先克隆项目仓库：

git clone https://gitcode.com/GitHub_Trending/ta/tabby
cd tabby

安装依赖并构建项目：

# macOS & Windows
yarn

# Linux (Debian/Ubuntu示例)
sudo apt install libfontconfig-dev libsecret-1-dev libarchive-tools libnss3 libatk1.0-0 libatk-bridge2.0-0 libgdk-pixbuf2.0-0 libgtk-3-0 libgbm1 cmake
yarn

启动开发模式：

yarn start

项目结构采用插件化架构设计，核心插件模块位于项目根目录下：

tabby
├─ tabby-core               # 提供基础UI和标签管理
├─ tabby-terminal           # 提供终端标签功能
├─ tabby-settings           # 提供设置界面
├─ tabby-plugin-manager     # 插件管理功能
└─ tabby-local              # 本地shell和配置文件支持

完整项目结构可参考项目根目录及HACKING.md开发文档。

插件项目结构

Tabby插件遵循标准的Angular模块结构，典型插件目录如下：

tabby-myplugin
├─ src/                     # TypeScript源代码
│  ├─ components/           # Angular组件
│  ├─ services/             # Angular服务
│  ├─ api.ts                # 公开API定义
│  └─ index.ts              # 模块入口点
├─ package.json             # 插件元数据
├─ tsconfig.json            # TypeScript配置
└─ webpack.config.mjs       # Webpack构建配置

创建新插件最简单的方式是复制现有插件模板，例如tabby-clippy示例插件，或使用官方提供的插件脚手架工具。

开发第一个插件

初始化插件项目

创建插件目录并初始化package.json：

mkdir tabby-hello-world
cd tabby-hello-world
npm init -y

编辑package.json文件，添加Tabby插件标识：

{
  "name": "tabby-hello-world",
  "version": "0.1.0",
  "main": "dist/index.js",
  "keywords": ["tabby-plugin"],
  "tabbyPlugin": {
    "name": "Hello World",
    "description": "A simple hello world plugin",
    "author": "Your Name"
  }
}

安装必要依赖：

yarn add @angular/core @angular/common rxjs tabby-core
yarn add --dev typescript webpack webpack-cli ts-loader

实现插件功能

创建TypeScript源代码文件src/index.ts：

import { NgModule, Injectable } from '@angular/core';
import { ToolbarButtonProvider, ToolbarButton, ToolbarButtonLocation } from 'tabby-core';

@Injectable()
export class HelloWorldButtonProvider extends ToolbarButtonProvider {
    provide(): ToolbarButton[] {
        return [{
            icon: 'star',
            title: 'Say Hello',
            location: ToolbarButtonLocation.TOOLBAR,
            weight: 100,
            click: () => {
                alert('Hello, Tabby!');
            }
        }];
    }
}

@NgModule({
    providers: [
        { provide: ToolbarButtonProvider, useClass: HelloWorldButtonProvider, multi: true }
    ]
})
export default class HelloWorldModule { }

这段代码创建了一个工具栏按钮提供器，当点击按钮时会显示问候对话框。核心API来自tabby-core/src/api.ts，其中定义了所有可用的扩展点。

添加UI组件（可选）

如果需要创建自定义UI组件，可添加Angular组件文件src/components/hello.component.ts：

import { Component } from '@angular/core';

@Component({
    selector: 'hello-world',
    template: `
        <div class="hello-world">
            <h2>Hello from {{name}}!</h2>
        </div>
    `,
    styles: [`
        .hello-world {
            padding: 1rem;
            text-align: center;
        }
    `]
})
export class HelloComponent {
    name = 'Tabby Plugin';
}

然后在模块中声明组件并通过路由或弹窗展示。

插件调试与测试

本地调试插件

使用环境变量指定插件目录启动Tabby进行调试：

TABBY_PLUGINS=$(pwd) yarn start --debug

Tabby会自动监视插件代码变化并热重载，无需重启应用。调试界面可通过Chrome开发者工具访问（快捷键Ctrl+Shift+I或Cmd+Opt+I）。

调试工具与技巧

查看插件加载状态：在设置 > 插件页面查看已安装插件列表
日志输出：使用console.log()在开发者工具控制台查看调试信息
断点调试：在开发者工具Sources面板设置断点调试TypeScript代码
API文档：核心API定义在tabby-core/src/api.ts

常见问题排查

插件不加载：检查package.json中的"keywords"是否包含"tabby-plugin"
依赖冲突：确保插件依赖版本与Tabby核心一致
构建错误：运行yarn build检查Webpack构建输出
API变更：参考HACKING.md和CHANGELOG了解API变更历史

插件打包与发布

构建插件包

创建Webpack配置文件webpack.config.mjs：

import { configurePlugin } from '../tabby-webpack-config';

export default configurePlugin({
    entry: './src/index.ts',
});

添加构建脚本到package.json：

{
  "scripts": {
    "build": "webpack --mode production",
    "watch": "webpack --watch --mode development"
  }
}

执行构建命令生成发布文件：

yarn build

构建产物将输出到dist目录，包含编译后的JavaScript和资源文件。

发布到NPM

确保package.json包含完整元数据：

{
  "name": "tabby-hello-world",
  "version": "0.1.0",
  "description": "A simple hello world plugin for Tabby",
  "keywords": ["tabby-plugin"],
  "author": "Your Name",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://gitcode.com/yourusername/tabby-hello-world.git"
  }
}

登录NPM并发布：

npm login
npm publish

发布成功后，你的插件将出现在Tabby的插件管理器中，用户可通过搜索"hello-world"找到并安装。

高级插件开发

扩展点与API参考

Tabby提供多种扩展点，常见的包括：

ToolbarButtonProvider：添加工具栏按钮（tabby-core/src/api.ts）
TerminalDecorator：自定义终端输出（tabby-terminal/src/api.ts）
SettingsTabProvider：添加设置页面（tabby-settings/src/api.ts）
ProfileProvider：添加终端配置文件（tabby-local/src/api.ts）

例如，要添加自定义设置页面，可实现SettingsTabProvider接口：

import { SettingsTabProvider, SettingsTab } from 'tabby-settings';

@Injectable()
export class HelloWorldSettingsTabProvider extends SettingsTabProvider {
    provide(): SettingsTab[] {
        return [{
            id: 'hello-world',
            name: 'Hello World',
            component: HelloWorldSettingsComponent,
        }];
    }
}