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:

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

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:

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

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

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:

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

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

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

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

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

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.

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:

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

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:

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:

Subindo e testando no Bootblocks:

Resultado:

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