deepak1556/frame.html

## frame.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <h1>OOP frame</h1>
  </body>
  <script>
    const corsUrl = "https://gist.githubusercontent.com/deepak1556/36c31867ad3a11c3b03a56ca8bd3f536/raw/24a02e75403d0e4fc2fb01959d5698eecc869f3d/worker.js";
    // This will fail due to same origin policy
    // https://html.spec.whatwg.org/multipage/workers.html#dom-worker-dev
    //const myWorker =  new Worker(corsUrl);
    // Alternative is to fetch with CORS in the main scope and
    // create a blob url for the worker resource to obey the above
    // policy.
    fetch(corsUrl, {
      method: 'GET',
      mode: 'cors'
    }).then(async (response) => {
      const blob = await response.blob();
      const blobURL = URL.createObjectURL(blob);
      var myWorker = new Worker(blobURL);
      URL.revokeObjectURL(blobURL);

      myWorker.onerror = (ev) => {
        console.log(`Worker failed : ${ev}`);
      }

      myWorker.onmessage = function(oEvent) {
        console.log('Worker said : ' + oEvent.data);
      };

      myWorker.postMessage('Hello');
    })
  </script>
</html>

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>💖 Hello World!</h1>
    <p>Welcome to your Electron application.</p>
    <iframe src="vscode-webview://d2Vidmlldy0x/frame.html"></iframe>
  </body>
</html>

## main.js
// Modules to control application life and create native browser window
const {app, BrowserWindow, protocol} = require('electron')
const path = require('path')

protocol.registerSchemesAsPrivileged([
  {
    scheme: 'vscode-file',
    privileges: {
      secure: true,
      standard: true,
      supportFetchAPI: true
    }
  },
  {
    scheme: 'vscode-webview',
    privileges: {
      secure: true,
      standard: true,
      supportFetchAPI: true
    }
  }
])

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      sandbox: true
    }
  })

  protocol.registerFileProtocol('vscode-file', (req, callback) => {
    const url = new URL(req.url)
    callback({ path: `${__dirname}${url.pathname}` })
  })

  protocol.registerFileProtocol('vscode-webview', (req, callback) => {
    const url = new URL(req.url)
    callback({ path: `${__dirname}${url.pathname}` })
  })

  // and load the index.html of the app.
  mainWindow.loadURL('vscode-file://vscode-app/index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

## test.js
postMessage('Message from imported script')

## worker.js
postMessage(`Worker started on origin : ${self.location.origin}`)

onmessage = function(oEvent) {
  if (oEvent.data.url) {
    let url = oEvent.data.url;
    const index = url.indexOf('worker.js');
    if (index != -1) {
      url = url.substring(0, index);
    }
    postMessage('Custom Origin : ' + url)
    importScripts(url + 'test.js')
  } else {
    postMessage('Hi ' + oEvent.data);
  }
};
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	</head>
	<body>
	<h1>OOP frame</h1>
	</body>
	<script>
	const corsUrl = "https://gist.githubusercontent.com/deepak1556/36c31867ad3a11c3b03a56ca8bd3f536/raw/24a02e75403d0e4fc2fb01959d5698eecc869f3d/worker.js";
	// This will fail due to same origin policy
	// https://html.spec.whatwg.org/multipage/workers.html#dom-worker-dev
	//const myWorker = new Worker(corsUrl);
	// Alternative is to fetch with CORS in the main scope and
	// create a blob url for the worker resource to obey the above
	// policy.
	fetch(corsUrl, {
	method: 'GET',
	mode: 'cors'
	}).then(async (response) => {
	const blob = await response.blob();
	const blobURL = URL.createObjectURL(blob);
	var myWorker = new Worker(blobURL);
	URL.revokeObjectURL(blobURL);

	myWorker.onerror = (ev) => {
	console.log(`Worker failed : ${ev}`);
	}

	myWorker.onmessage = function(oEvent) {
	console.log('Worker said : ' + oEvent.data);
	};

	myWorker.postMessage('Hello');
	})
	</script>
	</html>
	// Modules to control application life and create native browser window
	const {app, BrowserWindow, protocol} = require('electron')
	const path = require('path')

	protocol.registerSchemesAsPrivileged([
	{
	scheme: 'vscode-file',
	privileges: {
	secure: true,
	standard: true,
	supportFetchAPI: true
	}
	},
	{
	scheme: 'vscode-webview',
	privileges: {
	secure: true,
	standard: true,
	supportFetchAPI: true
	}
	}
	])

	function createWindow () {
	// Create the browser window.
	const mainWindow = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	sandbox: true
	}
	})

	protocol.registerFileProtocol('vscode-file', (req, callback) => {
	const url = new URL(req.url)
	callback({ path: `${__dirname}${url.pathname}` })
	})

	protocol.registerFileProtocol('vscode-webview', (req, callback) => {
	const url = new URL(req.url)
	callback({ path: `${__dirname}${url.pathname}` })
	})

	// and load the index.html of the app.
	mainWindow.loadURL('vscode-file://vscode-app/index.html')

	// Open the DevTools.
	// mainWindow.webContents.openDevTools()
	}

	// This method will be called when Electron has finished
	// initialization and is ready to create browser windows.
	// Some APIs can only be used after this event occurs.
	app.whenReady().then(() => {
	createWindow()

	app.on('activate', function () {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})

	// Quit when all windows are closed, except on macOS. There, it's common
	// for applications and their menu bar to stay active until the user quits
	// explicitly with Cmd + Q.
	app.on('window-all-closed', function () {
	if (process.platform !== 'darwin') app.quit()
	})

	// In this file you can include the rest of your app's specific main process
	// code. You can also put them in separate files and require them here.
	postMessage(`Worker started on origin : ${self.location.origin}`)

	onmessage = function(oEvent) {
	if (oEvent.data.url) {
	let url = oEvent.data.url;
	const index = url.indexOf('worker.js');
	if (index != -1) {
	url = url.substring(0, index);
	}
	postMessage('Custom Origin : ' + url)
	importScripts(url + 'test.js')
	} else {
	postMessage('Hi ' + oEvent.data);
	}
	};