HTML Documents Extension by ScrTwPm · Pull Request #628 · PenguinMod/PenguinMod-ExtensionsGallery

ScrTwPm · 2026-08-22T17:27:27Z

Create HTML webpages and display them on the stage

I'll make a documentation when I know what you think of this

sakurabuilder · 2026-08-22T17:27:30Z

✅ Preview ready

Your changes are live at: https://lively-cedar-291d5d94.skr.mubilop.com/

Built from f75c800

ScrTwPm · 2026-08-22T17:28:55Z

But you were right about the Python extension it didnt really add anything new. I think this does add more features that that does. I'm checking right now to see if something like this already exists but i'm pretty sure it isn't

Steve0Greatness · 2026-08-22T19:56:24Z

Doesn't appear to scale appropriately for full screened usage

Additionally, although the extension still believes the currently displayed page is still the page when changing view modes (ie. into/out of full screen), it does actually get removed.

Steve0Greatness · 2026-08-22T20:18:06Z

Doesn't appear to scale appropriately for full screened usage
~~image removed~~

I see you had added a block that helps to scale appropriately (id spw). Second one still applies, though.

Steve0Greatness · 2026-08-22T20:27:50Z

Could you make it so that multiple pages can be displayed at once?

Steve0Greatness

A bit more of a general concern, but you should put this through Prettier, because this is formatted, in my opinion, a bit badly.

Steve0Greatness · 2026-08-22T20:08:06Z

+                        width: "470",
+                    },
+                    "ids": [],
+                    "code":""


This would probably require a bit of a restructure, but there are far safer and more efficient ways to handle HTML code. Storing it as a DOM would actually be a good idea, here.

Steve0Greatness · 2026-08-22T20:10:23Z

+  class HTMLtoCanvas {
+    constructor(runtime) {
+      // Initialize an array holding your default dropdown menu options
+      this.pages = {}


You'll probably want to use a Map instead of just an object, since maps are more optimized to change frequently.

Steve0Greatness · 2026-08-22T20:11:16Z

+  if (Scratch.gui) {
+    Scratch.gui.getBlockly().then(ScratchBlocks => {
+         ScratchBlocks.BlockSvg.registerCustomNotch("htmldocuments-coolshape", 
+            "c 2 0 3 1 4 2 l 4 4 c 1 1 4 -7 4 2 h 3 c 1 -1 2 -2 3 -3 c 1 1 2 2 3 3 l 3 0 c 0 -9 3 -1 4 -2 l 4 -4 c 1 -1 2 -2 4 -2"
+         )
+         ScratchBlocks.BlockSvg.registerCustomNotch("htmldocuments-coolshape2", 
+            "c 0 2 0 8 4 8 c 6 0 10 -7 14 -5 c 4 -2 8 5 14 5 c 4 0 4 -6 4 -8"
+         )
+        });
+}


These currently go unused.

Steve0Greatness · 2026-08-22T20:25:59Z

+            const el = document.createElement("div");
+            el.innerHTML = this.pages[args.PAGE].code;


For the purposes of sandboxing, please use iframe instead of a div. You can include HTML inside an iframe using the srcdoc attribute.

Steve0Greatness · 2026-08-22T20:30:32Z

+                    ]
+	        },
+            attr: {
+                acceptReporters: false,


This should probably be set to true, instead of false. This would necessitate the use of a DOM, however, as the way you're currently setting attributes by their name is unsafe if you allow direct input.

Steve0Greatness · 2026-08-22T20:32:34Z

+        		            {
+            opcode: 'eve',
+            blockType: Scratch.BlockType.HAT,
+            text: 'When listener for [ID] activated in [PAGE]',


For consistency, this should start with a lowercase letter.

Steve0Greatness · 2026-08-22T20:35:14Z

+                    this.pages[args.PAGE].code = `${this.pages[args.PAGE].code}<!--begin my style--><style>`
+                    this.pages[page].code = `${this.pages[page].code}.htmldocumentelement${args.TYPE}element${page}${args.NAME}{${args.PROPERTY}:${value}};`
+                    this.pages[args.PAGE].code = `${this.pages[args.PAGE].code}</style><!--end my style-->`


In cases like these, it's easier to read if you use += `...` instead of = `${...}...`

Steve0Greatness · 2026-08-22T20:36:22Z

+            this.pages[args.PAGE].data.x = 5
+            this.pages[args.PAGE].data.y = 5
+            console.log(this.viewing)
+            console.log(document.querySelector("#htmlpage"))


There are a few spare console logs here and there in this extension, I'd recommend removing them before this gets merged.

Steve0Greatness · 2026-08-22T20:40:12Z

+        vm.runtime.targets.forEach(target => {
+            const blocks = target.blocks;
+            const scripts = blocks.getScripts();
+
+            scripts.forEach(rootBlockId => {
+                const block = blocks.getBlock(rootBlockId);
+
+                if (block && block.opcode === targetOpcode) {
+                    let hatValue = '';
+                    let hatValuea = '';
+
+                    // 1. Check if it's a Field (dropdown/fixed text)
+                    if (block.fields && block.fields.ID && block.fields.PAGE) {
+						console.log(block.fields.ID.value)
+                        hatValue = block.fields.ID.value;
+                        hatValuea = block.fields.PAGE.value;
+                    } 
+                    // 2. Check if it's an Input (text bubble)
+                    else if (block.inputs && block.inputs.ID) {
+                        const input = block.inputs.ID;
+                        const inputa = block.inputs.PAGE;
+                        // Dig into the 'shadow' block which holds the text value
+                        const shadowBlock = blocks.getBlock(input.shadow);
+                        const shadowBlocka = blocks.getBlock(inputa.shadow);
+                        if (shadowBlock && shadowBlock.fields && shadowBlock.fields.TEXT && shadowBlocka && shadowBlocka.fields && shadowBlocka.fields.TEXT) {
+                            hatValue = shadowBlock.fields.TEXT.value;
+                            hatValuea = shadowBlocka.fields.TEXT.value;
+                        }
+                    }
+
+                    // Compare and trigger
+                    if (hatValue === triggerText && hatValuea === triggerTexta) {
+                        vm.runtime._pushThread(rootBlockId, target);
+                    }
+                }
+            });
+        });
+    });


