Neste tutorial vou ensinar a criar sua primeira extensão para o Bootblocks.
A extensão vai alterar a cor de fundo de algum texto no nosso aplicativo.
O código que vamos usar para isso foi testado no site playcode.io:
Clique aqui para ver

Comece acessando o Criador de Extensões:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707400036-253455-criar-extensoes-bootblocks.png]

Primeiro vamos adicionar um nome do nosso bloco que será marcador_texto

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707400804-236097-criar-extensoes-bootblocks.png]

Agora vamos adicionar o nome dentro do bloco, para isso vamos na categoria Input e arrastamos o bloco dummy input para dentro do bloco principal:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707400965-386461-criar-extensoes-bootblocks.png]

Agora vamos em Field e arrastamos a entrada text para dentro do bloco dummy input:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401047-694782-criar-extensoes-bootblocks.png]

Digitamos o nome do bloco ali para que apareça aos usuários:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401120-90783-criar-extensoes-bootblocks.png]

Note que as alterações começam a aparecer na aba preview

Para que o bloco seja encaixável em outros, selecione a opção top + bottom connections:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401284-75131-criar-extensoes-bootblocks.png]

Agora vamos adicionar uma entrada do tipo "texto" que será a entrada do ID do componente que estará em HTML:
Deste vez arrastamos o bloco value input para dentro (abaixo) do bloco principal

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707403738-959118-criar-extensoes-bootblocks.png]

Vá em Field e arraste um bloco de texto para dentro dele e coloque "ID do Texto", esta será a entrada do id:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401625-383199-criar-extensoes-bootblocks.png]

No campo NAME colocamos o nome da entrada, que será "ID_TEXTO":

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401727-526187-criar-extensoes-bootblocks.png]

Faça o mesmo processo, mas agora para selecionar a cor. Deve ficar assim:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401879-569438-criar-extensoes-bootblocks.png]

Voce pode mudar a cor do bloco usando a propriedade colour:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707401982-387935-criar-extensoes-bootblocks.png]

Agora que ja temos o bloco (parte visual) montada, vamos criar o código dele. Copie o código gerado na aba "Código do Bloco" e cole em um editor de código como o VScode ou Notepad++

Vou usar o VScode, mas você pode usar outro se quiser.
O código gerou duas váriáves, que são value_id_texto e value_cor_texto que são as váriáveis que usaremos para obter o id do componente e o código hexadeximal.

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707402263-107114-criar-extensoes-bootblocks.png]

Um código simples para alterar a cor de fundo de um texto em javascript é esse:

let texto = document.getElementById('meu_texto');
texto.style.backgroundColor = "#51d119"

onde meu_texto é o id do elemento e #51d119 é a cor em código hexadecimal.
Portanto nosso código da extensão deve concatenar com as variáveis que o bloco gerou.
O código final do bloco ficará assim:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707402580-327135-criar-extensoes-bootblocks.png]

DICA: Use o ChatGPT para criar o código do bloco ou a extensão Codeium (Grátis) ou Copilot (paga) para auxilhar no VScode.

Copie todo o código do bloco e cole novamente no Criador de Extensões e depois clique em teste

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707402830-39672-criar-extensoes-bootblocks.png]

Na aba de Teste adicione os blocos de texto usando a aba lateral das categorias para colocar algum id fictício e também a cor, deve ficar assim:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707402985-166953-criar-extensoes-bootblocks.png]

Note que o código gerado é igual ao que criamos antes, isso significa que a extensão vai funcionar corretamente.

Agora basta clicar em Download da Extensão e dar um nome para ela. Depois vamos subir e testar no bootblocks:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707403300-337277-criar-extensoes-bootblocks.png]

Subindo e testando no Bootblocks:
[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707403398-20612-criar-extensoes-bootblocks.png]

Resultado:

[upl-image-preview url=https://comunidade.bootblocks.com.br/assets/files/2024-02-08/1707403488-33459-criar-extensoes-bootblocks.png]

Se você tiver algum erro ou problema ao criar, pode colocar suas dúvidas aqui e logo estaremos respondendo

criar extensão
como criar extensão