# Quick Add Component

## Introduction

[Cocos Creator Editor Extension]

**Select several nodes, press the hotkey to open the search bar, find target component by entering the name, and add the component to the nodes you selected quickly.**



## Open Source

This extension is an open source project, here is the git repository: [https://gitee.com/ifaswind/ccc-quick-add-component](https://gitee.com/ifaswind/ccc-quick-add-component)

If you like this project, don't forget to star [![star](https://gitee.com/ifaswind/ccc-quick-add-component/badge/star.svg?theme=dark)](https://gitee.com/ifaswind/ccc-quick-add-component/stargazers)!

*If you have any usage problems, just create an issue on Gitee or add my WeChat `im_chenpipi` and leave a message.*



## Screenshots

![screenshot-1](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-1.png)

![screenshot-2](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-2.png)

![screenshot-2](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/screenshot-3.png)

![search-bar](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/search-bar.png)

![setting-panel](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/setting-panel.png)



## Environment

Platform: Windows、macOS

Engine: Cocos Creator 2.x



## Download & Installation

### Install from Cocos Store

You can find this extension in Cocos Store now, click on *Extension -> Cocos Store* option to open the Cocos Store.

Enter "**Quick Add Component**" in the search bar, find it and then install it.

![cocos-store](https://gitee.com/ifaswind/image-storage/raw/master/repositories/ccc-quick-add-component/cocos-store.png)

*Quick Add Component: [https://store.cocos.com/app/detail/2712](https://store.cocos.com/app/detail/2712)*



### Download from git repository

Click [here](https://gitee.com/ifaswind/ccc-quick-add-component/releases) or go to the release panel, download the latest version package of this extension.

And then unzip the package:

- Windows: Unzip to `C:\Users\${your username}\.CocosCreator\packages\`
- macOS: Unzip to `~/.CocosCreator/packages/`

For example, on my Windows computer, the full path of `main.js` file should be `C:\Users\Shaun\.CocosCreator\packages\ccc-quick-add-component\main.js`.



## Usage

### Search and add component

1. Select several nodes in "Node Tree".

2. Press the hotkey (The default is `F3`) or click on *Extension -> Quick Add Component -> Search* option to open the search bar.

3. Enter the component name then you'll get a list of components.

4. Scroll the mouse wheel or press the `Up Arrow` and `Down Arrow` to scroll through the list.

5. Find and select your target component, click on it or press `Enter` to add it to the nodes that you selected.

And then, click on anywhere outside the search bar or press `ESC` to close the search bar.



### Setting

Click on *Extension -> Quick Add Component -> Setting* option to open the setting panel.

In the setting panel, you can choose a hotkey(shortcut, for opening the search bar quickly) in preset list, or customize one by yourself.

One thing you should know, not every keys/keys-combinations can be used, because some keys/keys-combinations have been used by the system or Cocos Creator.

*Accelerator reference: [https://www.electronjs.org/docs/api/accelerator](https://www.electronjs.org/docs/api/accelerator)*

🥳 Enjoy!



---



# 公众号

## 菜鸟小栈

😺 我是陈皮皮，一个还在不断学习的游戏开发者，一个热爱分享的 Cocos Star Writer。

🎨 这是我的个人公众号，专注但不仅限于游戏开发和前端技术分享。

💖 每一篇原创都非常用心，你的关注就是我原创的动力！

> Input and output.

![](https://gitee.com/ifaswind/image-storage/raw/master/weixin/official-account.png)