get JS working again

gulpfile.js

@@ -62,6 +62,7 @@ gulp.task('copyFiles', function () {
 		gulp
 			.src([
 				'src/preview.html',
+				'src/indexpm.html',
 				'src/detached-window.js',
 				'src/icon-48.png',
 				'src/icon-128.png',

src/components/ContentWrap.jsx

@@ -29,7 +29,7 @@ export default class ContentWrap extends Component {
 				window.localStorage.getItem(LocalStorageKeys.WAS_CONSOLE_OPEN) ===
 				'true',
 			isCssSettingsModalOpen: false,
-			isPreviewNotWorkingModalVisible: false,
+
 			logs: []
 		};
 
@@ -54,15 +54,11 @@ export default class ContentWrap extends Component {
 			this.clearConsoleBtnClickHandler.bind(this);
 		this.toggleConsole = this.toggleConsole.bind(this);
 		this.evalConsoleExpr = this.evalConsoleExpr.bind(this);
-		this.dismissPreviewNotWorkingModal =
-			this.dismissPreviewNotWorkingModal.bind(this);
 	}
 	shouldComponentUpdate(nextProps, nextState) {
 		return (
 			this.state.isConsoleOpen !== nextState.isConsoleOpen ||
 			this.state.isCssSettingsModalOpen !== nextState.isCssSettingsModalOpen ||
-			this.state.isPreviewNotWorkingModalVisible !==
-				nextState.isPreviewNotWorkingModalVisible ||
 			this.state.logs !== nextState.logs ||
 			this.state.codeSplitSizes !== nextState.codeSplitSizes ||
 			this.state.mainSplitSizes !== nextState.mainSplitSizes ||
@@ -136,10 +132,10 @@ export default class ContentWrap extends Component {
 	createPreviewFile(html, css, js) {
 		const versionMatch = navigator.userAgent.match(/Chrome\/(\d+)/);
 
-		const shouldInlineJs =
+		const shouldInlineJs = true;
-			!window.webkitRequestFileSystem ||
+		// !window.webkitRequestFileSystem ||
-			!window.IS_EXTENSION ||
+		// !window.IS_EXTENSION ||
-			(versionMatch && +versionMatch[1] >= 104);
+		// (versionMatch && +versionMatch[1] >= 104);
 		var contents = getCompleteHtml(
 			html,
 			css,
@@ -156,14 +152,17 @@ export default class ContentWrap extends Component {
 		}
 
 		if (shouldInlineJs) {
+			const writeInsideIframe = () => {
 				if (this.detachedWindow) {
 					log('✉️ Sending message to detached window');
 					this.detachedWindow.postMessage({ contents }, '*');
+				} else if (window.IS_EXTENSION) {
+					this.frame.contentWindow.postMessage({ contents }, '*');
 				} else {
-				const writeInsideIframe = () => {
 					this.frame.contentDocument.open();
 					this.frame.contentDocument.write(contents);
 					this.frame.contentDocument.close();
+				}
 			};
 			Promise.race([
 				// Just in case onload promise doesn't resolves
@@ -175,9 +174,9 @@ export default class ContentWrap extends Component {
 				})
 			]).then(writeInsideIframe);
 			// Setting to blank string cause frame to reload
-				this.frame.src = '';
+			this.frame.src = this.frame.src;
-			}
 		} else {
+			// DEPRECATED
 			// we need to store user script in external JS file to prevent inline-script
 			// CSP from affecting it.
 			writeFile('script.js', blobjs, () => {
@@ -232,14 +231,13 @@ export default class ContentWrap extends Component {
 			js: this.cmCodes.js
 		};
 		log('🔎 setPreviewContent', isForced);
-		const targetFrame = this.detachedWindow
+		const targetFrame = this.detachedWindow ? this.detachedWindow : this.frame;
-			? this.detachedWindow.document.querySelector('iframe')
-			: this.frame;
 
 		const cssMode = this.props.currentItem.cssMode;
 		// If just CSS was changed (and everything shudn't be empty),
 		// change the styles inside the iframe.
 		if (
+			false &&
 			!isForced &&
 			currentCode.html === this.codeInPreview.html &&
 			currentCode.js === this.codeInPreview.js
@@ -289,19 +287,6 @@ export default class ContentWrap extends Component {
 						this.showErrors(resultItem.errors.lang, resultItem.errors.data);
 					}
 				});
-
-				const versionMatch = navigator.userAgent.match(/Chrome\/(\d+)/);
-				if (
-					result[2].code &&
-					versionMatch &&
-					+versionMatch[1] >= 104 &&
-					window.IS_EXTENSION &&
-					!window.sessionStorage.getItem('previewErrorMessageDismissed')
-				) {
-					this.setState({
-						isPreviewNotWorkingModalVisible: true
-					});
-				}
 			});
 		}
 
@@ -632,13 +617,6 @@ export default class ContentWrap extends Component {
 		this.props.onPrettifyBtnClick(codeType);
 	}
 
-	dismissPreviewNotWorkingModal() {
-		this.setState({
-			isPreviewNotWorkingModalVisible: false
-		});
-		window.sessionStorage.setItem('previewErrorMessageDismissed', true);
-	}
-
 	render() {
 		// log('contentwrap update');
 
@@ -905,6 +883,7 @@ export default class ContentWrap extends Component {
 						frameborder="0"
 						id="demo-frame"
 						allowfullscreen
+						src="./indexpm.html"
 					/>
 
 					<PreviewDimension ref={comp => (this.previewDimension = comp)} />
@@ -927,34 +906,6 @@ export default class ContentWrap extends Component {
 						settings={this.props.currentItem.cssSettings}
 						editorTheme={this.props.prefs.editorTheme}
 					/>
-
-					<Modal
-						show={this.state.isPreviewNotWorkingModalVisible}
-						closeHandler={this.dismissPreviewNotWorkingModal}
-					>
-						<h1>🔴 JavaScript preview not working!</h1>
-						<p>
-							Latest version of Chrome has changed a few things because of which
-							JavaScript preview has stopped working.
-						</p>
-
-						<p>
-							If you want to work with just HTML & CSS, you can still continue
-							here. Otherwise, it is recommended to switch to the Web Maker web
-							app which is much more powerful and works offline too -{' '}
-							<a href="https://webmaker.app/app" target="_blank">
-								Go to web app
-							</a>
-						</p>
-						<div class="flex flex-h-end">
-							<button
-								class="btn btn--primary"
-								onClick={this.dismissPreviewNotWorkingModal}
-							>
-								Dismiss
-							</button>
-						</div>
-					</Modal>
 				</div>
 			</SplitPane>
 		);

src/detached-window.js

@@ -4,9 +4,7 @@ window.addEventListener('message', e => {
 		const frame = document.querySelector('iframe');
 		frame.src = frame.src;
 		setTimeout(() => {
-			frame.contentDocument.open();
+			frame.contentWindow.postMessage(e.data, '*');
-			frame.contentDocument.write(e.data.contents);
-			frame.contentDocument.close();
 		}, 10);
 	}
 	if (e.data && e.data.url && e.data.url.match(/index\.html/)) {

src/indexpm.html

@@ -0,0 +1,12 @@
+<script>
+	function callback(e) {
+		console.log('post message recvd', e.data);
+		window.document.open();
+
+		const { contents } = e.data;
+		window.document.write(e.data.contents);
+		window.document.close();
+		window.addEventListener('message', callback);
+	}
+	window.addEventListener('message', callback);
+</script>

src/lib/screenlog.js

@@ -1,4 +1,4 @@
-let mainWindow = window.parent;
+let mainWindow = window.parent === window ? window.opener : window.parent;
 
 function sanitizeDomNode(node) {
 	const fakeNode = {

src/manifest.json

@@ -8,7 +8,8 @@
 	"optional_permissions": ["downloads"],
 	"host_permissions": ["<all_urls>"],
 	"content_security_policy": {
-		"extension_pages": "script-src 'self'; object-src 'self'"
+		"extension_pages": "script-src 'self'; object-src 'self'",
+		"sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' filesystem: http://localhost:* https://localhost:* https://apis.google.com https://ajax.googleapis.com https://code.jquery.com https://cdnjs.cloudflare.com https://unpkg.com https://maxcdn.com https://cdn77.com https://maxcdn.bootstrapcdn.com https://cdn.jsdelivr.net/ https://*.stripe.com/ https://builds.framerjs.com/ https://rawgit.com https://wzrd.in https://www.gstatic.com https://semantic-ui.com https://www.google-analytics.com https://cdn.tailwindcss.com 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
 	},
 	"options_ui": {
 		"page": "options.html",
@@ -18,6 +19,9 @@
 		"default_title": "Start Web Maker",
 		"default_icon": "icon-16.png"
 	},
+	"sandbox": {
+		"pages": ["indexpm.html"]
+	},
 	"background": {
 		"service_worker": "eventPage.js",
 		"type": "module"

src/preview.html

@@ -12,7 +12,7 @@
 
 <body>
 	<iframe
-		src="about://blank"
+		src="indexpm.html"
 		frameborder="0"
 		id="demo-frame"
 		allowfullscreen