feat: more work on Manifest V3 support, new screenshots

m4tx · Oct 30, 2024 · 926a034 · 926a034
1 parent 5b33af4
commit 926a034
Show file tree

Hide file tree

Showing 26 changed files with 137 additions and 445 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ satori-enhancements is a WebExtension built for Jagiellonian University's
 to improve usability, ease of use and add some useful features, that should
 have been there since the beginning (but for some reason, they aren't).
 
-![Satori Enhancements results page](screenshots/results.png)
+![Satori Enhancements results page](screenshots/results-2x.png)
 
 ## Features
 

diff --git a/ext/html/offscreen.html b/ext/html/offscreen.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<script src="/vendor/browser-polyfill.js"></script>
+<script src="/js/config.js"></script>
+<script src="/vendor/bower/jquery.min.js"></script>
+<script src="/js/common.js"></script>
+<script src="/js/offscreen.js"></script>
diff --git a/ext/js/background.js b/ext/js/background.js
@@ -1,3 +1,7 @@
+if (typeof importScripts !== 'undefined') {
+    importScripts('../vendor/browser-polyfill.js', 'config.js', 'common.js');
+}
+
 (function () {
     'use strict';
 
@@ -16,6 +20,21 @@
 
     const contestProblemList = {};
 
+    /**
+     * The offscreen document being currently created, if any.
+     */
+    let offscreenBeingCreated;
+
+    /**
+     * Return the web browser name this extension is running on.
+     * @returns {string} 'chrome' or 'firefox' depending on the browser
+     */
+    function currentBrowser() {
+        return browser.runtime.getURL('').startsWith('chrome-extension://')
+            ? 'chrome'
+            : 'firefox';
+    }
+
     function displayStatusNotification(submitID, problemCode, status) {
         browser.notifications.create({
             type: 'basic',
@@ -48,14 +67,14 @@
     }
 
     /**
-     * Display extension's page action.
-     * @param tab tab object
+     * Display extension's action.
      */
-    function enablePageAction(tab) {
-        browser.pageAction.show(tab.id);
-        browser.pageAction.onClicked.addListener(() =>
-            browser.runtime.openOptionsPage(),
-        );
+    function enableAction() {
+        const listener = () => {
+            browser.runtime.openOptionsPage();
+        };
+
+        browser.action.onClicked.addListener(listener);
     }
 
     /**
@@ -139,7 +158,7 @@
                             url: SATORI_URL_CONTEST + lastContestID + '/',
                         },
                     },
-                }))
+                })),
             );
         }
         browser.declarativeNetRequest.updateSessionRules({
@@ -180,17 +199,18 @@
     /**
      * Add highlight.js CSS to the page using the selected style.
      */
-    function injectHighlightJsCss(tab) {
-        storage
+    async function injectHighlightJsCss(tab) {
+        await storage
             .get({
                 [HIGHLIGHT_JS_STYLE_KEY]:
                     DEFAULT_SETTINGS[HIGHLIGHT_JS_STYLE_KEY],
             })
-            .then((response) => {
+            .then(async (response) => {
                 let style = response.highlightJsStyle;
                 if (style !== 'none') {
-                    browser.tabs.insertCSS(tab.id, {
-                        file: `vendor/bower/hjsstyles/${style}.css`,
+                    await browser.scripting.insertCSS({
+                        files: [`vendor/bower/hjsstyles/${style}.css`],
+                        target: { tabId: tab.id },
                     });
                 }
             });
@@ -285,16 +305,58 @@
                 if (!response.ok) {
                     throw new Error(`HTTP Status ${response.status}`);
                 }
-                contestProblemList[contestID] = parseProblemList(
-                    $.parseHTML(await response.text()),
-                );
+                const responseText = await response.text();
+
+                if (currentBrowser() === 'chrome') {
+                    await setupOffscreenDocument('/html/offscreen.html');
+                    const parseResponse = await chrome.runtime.sendMessage({
+                        type: 'parseProblemList',
+                        target: 'offscreen',
+                        data: responseText,
+                    });
+                    await chrome.offscreen.closeDocument();
+
+                    contestProblemList[contestID] = parseResponse;
+                } else {
+                    contestProblemList[contestID] =
+                        parseProblemList(responseText);
+                }
             } catch (error) {
                 console.error(error);
             }
         }
         return contestProblemList[contestID] ?? {};
     }
 
+    /**
+     * Setup offscreen document for parsing HTML
+     * @param path path to the offscreen document
+     * @returns {Promise<void>} promise that resolves when the document is ready
+     */
+    async function setupOffscreenDocument(path) {
+        const offscreenUrl = chrome.runtime.getURL(path);
+        const existingContexts = await chrome.runtime.getContexts({
+            contextTypes: ['OFFSCREEN_DOCUMENT'],
+            documentUrls: [offscreenUrl],
+        });
+
+        if (existingContexts.length > 0) {
+            return;
+        }
+
+        if (offscreenBeingCreated) {
+            await offscreenBeingCreated;
+        } else {
+            offscreenBeingCreated = chrome.offscreen.createDocument({
+                url: path,
+                reasons: [chrome.offscreen.Reason.DOM_PARSER],
+                justification: 'Parse DOM',
+            });
+            await offscreenBeingCreated;
+            offscreenBeingCreated = null;
+        }
+    }
+
     /**
      * Save joined contest list in Storage
      * @param {array} contestList contest list
@@ -316,24 +378,28 @@
     });
     setUpSessionCookies();
 
-    browser.runtime.onMessage.addListener((request, sender) => {
-        if (request.action === 'enablePageAction') {
-            enablePageAction(sender.tab);
+    browser.runtime.onMessage.addListener(async (request, sender) => {
+        if (request.action === 'enableAction') {
+            enableAction(sender.tab);
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'saveLastContestID') {
             saveLastContestID(getContestID(sender.url));
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'displayStatusNotification') {
             displayStatusNotification(
                 request.submitID,
                 request.problemCode,
                 request.problemStatus,
             );
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'modifyContestItemList') {
             modifyContestItemList(
                 request.listName,
                 getContestID(sender.url),
                 request.value,
                 request.add,
             );
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'getContestItemList') {
             return new Promise((resolve) => {
                 getContestItemList(
@@ -343,16 +409,21 @@
                 );
             });
         } else if (request.action === 'injectHighlightJsCss') {
-            injectHighlightJsCss(sender.tab);
+            await injectHighlightJsCss(sender.tab);
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'saveContestProblemList') {
             saveContestProblemList(request.contestID, request.problems);
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'getContestProblemList') {
             return getProblemList(request.contestID);
         } else if (request.action === 'setJoinedContestList') {
             saveJoinedContestList(request.contestList);
+            return new Promise((resolve) => resolve(null));
         } else if (request.action === 'getJoinedContestList') {
             return getJoinedContestList();
         }
-        return new Promise((resolve) => resolve(null));
+
+        console.warn(`Unexpected message type received: '${request.action}'.`);
+        return false;
     });
 })();
diff --git a/ext/js/common.js b/ext/js/common.js
@@ -27,7 +27,9 @@ if (typeof module !== 'undefined') {
     };
 }
 
-function parseProblemList(jqueryHandles) {
+function parseProblemList(htmlText) {
+    const jqueryHandles = $.parseHTML(htmlText);
+
     return Object.fromEntries(
         jqueryHandles.flatMap((el) =>
             [

diff --git a/ext/js/general.js b/ext/js/general.js
@@ -1,7 +1,7 @@
 (function () {
     'use strict';
 
-    browser.runtime.sendMessage({ action: 'enablePageAction' });
+    browser.runtime.sendMessage({ action: 'enableAction' });
 
     const BANNER_URL = browser.runtime.getURL('images/satori_banner.png');
     const TCS_LOGO_URL = browser.runtime.getURL('images/tcslogo.svg');

diff --git a/ext/js/offscreen.html b/ext/js/offscreen.html
diff --git a/ext/js/offscreen.js b/ext/js/offscreen.js
@@ -1,48 +1,12 @@
-importScripts(
-    "../vendor/browser-polyfill.js",
-    "config.js",
-    "../vendor/bower/jquery.min.js"
-);
-
-browser.runtime.onMessage.addListener(handleMessages);
-
-async function handleMessages(message) {
-    if (message.target !== 'offscreen') {
+browser.runtime.onMessage.addListener(async (request) => {
+    if (request.target !== 'offscreen') {
         return false;
     }
 
-    if (message.type === 'parseProblemList') {
-        parseProblemList(message.data);
-    } else {
-        console.warn(`Unexpected message type received: '${message.type}'.`);
-        return false;
+    if (request.type === 'parseProblemList') {
+        return parseProblemList(request.data);
     }
-}
-
-function parseProblemList(htmlText) {
-    const jqueryHandles = $.parseHTML(htmlText);
-
-    return Object.fromEntries(
-        jqueryHandles.flatMap((el) =>
-            [
-                ...$(el).find('#content table.results tr:not(:first-of-type)'),
-            ].map((tr) => [
-                $(tr).find('td:nth-child(1)').text(),
-                {
-                    title: $(tr).find('td:nth-child(2)').text(),
-                    href: $(tr).find('td:nth-child(2) a').attr('href'),
-                    pdfHref: $(tr).find('td:nth-child(3) a').attr('href'),
-                    submitHref: $(tr).find('td:nth-child(5) a').attr('href'),
-                },
-            ]),
-        ),
-    );
-}
 
-function sendToBackground(type, data) {
-    browser.runtime.sendMessage({
-        type,
-        target: 'background',
-        data
-    });
-}
+    console.warn(`Unexpected message type received: '${request.type}'.`);
+    return false;
+});
diff --git a/ext/js/results.js b/ext/js/results.js
@@ -17,10 +17,7 @@
     let problemStatus = tr.find('td:last').text();
 
     let url = document.location.href;
-    console.log("XD");
     const contestID = getContestID(url);
-    console.log("XD2");
-
 
     /**
      * Get submit extension if possible