Manifest migration (#146)

* preparing for migration to manifest v3

* update manifest file

* Change $.Deferred() to native Promise

* Add fetchAdapter to axios(hotfix)

* refactor jquery.whencallsequentially.js to native Promise(local scraper fix)

* little fixes and improvements

* interceptors fix

* refactor all calls of removeCurrentContentSelector() to native Promise

* removing axios fetchAdapter where its not needed

* update version

* update yarn.lock

* update yarn.lock2

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "web-scraper-chrome-extension",
-	"version": "0.4.14",
+	"version": "0.5",
 	"description": "Web data extraction tool implemented as chrome extension",
 	"scripts": {
 		"lint": "eslint --ext .js src",
@@ -18,8 +18,9 @@
 		}
 	},
 	"dependencies": {
+		"@vespaiach/axios-fetch-adapter": "^0.3.1",
 		"@babel/runtime": "^7.10.5",
-		"axios": "^0.21.1",
+		"axios": "^0.26.1",
 		"bootstrap": "3.4.1",
 		"d3": "^3.3.8",
 		"icanhaz": "0.10.3",
@@ -34,7 +35,7 @@
 		"spark-md5": "^3.0.1",
 		"sugar": "^1.5.0",
 		"url-join": "^5.0.0",
-		"webextension-polyfill": "^0.7.0"
+		"webextension-polyfill": "^0.12.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.10.5",

src/background/background.js

@@ -190,7 +190,7 @@ browser.runtime.onMessage.addListener(async request => {
 			const backgroundScript = getBackgroundScript('BackgroundScript');
 			// TODO change to promises
 			const deferredResponse = backgroundScript[request.fn](request.request);
-			deferredResponse.done(resolve).catch(reject);
+			deferredResponse.then(resolve).catch(reject);
 		});
 	}
 });

src/content_script/content_script.js

