Discuss Scratch

IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Hello! I have been developing an extension for TurboWarp called HTML Blocks!
It is used for creating HTML pages (obviously!) and can also run JavaScript code
It also works on other Scratch mods like LibreKitten

——————————————————————————————————

Version 1.0.4

The latest code is here:
 /*

Name: HTML Blocks
ID: htmlblocks
Description: Blocks for coding in HTML. It can also run JavaScript code!
By: IronBill05 <https://scratch.mit.edu/users/IronBill05/>

*/

(function(Scratch) {
'use strict';
if (!Scratch.extensions.unsandboxed) {
throw new Error('HTMLblocks must run unsandboxed');
}

class HTMLblocks {
getInfo() {
return {
id: 'HTMLblocks',
name: 'HTML Blocks',
color1: '#ff7777',
color2: '#ee6666',
color3: '#dd5555',
blocks: [
{
opcode: 'HTMLtag',
blockType: Scratch.BlockType.REPORTER,
text: 'HTML tag [ONE]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'h1'
},

}
},
{
opcode: 'HTMLtagWithAttr',
blockType: Scratch.BlockType.REPORTER,
text: 'HTML tag [ONE] with attributes [TWO]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'div'
},
TWO: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'id="div1"'
},

}
},
{
opcode: 'HTMLtagWithContents',
blockType: Scratch.BlockType.REPORTER,
text: 'HTML tag [ONE] contents [TWO]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'div'
},
TWO: {
type: Scratch.ArgumentType.STRING,
defaultValue: '<p> Hello! </p>'
},

}
},
{
opcode: 'HTMLtagContentsAndAttributes',
blockType: Scratch.BlockType.REPORTER,
text: 'HTML tag [ONE] attributes [TWO] contents [THREE]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'div'
},
TWO: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'id="header"'
},
THREE: {
type: Scratch.ArgumentType.STRING,
defaultValue: '<h1> Hello! </h1>'
},
}
},
{
opcode: 'encodeToDataURL',
blockType: Scratch.BlockType.REPORTER,
text: 'encode HTML [ONE] to URL',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: '<div> Hello! </div>'
},

}
},
{
opcode: 'openHTMLcode',
blockType: Scratch.BlockType.COMMAND,
text: 'open HTML [ONE]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: '<div> Hello! </div>'
},

}
},
{
opcode: 'RunJS',
blockType: Scratch.BlockType.COMMAND,
text: 'Run JS code [ONE]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'console.log("Hello World!")'
},

}
},
{
opcode: 'RunJSwithReturn',
blockType: Scratch.BlockType.REPORTER,
text: 'Evaluate JS code [ONE]',
arguments: {
ONE: {
type: Scratch.ArgumentType.STRING,
defaultValue: 'return("Hello World!")'
},

}
},
]
};
}

HTMLtag(args) {
return(`<${args.ONE}> </${args.ONE}>`);
}
HTMLtagWithAttr(args) {
return(`<${args.ONE} ${args.TWO}> </${args.ONE}>`);
}
HTMLtagWithContents(args) {
return(`<${args.ONE}> ${args.TWO} </${args.ONE}>`);
}
HTMLtagContentsAndAttributes(args) {
return(`<${args.ONE} ${args.TWO}> ${args.THREE} </${args.ONE}>`);
}
encodeToDataURL(args) {
return(`data:text/html, ${args.ONE}`);
}
openHTMLcode(args) {
let codepage = window.open(`data:text/html,<!DOCTYPE html> <html> <head> </head> <body> </body> </html>`);
codepage.document.body.innerHTML = args.ONE;
}
RunJS(args) {
eval(args.ONE);
}
RunJSwithReturn(args) {
return(eval("{ let funct = function() {" + args.ONE + "}; funct(); }"));
}

}
Scratch.extensions.register(new HTMLblocks());
})(Scratch);



——————————————————————————————————

How to use

1. Copy the code (in the box above) with CTRL + C or COMMAND + C

2. Open TurboWarp and click the extensions button.

3. Click “Custom Extension” from the menu.

4. Click “Text” and paste the code you copied in step 1.

5. Select “Run extension without sandbox” so it is allowed to run JavaScript.

6. Click the button that says Load, and the blocks should appear!

7. You are finished, and now you can start coding!


——————————————————————————————————

Known Bugs
- The “open HTML” block opens a blank page instead of a page with your code. - Trying to fix, having trouble



——————————————————————————————————




Last edited by IronBill05 (May 20, 2024 23:02:46)




Why can't websites move? Because they are stuck on the Web.
IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Huh, this has been at the top for a few HOURS now…



Why can't websites move? Because they are stuck on the Web.
Jensvp2
Scratcher
100+ posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

well uhhm

How do i use this?
caftingdead261
Scratcher
96 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

IronBill05 wrote:

The TurboWarp docs say that eval() is not allowed, but it works
this is because it allows people to run malicious code

