Does the plugin support sandboxes?

[blake-mealey]

I've been trying to use a sandbox page and so far have had no luck. I'm using the vite beta.

Here's my config:

manifest.json

{
  ...,
  "action": { "default_popup": "index.html" },
  "content_security_policy": {
    "sandbox": "sandbox allow-scripts; script-src 'self'"
  },
  "sandbox": {
    "pages": ["src/sandbox.html"]
  }
}

vite.config.ts

import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from 'rollup-plugin-chrome-extension';
import manifest from './manifest.json';

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'index.html'),
        sandbox: resolve(__dirname, 'src/sandbox.html'),
      },
    },
  },
  plugins: [react(), crx({ manifest })],
});

The dist dir does not contain any outputs for the sandbox.html.

[jacksteamdev]

The dist dir does not contain any outputs for the sandbox.html.

@blake-mealey Your Vite config looks right to me. Is this during vite dev or vite build? Both?

[jacksteamdev]

I just pushed v4.0.1-23 to NPM, which adds support for sandboxes in vite build.

While sandbox pages work in production, they don't work in development 😞 This is a Chrome stability issue; sandbox pages don't appear very stable. I got "Aw, snap! SIGTRAP" errors several times during testing.

[blake-mealey]

I believe I only tried dev the other day. Thanks for that change, I will check it out when I get a chance :)

[saxoncameron]

@jacksteamdev I've come across this same issue with sandboxes. Is it still the case over a year later that it's not possible to get sandboxes working in development mode? It's necessary for our team to sandbox our usage of ffmpeg, but now dev mode is broken.

Pending some other local hacky solution (like excluding the sandbox stuff when in dev mode), it would be a real pain to give up HMR and all the nice-ness of dev mode and be forced to build everytime we want to check changes.

Any suggestions? Or any way sandboxes could be supported in dev mode?

[x0k]

You can connect sandbox depending on the mode.

if (import.meta.env.DEV) {
  // stubs
  ...
} else {
  const iFrame = document.getElementById("sandbox") as HTMLIFrameElement;
  iFrame.src = chrome.runtime.getURL("sandbox.html");
  ...
}

[benjaminbojko]

I've found somewhat of a workaround for this in development:

• DON'T load the sandbox page via chrome.runtime.getURL('sandbox.html') in dev
• Load it via the local Vite dev server: http://localhost:5173/sandbox.html

Ultimately, my code looks something like:

const sandboxPath = 'sandbox.html';
iframe.src = (import.meta.env.DEV) ? `http://localhost:5173/${sandboxPath}` : chrome.runtime.getURL(sandboxPath);

Not sure how exactly that maps to Chrome's handling of iframe and script sources and the sandbox Content Security Policy, but perhaps localhost is somehow whitelisted for unpacked extensions?