runtime.startHats has the functionality to start hat blocks dependent on their values, already.

ScrTwPm · 2026-08-22T20:48:49Z

thanks for the feedback! i'll get to it.

Steve0Greatness · 2026-08-22T20:51:13Z

But you were right about the Python extension it didnt really add anything new. I think this does add more features that that does. I'm checking right now to see if something like this already exists but i'm pretty sure it isn't

Well, there's Project Interfaces, which is a similar idea, but it doesn't allow for the creation of documents made up of HTML.

ScrTwPm · 2026-08-22T20:52:51Z

i was thinking about that exact thing while i was making this. I wanted to give users more control and the ability to display and build their own webpage documents.

ScrTwPm · 2026-08-22T21:02:42Z

can i use 'https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.min.js' for prettier

ScrTwPm · 2026-08-22T21:05:58Z

or i can use this function

function prettierInText(html) {
  // Clean up existing whitespace and collapse it
  let clean = html.replace(/\s*([<>])\s*/g, '$1').replace(/\s+/g, ' ');
  let reg = /(<[^>]+>)/g;
  let matches = clean.split(reg).filter(Boolean);
  
  let formatted = '';
  let pad = 0;

  matches.forEach((token) => {
    // Check if the token is a closing tag
    if (token.match( /<\/\w+/ )) {
      pad--;
    }
    
    // Add current line indentation
    formatted += '  '.repeat(Math.max(0, pad)) + token + '\n';
    
    // Check if the token is an opening tag (and not self-closing)
    if (token.match( /<[^\/][^>]*[^>\/]>/ ) && !token.match(/<(input|img|br|hr|meta|link)/)) {
      pad++;
    }
  });

  return formatted.trim();
}

// Example Usage
const raw = '<div><h1>Title</h1><p>Text</p><img src="img.jpg"/></div>';
console.log(prettierInText(raw));

Gen1xLol · 2026-08-22T21:08:05Z

or i can use this function

function prettierInText(html) {
  // Clean up existing whitespace and collapse it
  let clean = html.replace(/\s*([<>])\s*/g, '$1').replace(/\s+/g, ' ');
  let reg = /(<[^>]+>)/g;
  let matches = clean.split(reg).filter(Boolean);
  
  let formatted = '';
  let pad = 0;

  matches.forEach((token) => {
    // Check if the token is a closing tag
    if (token.match( /<\/\w+/ )) {
      pad--;
    }
    
    // Add current line indentation
    formatted += '  '.repeat(Math.max(0, pad)) + token + '\n';
    
    // Check if the token is an opening tag (and not self-closing)
    if (token.match( /<[^\/][^>]*[^>\/]>/ ) && !token.match(/<(input|img|br|hr|meta|link)/)) {
      pad++;
    }
  });

  return formatted.trim();
}

