Extensions

src/components/tw-security-manager-modal/security-manager-modal.jsx

@@ -5,6 +5,7 @@ import Box from '../box/box.jsx';
 import Modal from '../../containers/modal.jsx';
 import SecurityModals from '../../lib/tw-security-manager-constants';
 import LoadExtensionModal from './load-extension.jsx';
+import UnsandboxModal from './unsandbox.jsx';
 import FetchModal from './fetch.jsx';
 import OpenWindowModal from './open-window.jsx';
 import RedirectModal from './redirect.jsx';
@@ -39,6 +40,8 @@ const SecurityManagerModalComponent = props => (
         <Box className={styles.body}>
             {props.type === SecurityModals.LoadExtension ? (
                 <LoadExtensionModal {...props.data} />
+            ) : props.type === SecurityModals.Unsandbox ? (
+                <UnsandboxModal {...props.data} />
             ) : props.type === SecurityModals.Fetch ? (
                 <FetchModal {...props.data} />
             ) : props.type === SecurityModals.OpenWindow ? (

src/components/tw-security-manager-modal/unsandbox.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {FormattedMessage} from 'react-intl';
+import {APP_NAME} from '../../lib/brand';
+
+const UnsandboxModal = props => (
+    <div>
+        <p>
+            <FormattedMessage
+                defaultMessage="The extension {extensionName} wants to run without the sandbox."
+                description="Part of modal shown when an extension asks to run unsandboxed"
+                id="tw.unsandbox.title"
+                values={{
+                    extensionName: props.extensionName
+                }}
+            />
+        </p>
+        <p>
+            <FormattedMessage
+                // eslint-disable-next-line max-len
+                defaultMessage="Running without the sandbox is dangerous. It can delete your projects, steal credentials, install malware, or perform other harmful actions. Only allow this if you trust the extension author. The {APP_NAME} developers are not responsible for any resulting issues."
+                description="Part of modal shown when an extension asks to run unsandboxed"
+                // garbomuffin level of fearmongering lol
+                // ok sorry garbomuffin it's just that literally all the modals made by garbomuffin are so exaggeratedly dramatic that I can't help but poke fun at it
+                id="tw.unsandbox.warning"
+                values={{
+                    APP_NAME
+                }}
+            />
+        </p>
+    </div>
+);
+
+UnsandboxModal.propTypes = {
+    extensionName: PropTypes.string.isRequired
+};
+
+export default UnsandboxModal;

src/containers/blocks.jsx

@@ -144,6 +144,23 @@ class Blocks extends React.Component {
         this.ScratchBlocks.Procedures.externalProcedureDefCallback = this.props.onActivateCustomProcedures;
         this.ScratchBlocks.ScratchMsgs.setLocale(this.props.locale);
 
+        // Bridge FieldCustom from Closure-compiled Blockly → ScratchBlocks for the JS extension.
+        // The develop-builds bundle defines window.Blockly.FieldCustom, while extensions call
+        // ScratchBlocks.FieldCustom.registerInput(...). This assignment wires them together.
+        if (window.Blockly && window.Blockly.FieldCustom) {
+            this.ScratchBlocks.FieldCustom = window.Blockly.FieldCustom;
+        }
+        // Temporary guard: keep UI stable even if bundles momentarily lack FieldCustom.
+        if (this.ScratchBlocks && !this.ScratchBlocks.FieldCustom) {
+            this.ScratchBlocks.FieldCustom = {
+                registerInput: () => {},
+                unregisterInput: () => {},
+                getRegisteredInputs: () => new Map()
+            };
+            log.warn('ScratchBlocks.FieldCustom is not available; using stub implementation. ' +
+                'This usually means the Blockly → ScratchBlocks FieldCustom bridge is not configured correctly.');
+        }
+
         const Msg = this.ScratchBlocks.Msg;
         Msg.PROCEDURES_RETURN = this.props.intl.formatMessage(messages.PROCEDURES_RETURN, {
             v: '%1'

src/containers/extension-library.jsx

@@ -8,7 +8,10 @@ import log from '../lib/log';
 import extensionLibraryContent, {
     galleryError,
     galleryLoading,
-    galleryMore
+    galleryMore,
+    galleryLoadingOB,
+    galleryMoreOB,
+    galleryErrorOB
 } from '../lib/libraries/extensions/index.jsx';
 import extensionTags from '../lib/libraries/tw-extension-tags';
 
@@ -39,9 +42,57 @@ const translateGalleryItem = (extension, locale) => ({
     description: extension.descriptionTranslations[locale] || extension.description
 });
 
-let cachedGallery = null;
+// Timeout constant for gallery loading
+const GALLERY_TIMEOUT_MS = 750;
 
-const fetchLibrary = async () => {
+// Common gallery fetcher function to reduce code duplication
+let cachedGalleryTW = null;
+let cachedGalleryOB = null;
+
+const fetchLibraryTW = async () => {
+    const res = await fetch('https://extensions.turbowarp.org/generated-metadata/extensions-v0.json');
+    if (!res.ok) {
+        throw new Error(`HTTP status ${res.status}`);
+    }
+    const data = await res.json();
+    return data.extensions.map(extension => ({
+        name: extension.name,
+        nameTranslations: extension.nameTranslations || {},
+        description: extension.description,
+        descriptionTranslations: extension.descriptionTranslations || {},
+        extensionId: extension.id,
+        extensionURL: `https://extensions.turbowarp.org/${extension.slug}.js`,
+        iconURL: `https://extensions.turbowarp.org/${extension.image || 'images/unknown.svg'}`,
+        tags: ['tw'],
+        credits: [
+            ...(extension.original || []),
+            ...(extension.by || [])
+        ].map(credit => {
+            if (credit.link) {
+                return (
+                    <a
+                        href={credit.link}
+                        target="_blank"
+                        rel="noreferrer"
+                        key={credit.name}
+                    >
+                        {credit.name}
+                    </a>
+                );
+            }
+            return credit.name;
+        }),
+        docsURI: extension.docs ? `https://extensions.turbowarp.org/${extension.slug}` : null,
+        samples: extension.samples ? extension.samples.map(sample => ({
+            href: `${process.env.ROOT}editor?project_url=https://extensions.turbowarp.org/samples/${encodeURIComponent(sample)}.sb3`,
+            text: sample
+        })) : null,
+        incompatibleWithScratch: !extension.scratchCompatible,
+        featured: true
+    }));
+};
+
+const fetchLibraryOB = async () => {
     const res = await fetch('https://omniblocks.github.io/extensions/generated-metadata/extensions-v0.json');
     if (!res.ok) {
         throw new Error(`HTTP status ${res.status}`);
@@ -55,7 +106,7 @@ const fetchLibrary = async () => {
         extensionId: extension.id,
         extensionURL: `https://omniblocks.github.io/extensions/${extension.slug}.js`,
         iconURL: `https://omniblocks.github.io/extensions/${extension.image || 'images/unknown.svg'}`,
-        tags: ['tw'],
+        tags: ['ob'],
         credits: [
             ...(extension.original || []),
             ...(extension.by || [])
@@ -84,41 +135,70 @@ const fetchLibrary = async () => {
     }));
 };
 
+// Helper function to handle gallery loading with timeout
+const loadGalleryWithTimeout = (fetchFunction, timeoutCallback, successCallback, errorCallback) => {
+    let timeoutFired = false;
+    const timeout = setTimeout(() => {
+        timeoutFired = true;
+        timeoutCallback();
+    }, GALLERY_TIMEOUT_MS);
+
+    fetchFunction()
+        .then(gallery => {
+            if (!timeoutFired) {
+                successCallback(gallery);
+            }
+            clearTimeout(timeout);
+        })
+        .catch(error => {
+            if (!timeoutFired) {
+                log.error(error);
+                errorCallback(error);
+            }
+            clearTimeout(timeout);
+        });
+};
+
 class ExtensionLibrary extends React.PureComponent {
     constructor (props) {
         super(props);
         bindAll(this, [
             'handleItemSelect'
         ]);
         this.state = {
-            gallery: cachedGallery,
-            galleryError: null,
-            galleryTimedOut: false
+            galleryTW: cachedGalleryTW,
+            galleryOB: cachedGalleryOB,
+            galleryTWError: null,
+            galleryOBError: null,
+            galleryTWTimedOut: false,
+            galleryOBTimedOut: false
         };
     }
     componentDidMount () {
-        if (!this.state.gallery) {
-            const timeout = setTimeout(() => {
-                this.setState({
-                    galleryTimedOut: true
-                });
-            }, 750);
-
-            fetchLibrary()
-                .then(gallery => {
-                    cachedGallery = gallery;
-                    this.setState({
-                        gallery
-                    });
-                    clearTimeout(timeout);
-                })
-                .catch(error => {
-                    log.error(error);
-                    this.setState({
-                        galleryError: error
-                    });
-                    clearTimeout(timeout);
-                });
+        // Fetch TurboWarp gallery if not cached
+        if (!this.state.galleryTW) {
+            loadGalleryWithTimeout(
+                fetchLibraryTW,
+                () => this.setState({galleryTWTimedOut: true}),
+                gallery => {
+                    cachedGalleryTW = gallery;
+                    this.setState({galleryTW: gallery});
+                },
+                error => this.setState({galleryTWError: error})
+            );
+        }
+
+        // Fetch OmniBlocks gallery if not cached
+        if (!this.state.galleryOB) {
+            loadGalleryWithTimeout(
+                fetchLibraryOB,
+                () => this.setState({galleryOBTimedOut: true}),
+                gallery => {
+                    cachedGalleryOB = gallery;
+                    this.setState({galleryOB: gallery});
+                },
+                error => this.setState({galleryOBError: error})
+            );
         }
     }
     handleItemSelect (item) {
@@ -157,23 +237,40 @@ class ExtensionLibrary extends React.PureComponent {
         }
     }
     render () {
-        let library = null;
-        if (this.state.gallery || this.state.galleryError || this.state.galleryTimedOut) {
-            library = extensionLibraryContent.map(toLibraryItem);
-            library.push('---');
-            if (this.state.gallery) {
-                library.push(toLibraryItem(galleryMore));
-                const locale = this.props.intl.locale;
-                library.push(
-                    ...this.state.gallery
-                        .map(i => translateGalleryItem(i, locale))
-                        .map(toLibraryItem)
-                );
-            } else if (this.state.galleryError) {
-                library.push(toLibraryItem(galleryError));
-            } else {
-                library.push(toLibraryItem(galleryLoading));
-            }
+        const library = extensionLibraryContent.map(toLibraryItem);
+        library.push('---');
+
+        const locale = this.props.intl.locale;
+
+        // Add TurboWarp gallery items
+        if (this.state.galleryTW) {
+            library.push(toLibraryItem(galleryMore));
+            library.push(
+                ...this.state.galleryTW
+                    .map(i => translateGalleryItem(i, locale))
+                    .map(toLibraryItem)
+            );
+        } else if (this.state.galleryTWError) {
+            library.push(toLibraryItem(galleryError));
+        } else if (this.state.galleryTWTimedOut) {
+            library.push(toLibraryItem(galleryLoading));
+        }
+
+        // Add separator between galleries
+        library.push('---');
+
+        // Add OmniBlocks gallery items
+        if (this.state.galleryOB) {
+            library.push(toLibraryItem(galleryMoreOB));
+            library.push(
+                ...this.state.galleryOB
+                    .map(i => translateGalleryItem(i, locale))
+                    .map(toLibraryItem)
+            );
+        } else if (this.state.galleryOBError) {
+            library.push(toLibraryItem(galleryErrorOB));
+        } else if (this.state.galleryOBTimedOut) {
+            library.push(toLibraryItem(galleryLoadingOB));
         }
 
         return (

src/containers/tw-security-manager.jsx

@@ -134,6 +134,7 @@ let allowedGeolocation = false;
 const SECURITY_MANAGER_METHODS = [
     'getSandboxMode',
     'canLoadExtensionFromProject',
+    'canUnsandbox',
     'canFetch',
     'canOpenWindow',
     'canRedirect',
@@ -283,6 +284,17 @@ class TWSecurityManagerComponent extends React.Component {
         });
     }
 
+    /**
+     * @param {string} extensionName The extension's display name
+     * @returns {Promise<boolean>} True if the extension can run without sandbox
+     */
+    async canUnsandbox (extensionName) {
+        const {showModal} = await this.acquireModalLock();
+        return showModal(SecurityModals.Unsandbox, {
+            extensionName
+        });
+    }
+
     /**
      * @param {string} url The resource to fetch
      * @returns {Promise<boolean>} True if the resource is allowed to be fetched