Switched to WebExtensions' browser.* APIs instead of chrome.*

gilmoreorless · gilmoreorless · commit d896fea9fdf8 · 2017-07-16T21:28:03.000+10:00
diff --git a/browser-extension/TODO.md b/browser-extension/TODO.md
@@ -2,7 +2,6 @@
 
 ## Extension infrastructure
 
-* Make compatible with Web Extensions
 * Publish to various web stores
 * Add links to README and demo page
 
diff --git a/browser-extension/background.js b/browser-extension/background.js
@@ -63,6 +63,44 @@ function log(...args) {
 }
 
 
+///// WEBEXTENSIONS POLYFILL /////
+/**
+ * NOTE: This is suuuuuper-simple polyfill, only replacing the APIs that are used in this file.
+ * The concept is based on https://github.com/mozilla/webextension-polyfill
+ * but trimmed down to keep dependencies to a minimum.
+ */
+
+if (typeof browser === 'undefined') {
+	var promisedCallback = function (origFn) {
+		return function (...args) {
+			return new Promise((resolve, reject) => {
+				origFn(...args, function (...resArgs) {
+					if (chrome.runtime.lastError) {
+						reject(chrome.runtime.lastError);
+						return;
+					}
+					resolve(...resArgs);
+				});
+			});
+		}
+	};
+
+	var makeProxy = function (target, promiseKeys) {
+		promiseKeys = promiseKeys || [];
+		return new Proxy(target, {
+			get: function (obj, key) {
+				return promiseKeys.includes(key) ? promisedCallback(obj[key]) : obj[key];
+			}
+		})
+	};
+
+	window.browser = {};
+	browser.browserAction = makeProxy(chrome.browserAction);
+	browser.runtime = makeProxy(chrome.runtime);
+	browser.tabs = makeProxy(chrome.tabs, ['query']);
+}
+
+
 ///// ICON BADGING /////
 
 function getCountText(count) {
@@ -77,11 +115,11 @@ function setBadgeCount(tabId, count) {
 	if (count != null && count !== '') {
 		badgeOptions.text = getCountText(count);
 	}
-	chrome.browserAction.setBadgeText(badgeOptions);
+	browser.browserAction.setBadgeText(badgeOptions);
 }
 
 function setBadgeColor(tabId, color) {
-	chrome.browserAction.setBadgeBackgroundColor({
+	browser.browserAction.setBadgeBackgroundColor({
 		tabId: tabId,
 		color: color
 	});
@@ -98,7 +136,7 @@ function setTotalCount(tabId, count) {
 
 function ensureTabStatus(tabId) {
 	log('ensureTabStatus', tabId);
-	chrome.tabs.sendMessage(tabId, {
+	browser.tabs.sendMessage(tabId, {
 		msg: state.isCensoringActive ? 'setActive' : 'setInactive'
 	});
 }
@@ -135,8 +173,8 @@ function contentScriptMessageHandler(request, sender, sendResponse) {
 	}
 }
 
-chrome.runtime.onMessage.addListener(contentScriptMessageHandler);
-chrome.tabs.onActivated.addListener(function (activeInfo) {
+browser.runtime.onMessage.addListener(contentScriptMessageHandler);
+browser.tabs.onActivated.addListener(function (activeInfo) {
 	ensureTabStatus(activeInfo.tabId);
 });
 
@@ -149,15 +187,15 @@ restoreState();
 function toggleStatus() {
 	state.isCensoringActive = !state.isCensoringActive;
 	log('toggleStatus, active =', state.isCensoringActive);
-	chrome.tabs.query({ active: true }, function (tabs) {
+	browser.tabs.query({ active: true }).then(function (tabs) {
 		tabs.forEach(function (tab) {
 			ensureTabStatus(tab.id);
 		});
 	});
-	chrome.browserAction.setTitle({
+	browser.browserAction.setTitle({
 		title: actionTitle[state.isCensoringActive ? 'active' : 'inactive']
 	});
 	saveState();
 }
 
-chrome.browserAction.onClicked.addListener(toggleStatus);
+browser.browserAction.onClicked.addListener(toggleStatus);
diff --git a/browser-extension/emoji-censor-comms.js b/browser-extension/emoji-censor-comms.js
@@ -9,6 +9,8 @@
  *     - On removed content, look for removed redactions and update count
  */
 
+///// CONFIG /////
+
 var DEBUG = false;
 
 var specialCases = [
@@ -18,15 +20,8 @@ var specialCases = [
 
 var isCensoringActive = false;
 
-function redact(elems) {
-	var options = {};
-	specialCases.forEach(function (rule) {
-		if (location.hostname === rule[0]) {
-			options.customDisplayElements = rule[1];
-		}
-	});
-	emojiCensor.redactElements(elems, options);
-}
+
+///// DEBUG LOGGING /////
 
 function pad(n) {
 	return ('00' + n).substr(-2);
@@ -41,6 +36,19 @@ function log(...args) {
 	console.log(...args);
 }
 
+
+///// REDACTION /////
+
+function redact(elems) {
+	var options = {};
+	specialCases.forEach(function (rule) {
+		if (location.hostname === rule[0]) {
+			options.customDisplayElements = rule[1];
+		}
+	});
+	emojiCensor.redactElements(elems, options);
+}
+
 var observerConfig = {
 	characterData: true,
 	childList: true,
@@ -81,9 +89,40 @@ function setIsActive(isNowActive) {
 	}
 }
 
+
+///// COMMUNICATION & LIFECYCLE /////
+
+var runtimeOnMessage, runtimeSendMessage;
+if (typeof browser !== 'undefined') {
+	runtimeOnMessage = browser.runtime.onMessage;
+	runtimeSendMessage = function (message, onResponse) {
+		var promise = browser.runtime.sendMessage(message);
+		return onResponse ? promise.then(onResponse) : promise;
+	};
+} else {
+	runtimeOnMessage = chrome.runtime.onMessage;
+	runtimeSendMessage = function (message, onResponse) {
+		var promise = new Promise((resolve, reject) => {
+			if (onResponse) {
+				chrome.runtime.sendMessage(message, function (...resArgs) {
+					if (chrome.runtime.lastError) {
+						reject(chrome.runtime.lastError);
+						return;
+					}
+					resolve(...resArgs);
+				});
+			} else {
+				chrome.runtime.sendMessage(message);
+				resolve();
+			}
+		});
+		return onResponse ? promise.then(onResponse) : promise;
+	};
+}
+
 function getGlobalStatus() {
 	log('getGlobalStatus')
-	chrome.runtime.sendMessage({ msg: 'isGlobalActive' }, function (response) {
+	runtimeSendMessage({ msg: 'isGlobalActive' }, function (response) {
 		log('isGlobalActive response', response);
 		setIsActive(response.isActive);
 	});
@@ -92,13 +131,13 @@ function getGlobalStatus() {
 function sendTotalCount(explicitCount) {
 	var count = explicitCount !== undefined ? explicitCount : emojiCensor.redactedCount();
 	log('sendTotalCount', count);
-	chrome.runtime.sendMessage({
+	runtimeSendMessage({
 		msg: 'totalRedacted',
 		count: count
 	});
 }
 
-chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
+runtimeOnMessage.addListener(function (request, sender, sendResponse) {
 	log('runtime.onMessage', request);
 	switch (request.msg) {
 		case 'setActive': setIsActive(true); break;
