Change from chrome to promise based browser api (#19)

Author: LyzardKing

.github/workflows/lint.yml

@@ -24,4 +24,4 @@ jobs:
 
       - run: npm ci
 
-      - run: npx eslint
+      - run: npx eslint . --ignore-pattern 'translators/*'

background.js

@@ -1,13 +1,18 @@
 // background.js (sketch)
-chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
+// Provide a minimal compatibility shim: if `browser` is missing, alias it to `chrome`.
+if (typeof browser === "undefined" && typeof chrome !== "undefined") {
+  globalThis.browser = chrome;
+}
+
+browser.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
   if (!msg || msg.type !== 'runTranslator') return;
 
   const { translatorPath, translators, url } = msg;
 
   // If offscreen is available (Chrome), forward the request so the offscreen
   // document runs the translator. If not (Firefox), run the translator
   // directly from the background page which has a DOM.
-  if (chrome.offscreen) {
+  if (browser.offscreen) {
     try {
       sendResponse({ ok: true });
     } catch (e) {
@@ -23,7 +28,7 @@ chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
     const html = await resp.text();
 
     // Import the runner from the extension bundle.
-    const runnerModule = await import(chrome.runtime.getURL('sources/translatorRunner.js'));
+    const runnerModule = await import(browser.runtime.getURL('sources/translatorRunner.js'));
     const { runTranslatorOnHtml } = runnerModule;
 
     // Normalize translators list: accept either `translators` array or single `translatorPath`.
@@ -59,17 +64,17 @@ chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
 
     try {
       const { result, translator: successful } = await firstFulfilled(attempts);
-      chrome.runtime.sendMessage({ type: 'offscreenResult', url, result, translator: successful });
+      await browser.runtime.sendMessage({ type: 'offscreenResult', url, result, translator: successful });
       sendResponse({ ok: true });
     } catch (errors) {
       // All attempts failed
       const last = Array.isArray(errors) && errors.length ? errors[errors.length - 1] : errors;
       const msg = last && last.err ? String(last.err) : String(last || 'All translators failed');
-      chrome.runtime.sendMessage({ type: 'offscreenResult', url, error: msg });
+      await browser.runtime.sendMessage({ type: 'offscreenResult', url, error: msg });
       sendResponse({ ok: false, error: msg });
     }
   } catch (e) {
-    chrome.runtime.sendMessage({ type: 'offscreenResult', url, error: String(e) });
+    await browser.runtime.sendMessage({ type: 'offscreenResult', url, error: String(e) });
     sendResponse({ ok: false, error: String(e) });
   }
   return true;

offscreen.js

@@ -2,7 +2,12 @@ import { runTranslatorOnHtml } from './sources/translatorRunner.js';
 
 console.debug('[offscreen] started');
 
-chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
+// Provide a minimal compatibility shim: if `browser` is missing, alias it to `chrome`.
+if (typeof browser === "undefined" && typeof chrome !== "undefined") {
+  globalThis.browser = chrome;
+}
+
+browser.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
   if (!msg || msg.type !== 'runTranslator') return;
   const { url, translatorPath, translators } = msg;
   try {
@@ -17,28 +22,26 @@ chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
       try {
         const result = await runTranslatorOnHtml(t, html, url);
         if (result !== null && typeof result !== 'undefined') {
-          chrome.runtime.sendMessage({ type: 'offscreenResult', url, result });
+          await browser.runtime.sendMessage({ type: 'offscreenResult', url, result });
           sendResponse({ ok: true });
           return true;
         }
-        // null result -> try next translator
       } catch (e) {
         lastError = e;
         console.warn('[offscreen] translator failed, trying next:', t, e);
         continue;
       }
     }
 
-    // none produced a result
     if (lastError) {
-      chrome.runtime.sendMessage({ type: 'offscreenResult', url, error: String(lastError) });
+      await browser.runtime.sendMessage({ type: 'offscreenResult', url, error: String(lastError) });
       sendResponse({ ok: false, error: String(lastError) });
     } else {
-      chrome.runtime.sendMessage({ type: 'offscreenResult', url, result: null });
+      await browser.runtime.sendMessage({ type: 'offscreenResult', url, result: null });
       sendResponse({ ok: true, result: null });
     }
   } catch (e) {
-    chrome.runtime.sendMessage({ type: 'offscreenResult', url, error: String(e) });
+    await browser.runtime.sendMessage({ type: 'offscreenResult', url, error: String(e) });
     sendResponse({ ok: false, error: String(e) });
   }
   return true;

package.json

@@ -2,6 +2,7 @@
   "name": "jabref-browser-extension",
   "description": "Tests for JabRef Connector Extension",
   "scripts": {
+    "lint": "eslint . --ignore-pattern 'translators/*'",
     "test": "node test.js arXiv.org.js"
   },
   "dependencies": {

popup.js

@@ -1,5 +1,10 @@
+// Provide a minimal compatibility shim: if `browser` is missing, alias it to `chrome`.
+if (typeof browser === "undefined" && typeof chrome !== "undefined") {
+  globalThis.browser = chrome;
+}
+
 async function findMatchesForUrl(url) {
-  const manifestUrl = chrome.runtime.getURL("translators/manifest.json");
+  const manifestUrl = browser.runtime.getURL("translators/manifest.json");
   const resp = await fetch(manifestUrl);
   const list = await resp.json();
 
@@ -19,8 +24,6 @@ async function findMatchesForUrl(url) {
 }
 
 function renderResults(url, matches) {
-  const log = document.getElementById("log");
-  const bib = document.getElementById("bibEntry");
   // Log the URL
   appendLog(`URL: ${url}`);
   if (!matches || !matches.length) {
@@ -30,12 +33,12 @@ function renderResults(url, matches) {
 }
 
 async function ensureOffscreen() {
-  if (!chrome.offscreen) return false;
-  const has = await chrome.offscreen.hasDocument();
+  if (!browser.offscreen) return false;
+  const has = await browser.offscreen.hasDocument();
   if (has) return true;
   try {
-    await chrome.offscreen.createDocument({
-      url: chrome.runtime.getURL("offscreen.html"),
+    await browser.offscreen.createDocument({
+      url: browser.runtime.getURL("offscreen.html"),
       reasons: ["DOM_PARSER"],
       justification: "Run translators offscreen",
     });
@@ -47,33 +50,20 @@ async function ensureOffscreen() {
 }
 
 async function runTranslatorOffscreen(translatorPaths, url) {
-  const ok = await ensureOffscreen();
+  await ensureOffscreen();
   const payload = { type: "runTranslator", translators: translatorPaths, url };
   try {
     appendLog(`Requesting translator run for ${url}`, "info");
-    chrome.runtime.sendMessage(payload, (resp) => {
-      if (chrome.runtime.lastError) {
-        appendLog(
-          `Background sendMessage failed: ${chrome.runtime.lastError.message}`,
-          "error",
-        );
-        return;
-      }
-      if (resp && resp.ok)
-        appendLog("Background acknowledged run request", "info");
-      else
-        appendLog(
-          `Background error: ${resp && resp.error ? resp.error : "unknown"}`,
-          "error",
-        );
-    });
+    const resp = await browser.runtime.sendMessage(payload);
+    if (resp && resp.ok) appendLog("Background acknowledged run request", "info");
+    else appendLog(`Background error: ${resp && resp.error ? resp.error : "unknown"}`, "error");
   } catch (e) {
     console.error("Failed to send runTranslator message", e);
   }
 }
 
 // Listen for offscreen results
-chrome.runtime.onMessage.addListener((msg) => {
+browser.runtime.onMessage.addListener((msg) => {
   if (!msg || msg.type !== "offscreenResult") return;
   const bib = document.getElementById("bibEntry");
   const error = msg.error;
@@ -129,14 +119,10 @@ function updateStatus(status, className) {
 
 // Connect to JabRef via HTTP POST
 let jabrefBaseUrl = null;
-function getBaseUrl() {
-  return new Promise((resolve) => {
-    chrome.storage.local.get({ jabrefPort: 23119 }, (res) => {
-      const port = res.jabrefPort || 23119;
-      const base = `http://localhost:${port}/`;
-      resolve(base);
-    });
-  });
+async function getBaseUrl() {
+  const res = await browser.storage.local.get({ jabrefPort: 23119 });
+  const port = res.jabrefPort || 23119;
+  return `http://localhost:${port}/`;
 }
 
 async function connectToJabRef() {
@@ -240,18 +226,15 @@ document.addEventListener("DOMContentLoaded", async () => {
     if (noneEl) noneEl.style.display = "block";
     return;
   }
-  try {
-    if (!window.chrome || !chrome.tabs) {
-      urlEl.textContent = "Chrome extension APIs not available.";
-      document.getElementById("none").style.display = "block";
-      return;
-    }
+    try {
+      if (!window.browser || !browser.tabs) {
+        urlEl.textContent = "Extension APIs not available.";
+        document.getElementById("none").style.display = "block";
+        return;
+      }
 
-    const tab = await new Promise((resolve) => {
-      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-        resolve(tabs && tabs[0]);
-      });
-    });
+      const tabs = await browser.tabs.query({ active: true, currentWindow: true });
+      const tab = tabs && tabs[0];
     const url = tab && tab.url ? tab.url : "";
     if (!url) {
       urlEl.textContent = "Unable to determine active tab URL.";
@@ -274,9 +257,7 @@ document.addEventListener("DOMContentLoaded", async () => {
     renderResults(url, matches || []);
     if (matches && matches.length) {
       // Build array of translator URLs and request background/offscreen
-      const translatorPaths = matches.map((m) =>
-        chrome.runtime.getURL(m.path || ""),
-      );
+      const translatorPaths = matches.map((m) => browser.runtime.getURL(m.path || ""));
       runTranslatorOffscreen(translatorPaths, url);
     }
   } catch (e) {

settings.js

@@ -6,16 +6,22 @@ const cancelBtn = document.getElementById("cancelBtn");
 const msg = document.getElementById("msg");
 
 function loadSettings() {
-  chrome.storage.local.get({ jabrefPort: DEFAULT_PORT }, (res) => {
+  browser.storage.local.get({ jabrefPort: DEFAULT_PORT }).then((res) => {
     portInput.value = res.jabrefPort;
+  }).catch((e) => {
+    console.warn('Failed to load settings', e);
   });
 }
 
 function saveSettings() {
   const port = parseInt(portInput.value, 10) || DEFAULT_PORT;
-  chrome.storage.local.set({ jabrefPort: port }, () => {
+  browser.storage.local.set({ jabrefPort: port }).then(() => {
     msg.textContent = "Saved.";
     setTimeout(() => (msg.textContent = ""), 1500);
+  }).catch((e) => {
+    console.warn('Failed to save settings', e);
+    msg.textContent = "Save failed.";
+    setTimeout(() => (msg.textContent = ""), 1500);
   });
 }