Qoder首个插件开发需五步：一、环境准备与SDK集成；二、创建继承QoderPlugin的基础类；三、注册扩展并绑定UI菜单项；四、Rollup构建并打包ZIP；五、配置qoder-dev-server实现热重载调试。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您希望为Qoder平台开发自定义功能，但尚未接触过其插件体系，则可能是由于缺乏对官方SDK结构和基础开发流程的了解。以下是利用Qoder官方SDK编写首个扩展的实操步骤：
一、环境准备与SDK集成
在开始编码前，需确保本地开发环境满足Qoder插件运行的基本依赖，并正确引入官方SDK核心模块，为后续接口调用奠定基础。
1、访问Qoder开发者门户，下载最新版qoder-sdk-js压缩包。
2、解压后将sdk/dist/qoder-sdk.min.js文件复制到插件项目根目录下的lib/子目录中。
3、在插件主入口文件（如index.js）顶部添加<script>标签引用语句：<strong><font color="green">import { QoderPlugin, registerExtension } from './lib/qoder-sdk.min.js';</script>
4、确认Node.js版本不低于v16.14.0，执行npm init -y初始化项目，并安装必需的构建依赖：npm install --save-dev rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve。
二、创建基础插件类
Qoder插件必须继承自QoderPlugin基类，该类封装了生命周期钩子与上下文注入机制，是所有扩展行为的统一入口点。
1、新建src/MyFirstExtension.js文件。
2、在文件中声明类并继承QoderPlugin：class MyFirstExtension extends QoderPlugin { constructor() { super(); } }
3、在constructor内部调用this.name = 'my-first-extension'，为插件指定唯一标识符。
4、添加activate方法，在其中插入console.log('插件已激活')用于验证加载状态。
三、注册扩展并绑定UI入口
注册操作使Qoder主程序识别插件存在，而UI绑定则决定该扩展如何被用户触发，二者缺一不可。
1、在src/index.js中导入刚定义的类：import { MyFirstExtension } from './MyFirstExtension.js';
2、调用registerExtension函数传入实例：registerExtension(new MyFirstExtension());
代码编辑 CLI 工具集合：Cursor CLI（agent）和 Qoder CLI（qodercli），用于代码修改、重构、Code Review 及自动化代码任务。
3、在MyFirstExtension类中添加getMenuItems方法，返回包含label和action字段的对象数组。
4、在返回对象中设置label值为'我的第一个按钮'，action值为一个箭头函数，内容为alert('Hello from Qoder SDK!')。
四、构建与加载插件包
Qoder仅接受特定格式的插件包，需通过构建工具生成符合规范的dist/bundle.js，并以ZIP方式封装元信息。
1、配置rollup.config.js，设置input为src/index.js，output.file为dist/bundle.js，format为iife。
2、在package.json的scripts字段中添加"build": "rollup -c"。
3、执行npm run build生成dist/bundle.js文件。
4、新建manifest.json文件，写入必要字段：{ "id": "my-first-extension", "name": "我的第一个扩展", "version": "0.1.0", "main": "bundle.js", "permissions": [] }。
5、将manifest.json与dist/bundle.js一同压缩为my-first-extension.zip，确保ZIP内无嵌套文件夹。
五、调试与热重载配置
手动反复打包加载效率低下，启用调试服务可实时响应源码变更，显著提升开发迭代速度。
1、安装qoder-dev-server全局工具：npm install -g qoder-dev-server。
2、在项目根目录执行qoder-dev-server --watch src/ --port 8081。
3、启动Qoder客户端，进入设置→插件管理→点击“从URL加载”，输入http://localhost:8081/bundle.js。
4、修改MyFirstExtension.js中的alert消息文本，保存后刷新Qoder界面，观察新文本是否立即生效。
