use onlook:// protocol to inject preload script in website (TODO: serve in onlook:// urls in vite)

Author: theshadowagent

apps/studio/electron/main/index.ts

@@ -1,5 +1,5 @@
 import { APP_NAME, APP_SCHEMA } from '@onlook/models/constants';
-import { BrowserWindow, app, shell } from 'electron';
+import { BrowserWindow, app, shell, protocol } from 'electron';
 import fixPath from 'fix-path';
 import { createRequire } from 'node:module';
 import os from 'node:os';
@@ -11,6 +11,7 @@ import { listenForIpcMessages, removeIpcListeners } from './events';
 import run from './run';
 import terminal from './run/terminal';
 import { updater } from './update';
+import fs from 'node:fs';
 
 // Help main inherit $PATH defined in dotfiles (.bashrc/.bash_profile/.zshrc/etc).
 fixPath();
@@ -142,6 +143,10 @@ const listenForExitEvents = () => {
 
 const setupAppEventListeners = () => {
     app.whenReady().then(() => {
+        protocol.handle('onlook', (request) => {
+            const filePath = path.join(__dirname, '../preload/webview.js');
+            return new Response(fs.readFileSync(filePath));
+        });
         listenForExitEvents();
         initMainWindow();
     });
@@ -190,6 +195,20 @@ const main = () => {
     setupEnvironment();
     configurePlatformSpecifics();
 
+    // Register onlook protocol handler for browser-compatible preload script urls
+    protocol.registerSchemesAsPrivileged([
+        {
+            scheme: 'onlook',
+            privileges: {
+                standard: true,
+                secure: true,
+                allowServiceWorkers: true,
+                supportFetchAPI: true,
+                stream: true,
+            },
+        },
+    ]);
+
     if (!app.requestSingleInstanceLock()) {
         app.quit();
         process.exit(0);

apps/studio/src/lib/editor/engine/frameview.tsx

@@ -39,21 +39,23 @@ export const FrameView = forwardRef<IFrameView, IFrameViewProps>(({ preload, ...
     const handleIframeLoad = useCallback(() => {
         const iframe = iframeRef.current;
         if (!iframe || !preload) {
+            console.error('No iframe or preload');
             return;
         }
 
         const injectPreloadScript = () => {
             try {
                 const doc = iframe.contentDocument;
                 if (!doc) {
+                    console.error('No document found');
                     return;
                 }
 
                 const script = doc.createElement('script');
                 script.src = preload;
                 doc.head.appendChild(script);
             } catch (error) {
-                console.error('Failed to inject preload script:', error);
+                console.error('Preload injection failed:', error);
             }
         };
 

apps/studio/src/routes/editor/WebviewArea/Frame.tsx

@@ -342,7 +342,7 @@ const Frame = observer(
                             selected ? getSelectedOutlineColor() : 'outline-transparent',
                         )}
                         src={settings.url}
-                        preload={`file://${window.env.WEBVIEW_PRELOAD_PATH}`}
+                        preload="onlook://webview-preload.js"
                         sandbox="allow-popups allow-scripts allow-same-origin"
                         style={{
                             width: clampedDimensions.width,