I make random stuff and experiment with cloud variables.
I love Scratch mods and projects that use scratch in unique ways.
(semi-active) (only active on forms)
when F5 is clicked :: hat events
unlock a whole new perspective

IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Jensvp2 wrote:

well uhhm

How do i use this?
Copy the code in the box by highlighting all of the code, and pressing ctrl+c. Go to turbowarp, click the extensions button, and select custom extension from the menu. Click “text” or “code” and paste in the HTML blocks code. Select run without sandbox (so it can run JavaScript) and click Ok or click the “Add extension” button. Then all of the new blocks will appear, and you can use them.



Why can't websites move? Because they are stuck on the Web.
IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Hey everyone! I just remade the extension with an IIFE (immediately invoked function expression) in mind, so it works a bit better!

Stay on the lookout for future updates!



Why can't websites move? Because they are stuck on the Web.
Mahdir2111
Scratcher
100+ posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

IronBill05 wrote:

Hey everyone! I just remade the extension with an IIFE (immediately invoked function expression) in mind, so it works a bit better!

Stay on the lookout for future updates!
I tried to add it but it doesn't work

Hello, I like to do coding.
My ocular profile
My Scratchsite

IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Mahdir2111 wrote:

IronBill05 wrote:

Hey everyone! I just remade the extension with an IIFE (immediately invoked function expression) in mind, so it works a bit better!

Stay on the lookout for future updates!
I tried to add it but it doesn't work

Maybe try downloading it as a .js file? You can do it by pasting it in notepad or whatever text editor you have, then saving is as a javascript file (add .js to the end of the file name) and then load the new file into turbowarp as an extension.



Why can't websites move? Because they are stuck on the Web.
CST1229
Scratcher
1000+ posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

IronBill05 wrote:

(#1)
*The TurboWarp docs say that eval() is not allowed, but it works, and i am assuming it is just if you are sharing your extension to the gallery. TurboWarp - CONTRIBUTING.md
This is true, it only applies for the acceptance criteria for the gallery. Extensions loaded from file/text can use eval all they want.

This is a signature. It's a piece of text that appears below every post I write. Click here to learn more, including how to make your own.
RIP assets image hosting. 2013?-2023



IronAlt
Scratcher
2 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

(some random unnecessary post that I made)

Last edited by IronAlt (May 12, 2024 14:11:46)

IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Hmm, I thought the forums were going to be down…



Why can't websites move? Because they are stuck on the Web.
BigNate469
Scratcher
500+ posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

IronBill05 wrote:

Hmm, I thought the forums were going to be down…
They were, (relatively) briefly, for the ST to fix the 2.0 page bug (better known as the “My Stuff” bug, where 2.0 pages weren't loading properly or at all)

Highlight any part of this signature and press ctrl+shift+down arrow to see the rest of it
forever
if <person asks [what's a signature] :: sensing> then
Redirect to [https://en.scratch-wiki.info/wiki/Signature] :: motion
end
end
Please read the list of Officially Rejected Suggestions before posting a suggestion for Scratch! 100th post
This signature is designed to be as helpful as possible.
View all of the topics you've posted in:
https://scratch.mit.edu/discuss/search/?action=show_user&show_as=topics
View all of your posts:
https://scratch.mit.edu/discuss/search/?action=show_user&show_as=posts
Forum tips:
Don't post in topics where the latest post is over ~2 months old, unless you have something critical to add. Especially in topics that are several years old- it isn't helpful, and is known as necroposting.
Don't post unrelated things in topics, including questions of your own. Make a new topic for your questions.
You can use the
 [color=color name or hexadecimal value here] and [/color] 
tags to color text.
Lesser-known Scratch URLs:
scratch.pizza (redirects to main page)
https://scratch.mit.edu/projects/PROJECT ID HERE/remixtree (replace “PROJECT ID HERE” with project id number. Shows all the remixes of the project, and the remixes of those projects, and the remixes of those projects, and so on, as a chart. Link currently redirects to one of my projects)
View a larger list at: https://scratch.mit.edu/discuss/topic/542480/
Why @Paddle2See's responses are so often identical: https://scratch.mit.edu/discuss/topic/762351/
IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

BigNate469 wrote:

IronBill05 wrote:

Hmm, I thought the forums were going to be down…
They were, (relatively) briefly, for the ST to fix the 2.0 page bug (better known as the “My Stuff” bug, where 2.0 pages weren't loading properly or at all)
Oh ok.



Why can't websites move? Because they are stuck on the Web.
IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Wow, 250 views on this topic! Thanks :D



Why can't websites move? Because they are stuck on the Web.
IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

bump!



Why can't websites move? Because they are stuck on the Web.
IronBill05
Scratcher
89 posts

HTML Blocks - TurboWarp Extension - Run JavaScript code!!!

Do you think i should add some more blocks?



Why can't websites move? Because they are stuck on the Web.

Powered by DjangoBB