implement polyfilling, first-class firefox support coming soon

src/seqta/ui/ImageBackgrounds.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 export async function appendBackgroundToUI() {
   console.log('Starting appendBackgroundToUI...');
@@ -10,6 +10,6 @@ export async function appendBackgroundToUI() {
   background.id = 'background';
   background.classList.add('imageBackground');
   background.setAttribute('excludeDarkCheck', 'true');
-  background.src = chrome.runtime.getURL('backgrounds/background.html');
+  background.src = browser.runtime.getURL('backgrounds/background.html');
   parent.appendChild(background);
 }

src/seqta/ui/Loading.js

@@ -1,4 +1,4 @@
-/*global chrome*/
+import browser from 'webextension-polyfill'
 import stringToHTML from '../utils/stringToHTML.js';
 
 const loadingSpinner = `
@@ -75,7 +75,7 @@ export default function loading() {
       </style>
     ${loadingSpinner}
   <div style="position: absolute;bottom: 0;right: 0;padding: 10px;color: #4f4f4f;text-anchor: middle;font-size: 20px;">v${
-  chrome.runtime.getManifest().version
+  browser.runtime.getManifest().version
 }</div></div>`,
   );
   var html = document.getElementsByTagName('html')[0];

src/seqta/ui/Themes.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 import localforage from 'localforage';
 
 let currentThemeClass = '';
@@ -77,7 +77,7 @@ const applyTheme = async (themeName) => {
     );
   }
 
-  chrome.storage.local.set({ DarkMode: darkMode, selectedColor: defaultColour });
+  browser.storage.local.set({ DarkMode: darkMode, selectedColor: defaultColour });
 };
 
 export const listThemes = async () => {

src/seqta/ui/colors/Manager.js

@@ -1,11 +1,12 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 import { GetThresholdOfColor, GetCSSElement } from '../../../SEQTA.js';
 import { lightenAndPaleColor } from './lightenAndPaleColor.js';
 import ColorLuminance from './ColorLuminance.js';
+import { onError } from '../../utils/onError.js';
 
 // Helper functions
 const setCSSVar = (varName, value) => document.documentElement.style.setProperty(varName, value);
-const getChromeURL = (path) => chrome.runtime.getURL(path);
+const getChromeURL = (path) => browser.runtime.getURL(path);
 const applyProperties = (props) => Object.entries(props).forEach(([key, value]) => setCSSVar(key, value));
 
 let DarkMode = null;
@@ -88,11 +89,13 @@ export function updateAllColors(storedSetting, newColor = null) {
 
 export function getDarkMode() {
   return new Promise((resolve, reject) => {
-    chrome.storage.local.get('DarkMode', (result) => {
-      if (chrome.runtime.lastError) {
-        return reject(chrome.runtime.lastError);
+    const result = browser.storage.local.get('DarkMode')
+    function open (result) {
+      if (browser.runtime.lastError) {
+        return reject(browser.runtime.lastError);
       }
       resolve(result.DarkMode);
-    });
+    }
+    result.then(open, onError)
   });
 }

src/seqta/utils/MessageListener.js

@@ -1,11 +1,11 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 import { MenuOptionsOpen, OpenMenuOptions, closeSettings } from '../../SEQTA.js';
 import { deleteTheme, disableTheme, downloadTheme, listThemes, setTheme } from '../ui/Themes.js';
 
 export class MessageHandler {
   constructor() {
-    chrome.runtime.onMessage.addListener(this.routeMessage.bind(this));
+    browser.runtime.onMessage.addListener(this.routeMessage.bind(this));
   }
 
   routeMessage(request, sender, sendResponse) {

src/seqta/utils/StorageListener.js

@@ -1,4 +1,4 @@
-/* global chrome */
+import browser from 'webextension-polyfill'
 
 import {
   CreateBackground,
@@ -15,7 +15,7 @@ import { getDarkMode, updateAllColors } from '../ui/colors/Manager.js';
 export default class StorageListener {
   constructor() {
     this.darkMode = getDarkMode();
-    chrome.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
+    browser.storage.onChanged.addListener(this.handleStorageChanges.bind(this));
   }
 
   handleStorageChanges(changes) {