// Example Usage
const raw = '<div><h1>Title</h1><p>Text</p><img src="img.jpg"/></div>';
console.log(prettierInText(raw));

This seems to be very clearly AI generated. I don't know if you vibecoded this extension but if you did that's a biiiig no-no

ScrTwPm · 2026-08-22T21:10:24Z

I typed this myself. But the function i just pasted was AI generated because I wanted to see if you would or would not want me to import the prettier.
I typed the full extension by hand. I've been working on it since May.

ScrTwPm · 2026-08-22T21:11:04Z

I don't paln on using the script I sent you but I want to verify if i'm ok to import perttier from https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.min.js'

ScrTwPm · 2026-08-22T21:19:26Z

This seems to be very clearly AI generated. I don't know if you vibecoded this extension but if you did that's a biiiig no-no

I built this off of my previous html to canvas extension that I made last year.
It is very unsafe and uses cst1229's extendable blocks (i never made a pr for it)

htmltocanvasold.js

Steve0Greatness · 2026-08-22T21:19:40Z

I don't paln on using the script I sent you but I want to verify if i'm ok to import perttier from https://unpkg.com/html-dom-parser@latest/dist/html-dom-parser.min.js'

Uh, I don't think that's Prettier, that's a DOM parser. Prettier is a code formatter, I was requesting that you reformat your code.

ScrTwPm · 2026-08-22T21:20:44Z

OH. ok. it does have a html parser. You wnated me to format my code

Steve0Greatness · 2026-08-22T21:21:21Z

OH. ok. it does have a html parser. You wnated me to format my code

Yes. The JavaScript of the extension, that's what I want you to format.

ScrTwPm · 2026-08-22T21:21:36Z

I'll do that when i post my new revided version that replies to your suggestions

(I'm a good coder but a horrible formatter. I'm downloading prettier on vscode right now)

Steve0Greatness · 2026-08-22T21:22:25Z

I'll do that when i post my new revided version that replies to your suggestions

(I'm a good coder but a horrible formatter. I'm downloading prettier on vscode right now)

Alright, you actually don't need to open a new PR, just push to the same branch that this PR is pulling from (main).

Steve0Greatness · 2026-08-22T21:23:38Z

Additionally, you can just use the builtin DOMParser provided by the browser, rather than needing an external package..

ScrTwPm · 2026-08-22T21:23:42Z

I got you.

ScrTwPm · 2026-08-22T21:28:59Z

should i use that to insert elements into my iframe or change the entire

this.pages[page].code

to a HTML DOM

ScrTwPm · 2026-08-25T18:50:42Z

Used a map for pages and return [] on empty "current page displayed". Added support for non-latin languages by only rejecting empty names for pages.

RedMan13 · 2026-08-25T18:59:37Z

WHYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY a DOM????????????????????????????????????????????????????????????????????????/

The Document Object Model (DOM) is the system used to represent the contents of a Document as an Object. In the web, a document is normally some flavor of Standard Generalized Markup Language (SGML). The current standard for representing such documents as Objects, is to make each "Element" into one object, that object would then house each property of that Element, such as attributes and child Elements. Normally, this structure is installed in languages so that the Document can be controlled by, and better understood by, the developers of a program, and the program itself. There have been, in the past, propositions to standardize syntax for interacting with SGML inside of languages that often need to, such as JavaScript. Though JavaScript did not end up accepting this proposed standard.

Gen1xLol · 2026-08-25T19:17:15Z

WHYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY a DOM????????????????????????????????????????????????????????????????????????/

I know this is unrelated to the issue and will most likely be marked as off topic but Why are you Like This

Steve0Greatness · 2026-08-25T19:29:01Z

WHYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY a DOM????????????????????????????????????????????????????????????????????????/

Because a DOM is safer than your current method.

ScrTwPm · 2026-08-25T19:56:41Z

