# How to make an extension?

**URL:** <https://forum.makecode.com/t/how-to-make-an-extension/4225>\
**Category:** Help\
**Created:** [November 1, 2020, 5:20pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225 "2020-11-01T17:20:10Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 1, 2020, 5:20pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/1 "2020-11-01T17:20:10Z")

</div>

I have a Typescript function.

Should I put that function in a new explorer tab, then at the top write `%//block`?

What do I write there?

---

<div class="post-metadata">

**Author:** ![cosmoscowboy](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/cosmoscowboy/32/1718_2.png) [@cosmoscowboy](https://forum.makecode.com/u/cosmoscowboy)\
**Post date:** [November 1, 2020, 7:34pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/2 "2020-11-01T19:34:49Z")

</div>

> **[Defining blocks](https://makecode.com/defining-blocks)**
>
> This section describes how to annotate your MakeCode APIs to expose them in the Block Editor.

  
[https://makecode.com/playground](https://makecode.com/playground)

Take at look at this documentation

---

<div class="post-metadata">

**Author:** ![jwunderl](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/jwunderl/32/5308_2.png) [@jwunderl](https://forum.makecode.com/u/jwunderl)\
**Post date:** [November 1, 2020, 7:35pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/3 "2020-11-01T19:35:28Z")

</div>

Yup, the first thing is `//% block` to convert the function to create a block. There’s a decent amount of docs [here](https://makecode.com/defining-blocks) on the different attributes, [here](https://makecode.com/extensions/getting-started) on creating an extension (including using github), and you can test out the block authoring at [https://makecode.com/playground](https://makecode.com/playground) - there are a decent number of different different examples in the dropdown on the left side of the screen, and you can ask us for more info on how specific things are defined. (Typically, the easiest way to make a block to start is to find one that looks like what you want, and copy over the attributes from them).

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 1, 2020, 9:31pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/4 "2020-11-01T21:31:24Z")

</div>

> **[Untitled](https://arcade.makecode.com/44929-81318-48888-64462)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.

Something small, just trying it out. (edit code to see extension)

---

<div class="post-metadata">

**Author:** ![LcAtonal](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/lcatonal/32/16800_2.png) [@LcAtonal](https://forum.makecode.com/u/LcAtonal)\
**Post date:** [November 5, 2020, 12:56pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/5 "2020-11-05T12:56:07Z")

</div>

how do you do this

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [November 5, 2020, 1:53pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/6 "2020-11-05T13:53:07Z")

</div>

I’m asking myself that as well…

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 5, 2020, 2:26pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/7 "2020-11-05T14:26:01Z")

</div>

Oh, I used to ask myself that as well. I learned js and typescript a long time ago, even though I’m still a kid. Because I learned it long ago, I forgot most of it. I recommend taking a course on js, KhanAcademy has one.

---

<div class="post-metadata">

**Author:** ![Dreadmask197](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/dreadmask197/32/10494_2.png) [@Dreadmask197](https://forum.makecode.com/u/Dreadmask197)\
**Post date:** [November 5, 2020, 2:31pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/8 "2020-11-05T14:31:18Z")

</div>

I can’t find it. It’s not on khan academy for me at least

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 5, 2020, 2:32pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/9 "2020-11-05T14:32:08Z")

</div>

Click new course, and coding (it is green)

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 5, 2020, 11:00pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/10 "2020-11-05T23:00:41Z")

</div>

How can I have a sprite parameter?

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [November 6, 2020, 12:09am UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/11 "2020-11-06T00:09:23Z")

</div>

```auto
namespace myCategory {
    //% blockId="do_something"
    //% block="do something with $sprite"
    //% sprite.shadow=variables_get
    //% sprite.defl=mySprite
    export function doSomethingWithASprite(sprite: Sprite) {

    }
}

```

Here is what each of those annotations above the function mean:

1. `blockId=do_something`: Every block needs to have a unique ID. You don’t have to include this (we’ll make one for you) but it’s good practice to set it yourself and include your extension name somewhere in it. The user will never see it! This is just for MakeCode to use internally
2. `block="do something with $sprite"`: This sets the text of the block. Any word that starts with `$` will become a parameter in the MakeCode editor. Make sure the name you use here matches the name you declare in your function. In this case, it’s “sprite”
3. `sprite.shadow=variables_get`: This tells MakeCode to make the default block for the “sprite” parameter a variable block. “variables\_get” is the blockId of the variable getter block. You can put any blockId you want in here but it must be for a function that returns a Sprite!
4. `sprite.defl=mySprite`: This sets the default value of the “sprite” parameter. In the case of a variable, that means it’s setting the name the variable will have in the toolbox

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 6, 2020, 12:16am UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/12 "2020-11-06T00:16:24Z")

</div>

Thanks, this helps a lot.

Also, I know how to make a slider dropdown, but how would I make this? (graph)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/e/ed3616e6141f87ccf8a7c33f2f7e9cb312d0cc65.png)

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [November 6, 2020, 5:41pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/13 "2020-11-06T17:41:03Z")

</div>

Here is the definition for that block:

```auto
namespace myCategory {
    //% blockId=my_extension_set_position
    //% block="set position to x $x y $y"
    //% x.shadow="positionPicker"
    //% y.shadow="positionPicker"
    export function setPosition(x: number, y: number): void {

    }
}

```

Note that the parameters must be named “x” and “y” for the position picker to work correctly. Also, this will work for the Arcade screen size. If you want to do custom sizes, it is much more complicated. If you just want to use the arcade screen size, **ignore the rest of this message**!

To customize the dimensions, you need to make something we call a _shadow_ block. These are blocks that are just used inside of other blocks and don’t show up in the toolbox by themselves. Here’s an example of how that might look:

```auto
namespace myCategory {
    //% blockId=my_extension_custom_position_picker
    //% block="$index"
    //% blockHidden=true
    //% shim=TD_ID
    //% index.fieldEditor="position"
    //% index.fieldOptions.decompileLiterals="true"
    //% index.fieldOptions.screenWidth=500
    //% index.fieldOptions.screenHeight=1000
    export function __positionPicker(index: number) {
        return index;
    }

    //% blockId=my_extension_set_position
    //% block="set position to x $x y $y"
    //% x.shadow="my_extension_custom_position_picker"
    //% y.shadow="my_extension_custom_position_picker"
    export function setPosition(x: number, y: number): void {

    }
}

```

And an explanation of the new attributes:

1. `blockHidden=1`: Makes sure the block does not show up in the toolbox
2. `shim=TD_ID`: Makes sure this function doesn’t show up in the TypeScript. It is **VERY IMPORTANT** that you only use this on functions that just return their inputs. In this case, the function just returns index without changing its values so it’s all good
3. `index.fieldEditor="position"`: makes it so that the index uses the position picker
4. `index.fieldOptions.decompileLiterals="true"`: This one is really tough to explain; just make sure you include it here. You don’t usually need it on blocks but you do here.
5. `index.fieldOptions.screenWidth=500`: This configures the width of the screen. Same for screenHeight on the next line.

The other things you can configure for this field are:  
`index.fieldOptions.min=0` and `index.fieldOptions.max=100`, which will set the min and max numbers the user can type into the field.

Also, the reason that the shadow block starts with underscores is to prevent it from showing up in the JavaScript autocomplete. We filter out all functions that start with “\_”

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 21, 2020, 9:43pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/14 "2020-11-21T21:43:00Z")

</div>

How would I make a music (piano) menu dropdown?

---

<div class="post-metadata">

**Author:** ![GameGod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/gamegod/32/2756_2.png) [@GameGod](https://forum.makecode.com/u/GameGod)\
**Post date:** [November 22, 2020, 1:06am UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/15 "2020-11-22T01:06:59Z")

</div>

Please, I need help with this!

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [November 23, 2020, 5:04pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/16 "2020-11-23T17:04:49Z")

</div>

Add a parameter of type number and set the shadow to device\_note

---

<div class="post-metadata">

**Author:** ![Agent\_14](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/agent_14/32/17567_2.png) [@Agent\_14](https://forum.makecode.com/u/Agent_14)\
**Post date:** [February 25, 2021, 3:52pm UTC](https://forum.makecode.com/t/how-to-make-an-extension/4225/17 "2021-02-25T15:52:50Z")

</div>

Can you make a drop down with presets you make?