izzy · izzy · Oct 22, 2022 · Oct 22, 2022
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 CHANGELOG
 =============================
+* 5.1.0
+  * Added browser polyfill in preparation for Firefox compatibility
 * 5.0.2
   * Added light/dark mode style to settings
   * Slight style improvements for settings

diff --git a/html/menu_ui.html b/html/menu_ui.html
@@ -161,5 +161,6 @@ <h1>Credits</h1>
 	</div>
 </div>
 
-<script type="text/javascript" src="../js/menu_ui.js"></script>
+<script type="text/javascript" src="/js/browser-polyfill.min.js"></script>
+<script type="text/javascript" src="/js/menu_ui.js"></script>
 </body>
diff --git a/js/D3.js b/js/D3.js
@@ -6,7 +6,7 @@ async function getCurrentTab() {
 		active: true,
 		currentWindow: true
 	};
-	let [tab] = await chrome.tabs.query(queryOptions);
+	let [tab] = await browser.tabs.query(queryOptions);
 	return tab;
 }
 
@@ -22,7 +22,7 @@ var D3 = {
 	 * 
 	 * @var String
 	 */
-	version: "5.0.0",
+	version: "5.1.0",
 
 	/**
 	 * Tabs that already had the content worker script injected
@@ -65,7 +65,7 @@ var D3 = {
 	lastMessage: '',
 
 	checkInstall: function (callback) {
-		chrome.storage.sync.get(null, function (items) {
+		browser.storage.sync.get(null).then((items) => {
 			console.log("Check Install: Start");
 			update = {};
 			if (!items["messageType"]) {
@@ -89,7 +89,7 @@ var D3 = {
 				update["version"] = D3.version;
 			}
 
-			chrome.storage.sync.set(update, function () {
+			browser.storage.sync.set(update).then(() => {
 				console.log("Installed decoder version " + D3.version);
 			});
 		});
@@ -104,13 +104,13 @@ var D3 = {
 
 		// Inject the content scripts once at the start
 		if (!(tabId in D3.injected_tabs)) {
-			await chrome.scripting.insertCSS({
+			await browser.scripting.insertCSS({
 				target: {
 					tabId: tabId
 				},
 				files: ["styles/content.css"]
 			});
-			await chrome.scripting.executeScript({
+			await browser.scripting.executeScript({
 				target: {
 					tabId: tabId
 				},
@@ -125,7 +125,7 @@ var D3 = {
 					console.log(['d3coder:: FUNCTION:' + title, text]);
 				};
 
-				chrome.scripting.executeScript({
+				browser.scripting.executeScript({
 					target: {
 						tabId: tabId
 					},
@@ -139,7 +139,7 @@ var D3 = {
 					alert(title + '\n\n' + text);
 				};
 
-				chrome.scripting.executeScript({
+				browser.scripting.executeScript({
 					target: {
 						tabId: tabId
 					},
@@ -153,7 +153,7 @@ var D3 = {
 					D3content.createDiv(title, text);
 				};
 
-				chrome.scripting.executeScript({
+				browser.scripting.executeScript({
 					target: {
 						tabId: tabId
 					},
@@ -168,7 +168,7 @@ var D3 = {
 					D3content.replaceText(text);
 				};
 
-				chrome.scripting.executeScript({
+				browser.scripting.executeScript({
 					target: {
 						tabId: tabId
 					},
@@ -193,7 +193,7 @@ var D3 = {
 		}
 
 		getCurrentTab().then(function (tab) {
-			chrome.scripting.executeScript({
+			browser.scripting.executeScript({
 				target: {
 					tabId: tab.id
 				},
@@ -232,14 +232,12 @@ var D3 = {
 		};
 
 		function clearMenu() {
-			console.log(D3.menuIds);
 			for (id in D3.menuIds) {
 				if (id && D3.menuIds[id] != null) {
-					chrome.contextMenus.remove(D3.menuIds[id]);
+					browser.contextMenus.remove(D3.menuIds[id]);
 				}
 				D3.menuIds[id] = null;
 			}
-			console.log(D3.menuIds);
 		}
 
 		function createMenu(items, name) {
@@ -253,20 +251,19 @@ var D3 = {
 					"id": "d3coder-selection-" + function_list[name][1]
 				};
 				try {
-					D3.menuIds[name] = chrome.contextMenus.create(menu);
+					D3.menuIds[name] = browser.contextMenus.create(menu);
 				} catch (e) {
-					console.log(e);
+					console.log(["Error creating menu", e]);
 				}
 			} else if (items.checkboxes[name] == false) {
 				if (D3.menuIds[name]) {
-					// console.log("Menu: Removing " + D3.menuIds[name]);
-					chrome.contextMenus.remove(D3.menuIds[name]);
+					browser.contextMenus.remove(D3.menuIds[name]);
 					D3.menuIds[name] = null;
 				}
 			}
 		}
 
-		chrome.storage.sync.get(null, function (items) {
+		browser.storage.sync.get(null).then((items) => {
 			clearMenu();
 
 			for (itemName in items.checkboxes) {
@@ -282,7 +279,7 @@ var D3 = {
 				}
 
 				try {
-					D3.menuIds["options"] = chrome.contextMenus.create(menu);
+					D3.menuIds["options"] = browser.contextMenus.create(menu);
 				} catch (e) {
 					console.log(e);
 				}
@@ -293,6 +290,6 @@ var D3 = {
 	translate: function (name) {
 		let e_msg = "Could not translate " + name;
 
-		return chrome.i18n.getMessage(name) || e_msg;
+		return browser.i18n.getMessage(name) || e_msg;
 	}
 };
diff --git a/js/browser-polyfill.min.js b/js/browser-polyfill.min.js
diff --git a/js/menu_ui.js b/js/menu_ui.js
@@ -9,7 +9,7 @@ let localizeHtmlPage = function(){
 
     let valStrH = obj.innerHTML.toString();
     let valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1) {
-      return v1 ? chrome.i18n.getMessage(v1) : "";
+      return v1 ? browser.i18n.getMessage(v1) : "";
     });
 
     if(valNewH != valStrH)
@@ -25,7 +25,7 @@ var D3menu = {
     * 
     * @var String
     */
-  version: "4.0.0",
+  version: "5.1.0",
 
   /**
     * list all functions. Needed to upgrade from older versions
@@ -60,7 +60,7 @@ var D3menu = {
 function upgrade() {
     var clipboardSave, checkboxes = {}, version = D3menu.version;
 
-    chrome.storage.sync.get({version: false}, function(items) {
+    browser.storage.sync.get({version: false}).then((items) => {
         if (items.version) {
             console.log("Upgrade: D3coder version " + version + " found.");
             return;
@@ -79,16 +79,16 @@ function save_options() {
       checkboxes[option.id] = document.getElementById(option.id).checked == true ? true : false;
     }
 
-    chrome.storage.sync.set(
+    browser.storage.sync.set(
       {
         checkboxes: checkboxes,
         messageType: messageType,
         clipboardSave: clipboardSave,
         version: D3menu.version
-      }, function() {
+      }).then(() => {
         console.log("Save: Options saved to storage");
         var status = document.getElementById('status');
-        status.textContent = chrome.i18n.getMessage('options_saved');
+        status.textContent = browser.i18n.getMessage('options_saved');
         status.style.display = "block";
         status.style.opacity = 1;
         setTimeout(function() {
@@ -99,15 +99,15 @@ function save_options() {
   }
 
 // Restores select box and checkbox state using the preferences
-// stored in chrome.storage.
+// stored in browser.storage / chrome.storage.
 function restore_options() {
   console.log("Restore: Starting restore");
-  chrome.storage.sync.get({
+  browser.storage.sync.get({
     checkboxes: [],
     messageType: 'message',
     clipboardSave: false,
     version: 0
-  }, function(items) {
+  }).then((items) => {
     console.log("Restore: Loaded these items:");
     console.log("Restore: Checkboxes", items.checkboxes);
     console.log("Restore: Message Type", items.messageType);

diff --git a/js/serviceworker.js b/js/serviceworker.js
@@ -4,29 +4,32 @@ console.log("Successfully loaded D3 lib");
 importScripts("/js/D3.js");
 console.log("Successfully loaded D3 main");
 
-chrome.runtime.onInstalled.addListener(() => {
+importScripts("/js/browser-polyfill.min.js");
+console.log("Successfully loaded browser-polyfill");
+
+browser.runtime.onInstalled.addListener(() => {
     D3.checkInstall(D3.createContextMenu());
 });
 
-chrome.storage.onChanged.addListener((changes, namespace) => {
+browser.storage.onChanged.addListener((changes, namespace) => {
     D3.createContextMenu();
 });
 
-chrome.runtime.onMessage.addListener(
+browser.runtime.onMessage.addListener(
     (request, sender, sendResponse) => {
         console.log([request, sender, sendResponse]);
 
         if (request.command == "doCopy") {
             var responseStatus = D3.copyToClipboard(D3.lastMessage);
-            sendResponse({status: [chrome.i18n.getMessage("message_copied_to_clipboard"), responseStatus] });
+            sendResponse({status: [browser.i18n.getMessage("message_copied_to_clipboard"), responseStatus] });
         } else if (request.command == "setContextMenuTitle") {
-            chrome.contextMenus.update(contextMenuId, {title: request.message});
+            browser.contextMenus.update(contextMenuId, {title: request.message});
         } else {
             sendResponse({});
         }
 });
 
-chrome.contextMenus.onClicked.addListener(
+browser.contextMenus.onClicked.addListener(
     (info, tab) => {
         menuId = info.menuItemId;
 
@@ -37,10 +40,10 @@ chrome.contextMenus.onClicked.addListener(
 
         // Menu item for the extension's settings page
         if (menuId === 'd3coder-settings') {
-            chrome.runtime.openOptionsPage();
+            browser.runtime.openOptionsPage();
         // Menu for selected/editable text
         } else if (fn_selection === true && fn_normalized in D3lib) {
-            chrome.storage.sync.get(null, (items) => {
+            browser.storage.sync.get(null).then((items) => {
                 D3.createPopup(
                     D3.translate(`function_${fn_normalized}`),
                     D3lib[fn_normalized](info.selectionText),

diff --git a/manifest.json b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "__MSG_extName__", 
-  "version": "5.0.2",
+  "version": "5.1.0",
   "description": "__MSG_extDescription__",
   "options_ui": {
     "page": "html/menu_ui.html",