@@ -39,7 +39,7 @@ browser.runtime.onMessage.addListener(request => {
 			console.log('received ContentScript request', request);
 
 			const deferredResponse = contentScript[request.fn](request.request);
-			deferredResponse.done(function (response) {
+			deferredResponse.then(function (response) {
 				resolve(response, null);
 			});
 

src/libs/jquery.whencallsequentially.js

@@ -1,47 +1,14 @@
-/**
- * @author Martins Balodis
- *
- * An alternative version of $.when which can be used to execute asynchronous
- * calls sequentially one after another.
- *
- * @returns $.Deferred().promise()
- */
 $.whenCallSequentially = function (functionCalls) {
-	const deferredResonse = $.Deferred();
-	const resultData = new Array();
+	let promiseChain = Promise.resolve([]);
 
-	// nothing to do
-	if (functionCalls.length === 0) {
-		return deferredResonse.resolve(resultData).promise();
-	}
-
-	let currentDeferred = functionCalls.shift()();
-	// execute synchronous calls synchronously
-	while (currentDeferred.state() === 'resolved') {
-		currentDeferred.done(function (data) {
-			resultData.push(data);
-		});
-		if (functionCalls.length === 0) {
-			return deferredResonse.resolve(resultData).promise();
-		}
-		currentDeferred = functionCalls.shift()();
-	}
-
-	// handle async calls
-	var interval = setInterval(function () {
-		// handle mixed sync calls
-		while (currentDeferred.state() === 'resolved') {
-			currentDeferred.done(function (data) {
+	functionCalls.forEach(func => {
+		promiseChain = promiseChain.then(resultData => {
+			return func().then(data => {
 				resultData.push(data);
+				return resultData;
 			});
-			if (functionCalls.length === 0) {
-				clearInterval(interval);
-				deferredResonse.resolve(resultData);
-				break;
-			}
-			currentDeferred = functionCalls.shift()();
-		}
-	}, 10);
+		});
+	});
 
-	return deferredResonse.promise();
+	return promiseChain;
 };

src/manifest.json

@@ -1,24 +1,24 @@
 {
-	"manifest_version": 2,
+	"manifest_version": 3,
 	"version": "",
 	"name": "__MSG_extension_name__",
 	"short_name": "__MSG_extension_short_name__",
 	"description": "__MSG_extension_description__",
 	"permissions": [
-		"<all_urls>",
 		"tabs",
 		"notifications",
 		"storage",
 		"unlimitedStorage",
 		"downloads",
 		"webRequest"
 	],
+	"host_permissions": ["<all_urls>"],
 	"icons": {
 		"16": "icons/icon16.png",
 		"48": "icons/icon48.png",
 		"128": "icons/icon128.png"
 	},
-	"browser_action": {
+	"action": {
 		"default_icon": {
 			"19": "icons/icon19.png",
 			"38": "icons/icon38.png"
@@ -33,15 +33,20 @@
 	},
 	"devtools_page": "devtools/devtools.html",
 	"background": {
-		"scripts": ["background/background.js"]
+		"service_worker": "background/background.js"
 	},
 	"web_accessible_resources": [
-		"icons/icon16.png",
-		"icons/icon19.png",
-		"icons/icon38.png",
-		"icons/icon48.png",
-		"icons/icon128.png",
-		"content_script/AttachedToolbar.html"
+		{
+			"resources": [
+				"icons/icon16.png",
+				"icons/icon19.png",
+				"icons/icon38.png",
+				"icons/icon48.png",
+				"icons/icon128.png",
+				"content_script/AttachedToolbar.html"
+			],
+			"matches": ["*://*/*"]
+		}
 	],
 	"content_scripts": [
 		{

src/options/options.js

@@ -1,7 +1,7 @@
+import * as $ from 'jquery';
 import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/js/bootstrap';
 import * as browser from 'webextension-polyfill';
-import * as $ from 'jquery';
 import Config from '../scripts/Config';
 import Translator from '../scripts/Translator';
 

src/scripts/BackgroundScript.js

@@ -5,7 +5,7 @@ import * as browser from 'webextension-polyfill';
  */
 const BackgroundScript = {
 	dummy() {
-		return $.Deferred().resolve('dummy').promise();
+		return Promise.resolve('dummy');
 	},
 
 	/**
@@ -42,17 +42,9 @@ const BackgroundScript = {
 			fn: request.fn,
 			request: request.request,
 		};
-		const deferredResponse = $.Deferred();
-		this.getActiveTabId()
-			.then(tabId => {
-				browser.tabs
-					.sendMessage(tabId, reqToContentScript)
-					.then(deferredResponse.resolve)
-					.catch(deferredResponse.reject);
-			})
-			.catch(deferredResponse.reject);
-
-		return deferredResponse;
+		return this.getActiveTabId().then(tabId =>
+			browser.tabs.sendMessage(tabId, reqToContentScript)
+		);
 	},
 };
 
@@ -77,15 +69,7 @@ export default function getBackgroundScript(location) {
 						fn: attr,
 						request,
 					};
-
-					const deferredResponse = $.Deferred();
-
-					browser.runtime
-						.sendMessage(reqToBackgroundScript)
-						.then(deferredResponse.resolve)
-						.catch(deferredResponse.reject);
-
-					return deferredResponse;
+					return browser.runtime.sendMessage(reqToBackgroundScript);
 				};
 			} else {
 				backgroundScript[attr] = BackgroundScript[attr];

src/scripts/ContentScript.js

@@ -1,3 +1,4 @@
+import * as $ from 'jquery';
 import getBackgroundScript from './BackgroundScript';
 import ContentSelector from './ContentSelector';
 
@@ -11,28 +12,22 @@ const ContentScript = {
 	 * @returns $.Deferred()
 	 */
 	getHTML(request) {
-		const deferredHTML = $.Deferred();
 		const html = $(request.CSSSelector).clone().wrap('<p>').parent().html();
-		deferredHTML.resolve(html);
-		return deferredHTML.promise();
+		return Promise.resolve(html);
 	},
 
 	/**
 	 * Removes current content selector if is in use within the page
 	 * @returns $.Deferred()
 	 */
 	removeCurrentContentSelector() {
-		const deferredResponse = $.Deferred();
 		const contentSelector = window.cs;
 		if (contentSelector === undefined) {
-			deferredResponse.resolve();
-		} else {
-			contentSelector.removeGUI();
-			window.cs = undefined;
-			deferredResponse.resolve();
+			return Promise.resolve();
 		}
-
-		return deferredResponse.promise();
+		contentSelector.removeGUI();
+		window.cs = undefined;
+		return Promise.resolve();
 	},
 
 	/**
@@ -41,34 +36,32 @@ const ContentScript = {
 	 * @param request.allowedElements
 	 */
 	selectSelector(request) {
-		const deferredResponse = $.Deferred();
-
-		this.removeCurrentContentSelector().done(
-			function () {
-				const contentSelector = new ContentSelector({
-					parentCSSSelector: request.parentCSSSelector,
-					allowedElements: request.allowedElements,
-				});
-				window.cs = contentSelector;
-
-				const deferredCSSSelector = contentSelector.getCSSSelector();
-				deferredCSSSelector
-					.done(
-						function (response) {
-							this.removeCurrentContentSelector().done(function () {
-								deferredResponse.resolve(response);
-								window.cs = undefined;
-							});
-						}.bind(this)
-					)
-					.fail(function (message) {
-						deferredResponse.reject(message);
-						window.cs = undefined;
+		return new Promise((resolve, reject) => {
+			this.removeCurrentContentSelector().then(
+				function () {
+					const contentSelector = new ContentSelector({
+						parentCSSSelector: request.parentCSSSelector,
+						allowedElements: request.allowedElements,
 					});
-			}.bind(this)
-		);
+					window.cs = contentSelector;
 
-		return deferredResponse.promise();
+					const deferredCSSSelector = contentSelector.getCSSSelector();
+					deferredCSSSelector
+						.then(
+							function (response) {
+								this.removeCurrentContentSelector().then(function () {
+									resolve(response);
+									window.cs = undefined;
+								});
+							}.bind(this)
+						)
+						.catch(function (message) {
+							reject(message);
+							window.cs = undefined;
+						});
+				}.bind(this)
+			);
+		});
 	},
 
 	/**
@@ -77,26 +70,26 @@ const ContentScript = {
 	 * @param request.elementCSSSelector
 	 */
 	previewSelector(request) {
-		const deferredResponse = $.Deferred();
-		this.removeCurrentContentSelector().done(function () {
-			const contentSelector = new ContentSelector({
-				parentCSSSelector: request.parentCSSSelector,
-			});
-			window.cs = contentSelector;
-
-			const deferredSelectorPreview = contentSelector.previewSelector(
-				request.elementCSSSelector
-			);
-			deferredSelectorPreview
-				.done(function () {
-					deferredResponse.resolve();
-				})
-				.fail(function (message) {
-					deferredResponse.reject(message);
-					window.cs = undefined;
+		return new Promise((resolve, reject) => {
+			this.removeCurrentContentSelector().then(function () {
+				const contentSelector = new ContentSelector({
+					parentCSSSelector: request.parentCSSSelector,
 				});
+				window.cs = contentSelector;
+
+				const deferredSelectorPreview = contentSelector.previewSelector(
+					request.elementCSSSelector
+				);
+				deferredSelectorPreview
+					.then(function () {
+						resolve();
+					})
+					.catch(function (message) {
+						reject(message);
+						window.cs = undefined;
+					});
+			});
 		});
-		return deferredResponse;
 	},
 };