displays a refresh icon in the action button if tab needs to be refreshed

extension/core/scripts/bg/bg.js

@@ -23,6 +23,7 @@
 singlefile.core = (() => {
 
 	const browser = this.browser || this.chrome;
+	const TIMEOUT_PROCESS_START_MESSAGE = 3000;
 
 	return {
 		processTab(tab, processOptions = {}) {
@@ -30,17 +31,24 @@ singlefile.core = (() => {
 			Object.keys(processOptions).forEach(key => options[key] = processOptions[key]);
 			options.insertSingleFileComment = true;
 			options.insertFaviconLink = true;
-			if (options.removeFrames) {
-				processStart(tab, options);
-			} else {
-				FrameTree.initialize(tab.id)
-					.then(() => processStart(tab, options));
-			}
+			return new Promise((resolve, reject) => {
+				const errorTimeout = setTimeout(reject, TIMEOUT_PROCESS_START_MESSAGE);
+				const onMessageSent = () => {
+					clearTimeout(errorTimeout);
+					resolve();
+				};
+				if (options.removeFrames) {
+					processStart(tab, options).then(onMessageSent);
+				} else {
+					FrameTree.initialize(tab.id)
+						.then(() => processStart(tab, options)).then(onMessageSent);
+				}
+			});
 		}
 	};
 
 	function processStart(tab, options) {
-		browser.tabs.sendMessage(tab.id, { processStart: true, options });
+		return new Promise(resolve => browser.tabs.sendMessage(tab.id, { processStart: true, options }, resolve));
 	}
 
 })();

extension/core/scripts/content/content.js

@@ -28,11 +28,12 @@
 
 	let processing = false;
 
-	browser.runtime.onMessage.addListener(request => {
-		if (request.processStart && !processing) {
+	browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+		sendResponse({});
+		if (message.processStart && !processing) {
 			processing = true;
 			fixInlineScripts();
-			getOptions(request.options)
+			getOptions(message.options)
 				.then(options => SingleFile.initialize(options))
 				.then(process => {
 					singlefile.ui.init();
@@ -40,7 +41,7 @@
 				})
 				.then(page => {
 					const date = new Date();
-					page.filename = page.title + (request.options.appendSaveDate ? " (" + date.toISOString().split("T")[0] + " " + date.toLocaleTimeString() + ")" : "") + ".html";
+					page.filename = page.title + (message.options.appendSaveDate ? " (" + date.toISOString().split("T")[0] + " " + date.toLocaleTimeString() + ")" : "") + ".html";
 					page.url = URL.createObjectURL(new Blob([page.content], { type: "text/html" }));
 					downloadPage(page);
 					singlefile.ui.end();

extension/ui/scripts/bg/ui.js

@@ -97,17 +97,31 @@ singlefile.ui = (() => {
 
 	function processTab(tab) {
 		const tabId = tab.id;
-		singlefile.core.processTab(tab);
-		tabs[tabId] = {
-			id: tabId,
-			text: "...",
-			color: DEFAULT_COLOR,
-			title: "initializing...",
-			path: DEFAULT_ICON_PATH,
-			progress: -1,
-			barProgress: -1
-		};
-		refreshBadge(tabId);
+		singlefile.core.processTab(tab)
+			.then(() => {
+				tabs[tabId] = {
+					id: tabId,
+					text: "...",
+					color: DEFAULT_COLOR,
+					title: "initializing...",
+					path: DEFAULT_ICON_PATH,
+					progress: -1,
+					barProgress: -1
+				};
+				refreshBadge(tabId);
+			})
+			.catch(() => {
+				tabs[tabId] = {
+					id: tabId,
+					text: "↻",
+					color: [255, 141, 1, 255],
+					title: "reload the page",
+					path: DEFAULT_ICON_PATH,
+					progress: -1,
+					barProgress: -1
+				};
+				refreshBadge(tabId);
+			});
 	}
 
 	function onError(tabId) {