Added CheerpJ extension docs (Debug & File handling) (#375)

Co-authored-by: Ana Gabriela Reyna <gabrielareynaflores@gmail.com>

Author: rijulshrestha

sites/labs/public/assets/applet-screenshots/debug-toggle.png

@@ -0,0 +1,66 @@
+---
+title: How to debug the extension
+description: How to enable debug mode and collect logs for troubleshooting
+---
+
+If you encounter issues while running an applet with CheerpJ Applet Runner, enabling **Debug Mode** can provide detailed logs that help our support team identify the problem.
+
+## Verifying the Extension is Working
+
+Before enabling debug mode, let's verify if the extension is active and processing the page:
+
+- **Is the extension pinned?** Ensure the CheerpJ Applet Runner is pinned to your browser's toolbar so you can easily access it.
+- **Is the extension enabled?** Check your browser's extensions page (`chrome://extensions` or `edge://extensions`) to confirm it is toggled on.
+- **Is it turned on for the current website?** Click the extension icon in your toolbar and make sure the main toggle for the domain is set to **On**.
+- **Is there an Applet and does it start?** Make sure the webpage actually contains a Java Applet and that it attempts to load.
+- **Are there any Network errors?** Open the browser's developer tools and check the Network tab for failing requests.
+
+If everything above is functioning correctly but you are still experiencing issues, please reach out to us on our [Discord server](https://discord.leaningtech.com/) or by opening an issue on our [GitHub repository](https://github.com/leaningtech/cheerpj-applet-runner/issues) so we can assist you. To help us troubleshoot, please enable debug mode as described below and provide the resulting logs.
+
+## Enabling Debug Mode
+
+To enable the debug build of CheerpJ:
+
+1. Click the **CheerpJ Applet Runner icon** in your browser's toolbar.
+2. In the popup page, toggle the **"Enable debugging mode"** switch to **On**.
+
+   <div class="mx-24">
+   	![Extension popup showing the debugging mode toggle in the ON
+   	position](/assets/applet-screenshots/debug-toggle.png)
+   </div>
+
+3. The extension will now use the debug version of the runtime, which includes extensive logging.
+
+> [!important] Reload Required
+> You must enable the debugging mode **before** loading your application, or **reload the page** after enabling it. Otherwise, the setting will not take effect.
+
+## Collecting Debug Information
+
+To help us troubleshoot, we typically need two files: the **Console log** and a **Network HAR file**.
+
+### Step 1: Open Browser DevTools
+
+To ensure we receive complete logs, **you must either reload the page after opening the developer tools, or enable the extension only after the developer tools are open**.
+
+1. Press `F12` (Windows/Linux) or `Cmd + Opt + I` (Mac) to open the DevTools.
+2. Alternatively, right-click anywhere on the page and select **Inspect**.
+
+### Step 2: Save the Browser Console Output
+
+1. With the developer tools open, navigate to the **Console** tab. (If you don’t see it, click the `+` symbol in Edge or `>>` in Chrome, then select Console).
+2. If needed, trigger the error in your application.
+3. Right-click on any message in the console tab and select **Save as…**
+4. Save the console log to a file.
+
+### Step 3: Extract a HAR File
+
+A HAR (HTTP Archive) file logs your browser's network interactions and helps us diagnose loading or server responses.
+
+1. In the developer tools, navigate to the **Network** tab.
+2. **Reload your page** (or navigate to the applet) to ensure the network log captures requests from the very beginning.
+3. Trigger the error in your application if needed.
+4. Click the download icon (`↓`) at the top right of the Network tab to export and save the HAR file.
+
+---
+
+Once you have collected these files, please attach them to your support request or bug report on our [Discord server](https://discord.leaningtech.com/) or [GitHub repository](https://github.com/leaningtech/cheerpj-applet-runner/issues).

sites/labs/public/assets/applet-screenshots/popup-upload.png

@@ -0,0 +1,53 @@
+---
+title: Upload and download files
+description: How to interact with the local filesystem using the Applet Runner extension
+---
+
+For a deeper dive into how file systems work in CheerpJ, check out the [File System explanation guide](https://cheerpj.com/docs/explanation/File-System-support).
+
+The CheerpJ Applet Runner extension provides a virtual filesystem that allows Java applets to read and write files within the browser's sandbox. Since browsers cannot access your local disk directly for security reasons, CheerpJ provides two main ways to move files into and out of this virtual space.
+
+## Uploading files
+
+To import a file from your local machine to the virtual filesystem, you can use either the built-in file picker or the extension popup. In both cases, the files will be placed in the **`/files/uploads/`** virtual directory. Inside the Java applet, you can navigate to `/files/uploads/` to open or use these files.
+
+**Using the built-in file picker:**
+
+The upload icon (an upward arrow) is present as part of the title bar on any Java window, frame, or File Dialog that opens.
+
+> [!note] Undecorated Applet frames
+> The main Applet frame is normally undecorated, meaning it will not have a title bar. If the applet does not open any additional windows or file dialogs that have a title bar, you will need to use the **extension popup** to upload files.
+
+<div class="mx-24">
+	![A Java File Dialog window highlighting the upward-arrow upload icon
+	integrated into its title bar](/assets/applet-screenshots/titlebar-upload.png)
+</div>
+
+1. Click the **upload icon** in the title bar.
+2. Select a file from your local file system (your machine).
+3. In the File Dialog, navigate to `/files/uploads/` and select the file to load it into the applet.
+
+**Using the extension popup:**
+
+Alternatively, you can upload files directly from the extension popup.
+
+> [!note] Pin the extension
+> If you cannot see the extension popup icon, you may need to pin the extension to your browser's toolbar.
+
+1. Ensure the Java applet is currently running.
+2. Click the **CheerpJ icon** in your browser's toolbar and click the **Upload** button.
+
+   <div class="mx-24">
+   	![Extension popup showing the Upload button enabled while an Applet is
+   	running](/assets/applet-screenshots/popup-upload.png)
+   </div>
+
+3. Select the file(s) from your local filesystem.
+
+## Downloading files
+
+To export data from the Java applet back to your local machine, simply ensure files within the applet are saved to the **`/files/downloads/`** virtual directory. Any file saved to this directory will be automatically detected and downloaded by your browser to your local machine (usually to your default Downloads folder).
+
+**Using a standard save dialog:**
+
+If you use a "Save" File Dialog and choose a path under **`/files/downloads/`**, the browser will automatically trigger a download once the save operation is complete.