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 987dab1

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-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

Steve0Greatness

I'll probably do a somewhat more in-depth review at some point, but I noticed you added a menu icon. It's currently 374x374px, which is far to large (note they're always displayed at very small resolutions). My personal recommendation is to scale it to 32x32.

ScrTwPm · 2026-08-27T17:40:47Z

yeah i´ll do that.

and some other stuff. resolved nesting issues

ScrTwPm · 2026-08-27T18:11:04Z

ScrTwPm · 2026-08-27T18:19:22Z

runtime.startHats finally worked!

ScrTwPm · 2026-08-28T16:11:59Z

I'll be back on Monday.

ScrTwPm · 2026-08-29T23:56:41Z

back

Steve0Greatness · 2026-08-30T00:37:48Z

There should probably be a way to change text content of an element dynamically.

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

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 10 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

added menu icon uri

8828cd1

Steve0Greatness suggested changes Aug 27, 2026

View reviewed changes

changed menu icon uri

46508db

and some other stuff. resolved nesting issues

Refactor event listener to use startHats method

0b4c5dd

added hr or br element with no id

987dab1

		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!

Steve0Greatness commented Aug 26, 2026

Uh oh!

ScrTwPm commented Aug 26, 2026

Uh oh!

ScrTwPm commented Aug 26, 2026

Uh oh!

sakurabuilder Bot commented Aug 22, 2026 •

edited

Loading

Steve0Greatness commented Aug 22, 2026 •

edited

Loading