From 6553a424def76947af22928d010b3c9bcd7caaad Mon Sep 17 00:00:00 2001 From: Kushagra Gour Date: Wed, 10 Apr 2024 13:58:08 +0530 Subject: [PATCH] get JS working again --- gulpfile.js | 1 + src/components/ContentWrap.jsx | 107 +++++++++------------------------ src/detached-window.js | 4 +- src/indexpm.html | 12 ++++ src/lib/screenlog.js | 2 +- src/manifest.json | 6 +- src/preview.html | 2 +- 7 files changed, 50 insertions(+), 84 deletions(-) create mode 100644 src/indexpm.html diff --git a/gulpfile.js b/gulpfile.js index 755ad48..cf85192 100644 --- a/gulpfile.js +++ b/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', diff --git a/src/components/ContentWrap.jsx b/src/components/ContentWrap.jsx index 2ec2452..2d173b8 100644 --- a/src/components/ContentWrap.jsx +++ b/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 = - !window.webkitRequestFileSystem || - !window.IS_EXTENSION || - (versionMatch && +versionMatch[1] >= 104); + const shouldInlineJs = true; + // !window.webkitRequestFileSystem || + // !window.IS_EXTENSION || + // (versionMatch && +versionMatch[1] >= 104); var contents = getCompleteHtml( html, css, @@ -156,28 +152,31 @@ export default class ContentWrap extends Component { } if (shouldInlineJs) { - if (this.detachedWindow) { - log('✉️ Sending message to detached window'); - this.detachedWindow.postMessage({ contents }, '*'); - } else { - const writeInsideIframe = () => { + 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 { this.frame.contentDocument.open(); this.frame.contentDocument.write(contents); this.frame.contentDocument.close(); - }; - Promise.race([ - // Just in case onload promise doesn't resolves - new Promise(resolve => { - setTimeout(resolve, 200); - }), - new Promise(resolve => { - this.frame.onload = resolve; - }) - ]).then(writeInsideIframe); - // Setting to blank string cause frame to reload - this.frame.src = ''; - } + } + }; + Promise.race([ + // Just in case onload promise doesn't resolves + new Promise(resolve => { + setTimeout(resolve, 200); + }), + new Promise(resolve => { + this.frame.onload = resolve; + }) + ]).then(writeInsideIframe); + // Setting to blank string cause frame to reload + 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 - ? this.detachedWindow.document.querySelector('iframe') - : this.frame; + const targetFrame = this.detachedWindow ? this.detachedWindow : 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" /> (this.previewDimension = comp)} /> @@ -927,34 +906,6 @@ export default class ContentWrap extends Component { settings={this.props.currentItem.cssSettings} editorTheme={this.props.prefs.editorTheme} /> - - -

🔴 JavaScript preview not working!

-

- Latest version of Chrome has changed a few things because of which - JavaScript preview has stopped working. -

- -

- 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 -{' '} - - Go to web app - -

-
- -
- ); diff --git a/src/detached-window.js b/src/detached-window.js index c2d21f5..577f13d 100644 --- a/src/detached-window.js +++ b/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.contentDocument.write(e.data.contents); - frame.contentDocument.close(); + frame.contentWindow.postMessage(e.data, '*'); }, 10); } if (e.data && e.data.url && e.data.url.match(/index\.html/)) { diff --git a/src/indexpm.html b/src/indexpm.html new file mode 100644 index 0000000..ab70c92 --- /dev/null +++ b/src/indexpm.html @@ -0,0 +1,12 @@ + diff --git a/src/lib/screenlog.js b/src/lib/screenlog.js index 52981cd..6ea7ff6 100644 --- a/src/lib/screenlog.js +++ b/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 = { diff --git a/src/manifest.json b/src/manifest.json index 771f426..2422568 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -8,7 +8,8 @@ "optional_permissions": ["downloads"], "host_permissions": [""], "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" diff --git a/src/preview.html b/src/preview.html index 7e1cb27..f46c2db 100644 --- a/src/preview.html +++ b/src/preview.html @@ -12,7 +12,7 @@