Can i just change ```this.pages...code```` to a DOM after I perform the same string operations to it?
Or do I have to change my operations to edit the DOM rather than on the string

like using

// a function to add elements
docVar.createElement("div")

or can I just use

const toAString = new XMLSerializer()
const dom = new DOMParser()
// getinfo...
// a function to add elements
string = toAString.serializeToString(this.pages...code) //obviously this is a map now so different ops like get()
string += "<div>some stuff...</div>"
this.pages...code = dom.parseFromString(string, 'text/html') // set() now

Did you see my comment about how the nesting elements works. If this can be solved I can completely move to operations on the dom rather than on strings

thats why i asked

WHYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY a DOM????????????????????????????????????????????????????????????????????????/

jwklong · 2026-08-25T20:08:51Z

you can run unsandboxed javascript code with this extension

ScrTwPm · 2026-08-25T20:11:27Z

I'll disallow using <script> in the add text block

ScrTwPm · 2026-08-25T20:12:37Z

@jwklong do you have a resolution for the comment I sent before your find?

jwklong · 2026-08-25T20:16:51Z

you also cant make html code in parallel

ScrTwPm · 2026-08-25T20:29:31Z

uhh what should happen when that code is built? It does what I coded it to do.
The loop at the bottom begins first and appends <div id="...new-el">
Then before it is done the new thread begins and appends <div id ="...new-el2> and </div>
After the 2nd second, </div> is added from the loop at the bottom.
I don't know why anyone would need to build that script.

ScrTwPm · 2026-08-25T20:31:10Z

I will make it do whatever you think it should do if someone does that. I dont know what a user would expect if they did that.

Steve0Greatness · 2026-08-26T01:16:27Z

I'm not sure how I will change this just using a DOM. otherwise the idea is fine. Working on a solution right now

Actually, I'd argue, in part related to Jwk's argument, that this is actually a place where a DOM is better. You can set values on the thread (util.thread) that will only be on the current thread, meaning multiple threads can create different elements at the same time. You could set a value that is an array of all ids in order of last created. New elements get the latest id, and when the element closes it pops the current id.

Speaking of which, there should actually be a way to edit the child elements and text of an element after its creation.

ScrTwPm · 2026-08-26T01:36:10Z

so the there is a thread var (an array) that contains elements to be created. i'm changing it right now to a dom

ScrTwPm · 2026-08-26T21:42:22Z

changed to a DOM

Refactor HTMLDocuments class to remove unused 'ids' property and update related methods to use 'code' for element queries.

ScrTwPm · 2026-08-26T23:18:37Z

Added new blocks and got rid of unessecary tracking of ids

ScrTwPm · 2026-08-26T23:19:02Z

Didn't mean to close :slappingmyheademoji:

I just made a big change in how this works so there are a lot of things to fix

IM NOT LYING THERE WERE LITERALLY 67 CONSOLE LOG STATEMENTS IN MY CODE

ScrTwPm added 7 commits August 22, 2026 13:19

create 'htmldocuments.js'

4aefe41

Add new directory for images

4764423

Delete static/images/s

4797e08

Create ds

0703807

Add files via upload

9c28ffc

Delete static/images/ScrTwPm/ds

cb0fd0e

Add HTML Documents extension with details

15346e3

Steve0Greatness suggested changes Aug 22, 2026

View reviewed changes

removed access to add script tags in text

e9b09b1

converted to DOM

79425e8

Refactor HTMLDocuments class to remove 'ids' property

0089c67

Refactor HTMLDocuments class to remove unused 'ids' property and update related methods to use 'code' for element queries.

ScrTwPm closed this Aug 26, 2026

ScrTwPm reopened this Aug 26, 2026

ScrTwPm added 9 commits August 26, 2026 19:30

fixed all pages

f0c6b26

prettier!

95be974

fixed class setting

14cdadd

big bug fix

d458f2a

I just made a big change in how this works so there are a lot of things to fix

ok maybe this is the last fix

70d0d85

more options for types

b32cb82

got rid on 67 console logs

3d95283

IM NOT LYING THERE WERE LITERALLY 67 CONSOLE LOG STATEMENTS IN MY CODE

added what u did

45b732b

fixed all!

f75c800

		const el = document.createElement("div");
		el.innerHTML = this.pages[args.PAGE].code;

Uh oh!

Conversation

ScrTwPm commented Aug 22, 2026

Uh oh!

sakurabuilder Bot commented Aug 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Preview ready

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

Steve0Greatness left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

Gen1xLol commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

Steve0Greatness commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 22, 2026

Uh oh!

ScrTwPm commented Aug 25, 2026

Uh oh!

RedMan13 commented Aug 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Gen1xLol commented Aug 25, 2026

Uh oh!

Steve0Greatness commented Aug 25, 2026

sakurabuilder Bot commented Aug 22, 2026 •

edited

Loading

Steve0Greatness commented Aug 22, 2026 •

edited

Loading

RedMan13 commented Aug 25, 2026 •

edited

Loading

ScrTwPm commented Aug 25, 2026 •

edited

Loading