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界面,观察新文本是否立即生效。










