mv3 code changes

src/components/ContentWrapFiles.jsx

@@ -54,12 +54,10 @@ export default class ContentWrapFiles extends Component {
 		// `clearConsole` is on window because it gets called from inside iframe also.
 		window.clearConsole = this.clearConsole.bind(this);
 
-		this.consoleHeaderDblClickHandler = this.consoleHeaderDblClickHandler.bind(
-			this
-		);
-		this.clearConsoleBtnClickHandler = this.clearConsoleBtnClickHandler.bind(
-			this
-		);
+		this.consoleHeaderDblClickHandler =
+			this.consoleHeaderDblClickHandler.bind(this);
+		this.clearConsoleBtnClickHandler =
+			this.clearConsoleBtnClickHandler.bind(this);
 		this.toggleConsole = this.toggleConsole.bind(this);
 		this.evalConsoleExpr = this.evalConsoleExpr.bind(this);
 	}
@@ -259,7 +257,7 @@ export default class ContentWrapFiles extends Component {
 				obj[file.path] =
 					'<script src="' +
 					(chrome.extension
-						? chrome.extension.getURL('lib/screenlog.js')
+						? chrome.runtime.getURL('lib/screenlog.js')
 						: `${location.origin}${
 								window.DEBUG ? '' : BASE_PATH
 						  }/lib/screenlog.js`) +
@@ -360,12 +358,13 @@ export default class ContentWrapFiles extends Component {
 			window.editorThemeLinkTag.href = `lib/codemirror/theme/${prefs.editorTheme}.css`;
 		}
 
-		window.fontStyleTag.textContent = window.fontStyleTemplate.textContent.replace(
-			/fontname/g,
-			(prefs.editorFont === 'other'
-				? prefs.editorCustomFont
-				: prefs.editorFont) || 'FiraCode'
-		);
+		window.fontStyleTag.textContent =
+			window.fontStyleTemplate.textContent.replace(
+				/fontname/g,
+				(prefs.editorFont === 'other'
+					? prefs.editorCustomFont
+					: prefs.editorFont) || 'FiraCode'
+			);
 	}
 
 	// Check all the code wrap if they are minimized or maximized
@@ -376,7 +375,7 @@ export default class ContentWrapFiles extends Component {
 			const { currentLayoutMode } = this.props;
 			const prop =
 				currentLayoutMode === 2 || currentLayoutMode === 5 ? 'width' : 'height';
-			[htmlCodeEl].forEach(function(el) {
+			[htmlCodeEl].forEach(function (el) {
 				const bounds = el.getBoundingClientRect();
 				const size = bounds[prop];
 				if (size < 100) {

src/eventPage.js

@@ -1,16 +1,16 @@
 function openApp() {
 	chrome.tabs.create({
-		url: chrome.extension.getURL('index.html'),
+		url: chrome.runtime.getURL('index.html'),
 		selected: true
 	});
 }
 
-chrome.browserAction.onClicked.addListener(function() {
+chrome.action.onClicked.addListener(function () {
 	openApp();
 });
 
 // Listen for tabs getting created.
-chrome.tabs.onCreated.addListener(function(tab) {
+chrome.tabs.onCreated.addListener(function (tab) {
 	// If a new tab is opened (without any URL), check user's
 	// replace Tab setting and act accordingly. Default is false.
 	if (tab.url === 'chrome://newtab/') {
@@ -18,12 +18,12 @@ chrome.tabs.onCreated.addListener(function(tab) {
 			{
 				replaceNewTab: false
 			},
-			function(items) {
+			function (items) {
 				if (items.replaceNewTab) {
 					chrome.tabs.update(
 						tab.id,
 						{
-							url: chrome.extension.getURL('index.html')
+							url: chrome.runtime.getURL('index.html')
 						},
 						function callback() {
 							console.log('ho gaya');

src/manifest.json

@@ -1,23 +1,26 @@
 {
 	"name": "Web Maker",
 	"version": "5.2.0",
-	"manifest_version": 2,
+	"manifest_version": 3,
 	"description": "Blazing fast & offline playground for your web experiments",
 	"homepage_url": "https://webmaker.app",
-	"permissions": ["storage", "tabs", "<all_urls>"],
+	"permissions": ["storage", "tabs"],
 	"optional_permissions": ["downloads"],
-	"content_security_policy": "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-eval'; object-src 'self'",
+	"host_permissions": ["<all_urls>"],
+	"content_security_policy": {
+		"extension_pages": "script-src 'self'; object-src 'self'"
+	},
 	"options_ui": {
 		"page": "options.html",
-		"chrome_style": true
+		"open_in_tab": false
 	},
-	"browser_action": {
+	"action": {
 		"default_title": "Start Web Maker",
 		"default_icon": "icon-16.png"
 	},
 	"background": {
-		"scripts": ["eventPage.js"],
-		"persistent": false
+		"service_worker": "eventPage.js",
+		"type": "module"
 	},
 	"icons": {
 		"16": "icon-16.png",

src/utils.js

@@ -377,7 +377,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
 		contents +=
 			'<script src="' +
 			(chrome.extension
-				? chrome.extension.getURL('lib/screenlog.js')
+				? chrome.runtime.getURL('lib/screenlog.js')
 				: `${location.origin}${
 						window.DEBUG ? '' : BASE_PATH
 				  }/lib/screenlog.js`) +
@@ -388,7 +388,7 @@ export function getCompleteHtml(html, css, js, item, isForExport) {
 		contents +=
 			'<script src="' +
 			(chrome.extension
-				? chrome.extension.getURL('lib/transpilers/babel-polyfill.min.js')
+				? chrome.runtime.getURL('lib/transpilers/babel-polyfill.min.js')
 				: `${location.origin}${BASE_PATH}/lib/transpilers/babel-polyfill.min.js`) +
 			'"></script>';
 	}
@@ -495,7 +495,7 @@ export function prettify({ file, content, type }) {
 	}
 	const worker = new Worker(
 		chrome.extension
-			? chrome.extension.getURL('lib/prettier-worker.js')
+			? chrome.runtime.getURL('lib/prettier-worker.js')
 			: `${BASE_PATH !== '/' ? BASE_PATH : ''}/lib/prettier-worker.js`
 	);
 	worker.postMessage({ content, type });