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


added 61 packages, and audited 62 packages in 5s

6 packages are looking for funding
  run `npm fund` for details

11 vulnerabilities (1 low, 2 moderate, 8 high)

To address all issues, run:
  npm audit fix

Run `npm audit` for details.

> penguinmod-extensionsgallery@0.0.1 build
> vite build

vite v6.3.5 building SSR bundle for production...
transforming...
✓ 54 modules transformed.

npm notice
npm notice New major version of npm available! 10.8.2 -> 12.0.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v12.0.2
npm notice To update run: npm install -g npm@12.0.2
npm notice
12:04:48 AM [vite-plugin-svelte] src/routes/+page.svelte:503:4 Unused CSS selector ".extension-list-filters-label"
https://svelte.dev/e/css_unused_selector
501:         display: initial;
502:     }
503:     .extension-list-filters-label {
                                      ^
504:         display: block;
505:         margin-top: 8px;
✗ Build failed in 725ms
error during build:
src/lib/Documentation/pages.js (90:4): Expected ',', got 'string literal (HTMLDocuments, "HTMLDocuments")'
file: /app/src/lib/Documentation/pages.js:90:4

88: 
89:     // HTML Documents
90:     "HTMLDocuments": HTMLDocuments,
        ^
91: };

    at getRollupError (file:///app/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    at ParseError.initialise (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:14433:28)
    at convertNode (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:16313:10)
    at convertProgram (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:15553:12)
    at Module.setSource (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:17308:24)
    at async ModuleLoader.addModuleSource (file:///app/node_modules/rollup/dist/es/shared/node-entry.js:21321:13)

Failed on 453b87f

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-30T17:43:23Z

or are you talking about changing the elements while the page is showing without having to display it again to reload the changes

ScrTwPm · 2026-08-30T17:45:08Z

Steve0Greatness · 2026-08-30T17:55:18Z

or are you talking about changing the elements while the page is showing without having to display it again to reload the changes

Yes.

I also made custom reporter types...

ScrTwPm · 2026-08-30T19:26:12Z

Done

html is brown css is blue

Added error handling to listener method.

Added documentation for creating HTML webpages.

Expanded documentation for HTML document manipulation commands, including creation, display, and styling of pages and elements.

ScrTwPm · 2026-09-01T01:13:19Z

all changes made

RedMan13 · 2026-09-01T04:20:30Z

if you could please fix the merge conflicts github lists that would be perfect

jwklong · 2026-09-01T07:50:30Z

your custom types need serialization/deserialization support or projects may not be able to safe if for example a custom type is stored inside a variable

ScrTwPm · 2026-09-01T17:02:38Z

if you could please fix the merge conflicts github lists that would be perfect

Can i make a new PR? this one has too many commits anyway.

ScrTwPm · 2026-09-01T17:03:19Z

your custom types need serialization/deserialization support or projects may not be able to safe if for example a custom type is stored inside a variable

I'll get on it

ScrTwPm · 2026-09-02T20:09:40Z

ill finish the serilizzaton by the end of the week

ScrTwPm · 2026-09-05T00:04:59Z

added

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

Added dynamic content change

eb348fd

I also made custom reporter types...

ScrTwPm added 16 commits August 30, 2026 16:09

changed some names

8367e28

changed the get html

c6bf4b2

capitalized the D in documents

0ec15f2

fixed bugs

170edc7

Change color1 from '#ff9900' to '#e34f26'

2d70b13

color

677ef81

html is brown css is blue

new style css

5df1728

fixed phew

8b16854

bugs-be-gone

caa8fef

added listener block

c854055

try catch

3256df5

Added error handling to listener method.

Add HTML Documents documentation

b8f142f

Added documentation for creating HTML webpages.

Add HTMLDocuments to documentation export

2b85b9a

Add documentation field to HTMLDocuments entry

765c278

Enhance HTML Documents documentation

a7c4483

Expanded documentation for HTML document manipulation commands, including creation, display, and styling of pages and elements.

Fix typo in remove event listener block

349452f

Merge branch 'main' into main

f122340

serializer

453b87f

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

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 30, 2026

Uh oh!

ScrTwPm commented Aug 30, 2026

Uh oh!

Steve0Greatness commented Aug 30, 2026

Uh oh!

ScrTwPm commented Aug 30, 2026

Uh oh!

sakurabuilder Bot commented Aug 22, 2026 •

edited

Loading

Steve0Greatness commented Aug 22, 2026 •

edited

Loading