fix: run detect step also in the content script

Author: tobiasdiez

background.js

@@ -1,4 +1,4 @@
-import { createTranslateEngine, exportItems } from "./sources/translateEngine.js";
+import { exportItems } from "./sources/translateEngine.js";
 
 // Provide a minimal compatibility shim: if `browser` is missing, alias it to `chrome`.
 if (typeof browser === "undefined" && typeof chrome !== "undefined") {
@@ -103,9 +103,14 @@ function installInTab(tab) {
 */
 async function lookForTranslators(tab) {
   console.log("JabRef: Searching for translators for %o", tab);
-  const engine = await createTranslateEngine(tab.url);
-  const translators = await engine.detect();
-  onTranslators(translators, tab.id);
+
+  await initTranslateEngine(tab)
+  const response = await browser.tabs.sendMessage(tab.id, {
+    type: "detectTranslators",
+    url: tab.url,
+  });
+  const translatorsInfo = response?.translatorsInfo || [];
+  onTranslators(translatorsInfo, tab.id);
 }
 
 async function evalInTab(tabsId, code) {
@@ -228,22 +233,22 @@ function savePdf(tab) {
     Is called after lookForTranslators found matching translators.
     We need to hide or show the page action accordingly.
 */
-function onTranslators(translators, tabId) {
-  if (!translators || translators.length === 0) {
+function onTranslators(translatorsInfo, tabId) {
+  if (!translatorsInfo || translatorsInfo.length === 0) {
     console.log(`JabRef: Found no suitable translators for tab ${tabId}`);
-    tabInfo.set(tabId, { ...tabInfo.get(tabId), translators });
+    tabInfo.set(tabId, { ...tabInfo.get(tabId), translatorsInfo });
     browser.pageAction.show(tabId);
     browser.pageAction.setTitle({
       tabId: tabId,
       title: "Import simple website reference into JabRef",
     });
   } else {
-    console.log(`JabRef: Found translators %o for tab ${tabId}`, translators);
-    tabInfo.set(tabId, { ...tabInfo.get(tabId), translators });
+    console.log(`JabRef: Found translators %o for tab ${tabId}`, translatorsInfo);
+    tabInfo.set(tabId, { ...tabInfo.get(tabId), translatorsInfo });
     browser.pageAction.show(tabId);
     browser.pageAction.setTitle({
       tabId: tabId,
-      title: "Import references into JabRef using " + translators[0].label,
+      title: "Import references into JabRef using " + translatorsInfo[0].label,
     });
   }
 }
@@ -272,34 +277,26 @@ async function initContentScript(tabId) {
   });
 }
 
-async function onPopupOpened(tab, info) {
-  if (!info.translators.length) throw new Error("No translator paths provided");
-
-  // If offscreen is available (Chrome), forward the request so the offscreen
-  // document runs the translator. If not (Firefox), run the translator
-  // from the content script (which has a DOM available, unlike the background page).
+async function initTranslateEngine(tab) {
+  // The basic issue is that the background script doesn't have access
+  // to the DOM.
+  // Depending on the browser, we run the translators thus in:
+  // - the offscreen page (Chrome),
+  // - the content script (Firefox).
   if (browser.offscreen) {
     await initOffscreenDocument();
   } else {
     await initContentScript(tab.id);
   }
+}
+
+async function onPopupOpened(tab, info) {
+  if (!info.translatorsInfo.length) throw new Error("No translator paths provided");
+
   await browser.tabs.sendMessage(tab.id, {
     type: "runTranslators",
     url: tab.url,
-    translatorsInfo: info.translators.map((translator) => {
-      // We cannot send the full translator object as it contains functions
-      return {
-        translatorID: translator.translatorID,
-        translatorType: translator.translatorType,
-        label: translator.label,
-        creator: translator.creator,
-        target: translator.target,
-        priority: translator.priority,
-        path: translator.path,
-        file: translator.file,
-        lastUpdated: translator.lastUpdated,
-      };
-    }),
+    translatorsInfo: info.translatorsInfo,
   });
 }
 
@@ -356,7 +353,7 @@ browser.runtime.onMessage.addListener(async function (message, sender, _sendResp
       if (info && info.isPDF) {
         console.log("JabRef: Export PDF in tab %o", JSON.parse(JSON.stringify(tab)));
         savePdf(tab);
-      } else if (!info.translators) {
+      } else if (!info.translatorsInfo) {
         console.log("JabRef: No translators, simple saving %o", JSON.parse(JSON.stringify(tab)));
         saveAsWebpage(tab);
       } else {

manifest.json

@@ -100,7 +100,8 @@
         "sources/http.js",
         "sources/webRequestIntercept.js",
         "sources/translateWeb.js",
-        "translators/zotero/*.js"
+        "translators/zotero/*.js",
+        "translators/manifest.json"
       ]
     }
   ],

sources/contentScript.js

@@ -1,6 +1,6 @@
 console.debug("[contentScript] started");
 
-browser.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
+browser.runtime.onMessage.addListener(async (msg, _sender, _sendResponse) => {
   console.debug("[contentScript] received message: %o", msg);
 
   await import(browser.runtime.getURL("./sources/setupZotero.js"));
@@ -35,15 +35,32 @@ browser.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
   };
   Zotero.Translate.ItemSaver.prototype.saveItems = async function (
     jsonItems,
-    attachmentCallback,
-    itemsDoneCallback,
+    _attachmentCallback,
+    _itemsDoneCallback,
   ) {
     return jsonItems;
   };
 
-  if (!msg || msg.type !== "runTranslators") return;
-  const { url, translatorsInfo } = msg;
-  const translators = translatorsInfo.map((info) => {
+  if (!msg) return;
+  const { url } = msg;
+
+  // Dynamic import as workaround for Chrome's content script limitations (no module support)
+  // see https://stackoverflow.com/a/53033388/873661
+  const { createTranslateEngine } = await import(
+    browser.runtime.getURL("./sources/translateEngine.js")
+  );
+  const translateEngine = await createTranslateEngine(url);
+
+  if (msg.type === "detectTranslators") {
+    const translatorsInfo = await translateEngine.detect();
+    return {
+      translatorsInfo,
+    };
+  }
+
+  if (msg.type !== "runTranslators") return;
+
+  const translators = msg.translatorsInfo.map((info) => {
     const translator = new Zotero.Translator(info);
     // Zotero expects the path to be under `file`
     translator.file = {
@@ -56,12 +73,6 @@ browser.runtime.onMessage.addListener(async (msg, sender, sendResponse) => {
     url,
     translators,
   );
-  // Dynamic import as workaround for Chrome's content script limitations (no module support)
-  // see https://stackoverflow.com/a/53033388/873661
-  const { createTranslateEngine } = await import(
-    browser.runtime.getURL("./sources/translateEngine.js")
-  );
-  const translateEngine = await createTranslateEngine(url);
   const result = await translateEngine.translate(document, translators);
   console.debug("Content script obtained translation result %o", result);
   await browser.runtime.sendMessage({ type: "offscreenResult", url, items: result.items });

sources/sandboxManager.js

@@ -72,6 +72,7 @@ class SandboxManager {
 
     let cached = this._moduleCache.get(url);
     if (!cached) {
+      setSandbox(this.sandbox);
       const promise = import(url).then((mod) => {
         cached.module = mod;
         cached.loaded = true;