Merge pull request quoid#440 from quoid/refactor/popup_dev

Refactor `popup` development experience

Author: ACTCD

src/page/main.js

@@ -8,7 +8,7 @@ if (import.meta.env.DEV) { // vite feat that only import in dev mode
     const modules = import.meta.glob("../shared/dev.js", {eager: true});
     // eslint-disable-next-line no-global-assign
     browser = modules["../shared/dev.js"].browser;
-    console.log(import.meta.env, modules, browser);
+    console.info("DEV-ENV", import.meta.env, modules, browser);
 }
 
 const app = new App({

src/popup/App.svelte

@@ -392,10 +392,13 @@
 
     async function installCheck(currentTab) {
         // refetch script from URL to avoid tampered DOM content
-        const res = await fetch(currentTab.url);
-        if (!res.ok) {
-            console.error(`Error fetching .user.js url: httpcode-${res.status}`);
-            errorNotification = `Fetching failed, refresh to retry. (${res.status})`;
+        let res; // fetch response
+        try {
+            res = await fetch(currentTab.url);
+            if (!res.ok) throw new Error(`httpcode-${res.status}`);
+        } catch (error) {
+            console.error("Error fetching .user.js url", error);
+            errorNotification = "Fetching failed, refresh to retry.";
             showInstallPrompt = undefined;
             return;
         }
@@ -437,11 +440,11 @@
         showInstall = false;
         // double check before send install message
         if (!installUserscript || !installUserscript.content) {
-            errorNotification = "install failed: userscript missing";
+            errorNotification = "Install failed: userscript missing";
         }
         const currentTab = await browser.tabs.getCurrent();
         if (currentTab.url !== installUserscript.url) {
-            errorNotification = "install failed: tab changed unexpectedly";
+            errorNotification = "Install failed: tab changed unexpectedly";
         }
         if (errorNotification) {
             disabled = false;

src/popup/main.js

@@ -7,7 +7,30 @@ if (import.meta.env.DEV) { // vite feat that only import in dev mode
     const modules = import.meta.glob("../shared/dev.js", {eager: true});
     // eslint-disable-next-line no-global-assign
     browser = modules["../shared/dev.js"].browser;
-    console.log(import.meta.env, modules, browser);
+    console.info("DEV-ENV", import.meta.env, modules, browser);
+    // macos popup style
+    const style = document.createElement("style");
+    style.textContent = `
+body {
+    top: 20px;
+    left: 20px;
+    box-sizing: content-box;
+    border: 2px solid #0c0e0f;
+    border-radius: 10px;
+    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
+}
+body:before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border: 1px solid #54575a;
+    border-radius: 9px;
+}
+`;
+    browser.platform === "macos" && document.head.append(style);
 }
 
 const app = new App({

src/shared/dev.js

@@ -64,7 +64,7 @@ const files = [
 
 const _browser = {
     delay: 200,
-    platform: "ios",
+    platform: "macos", // ios || macos
     runtime: {
         getURL() {
             return "https://www.example.com/";
@@ -360,6 +360,20 @@ const _browser = {
                         ]
                     };
                 }
+            } else if (name === "POPUP_INSTALL_CHECK") {
+                response = random([
+                    {success: "Click to install", installed: false},
+                    {success: "Click to re-install", installed: true}
+                ]);
+                response.metadata = {
+                    description: "This userscript re-implements the \"View Image\" and \"Search by image\" buttons into google images.",
+                    grant: ["GM.getValue", "GM.setValue", "GM.xmlHttpRequest"],
+                    match: ["https://www.example.com/*", "https://www.example.com/somethingReallylong/goesRightHere"],
+                    name: "Test Install Userscript",
+                    require: ["https://code.jquery.com/jquery-3.5.1.min.js", "https://code.jquery.com/jquery-1.7.1.min.js"],
+                    source: "https://greasyforx.org/scripts/00000-something-something-long-name/code/Something%20something%20long20name.user.js"
+                };
+                // response.error = "something went wrong (dev)";
             }
             if (!responseCallback) {
                 return new Promise(resolve => {
@@ -376,7 +390,13 @@ const _browser = {
     },
     tabs: {
         getCurrent(/* responseCallback */) {
-            const response = {url: "https://www.filmgarb.com/foo.user.js", id: 101};
+            const response = random([
+                {url: "https://www.filmgarb.com/foo.user.js", id: 101},
+                {url: `${window.location.origin}/src/shared/dev/DEMO.Alert-URL.user.js`, id: 102},
+                {url: `${window.location.origin}/src/shared/dev/DEMO.Alert-URL.user.js`, id: 103}, // increase probability
+                {url: window.location.href, id: 10}
+            ]);
+            console.info("browser.tabs.getCurrent", response);
             return new Promise(resolve => {
                 setTimeout(() => resolve(response), _browser.delay);
             });
@@ -392,18 +412,8 @@ const _browser = {
         },
         sendMessage(tabId, message, responseCallback) {
             let response = {};
-            if (message.name === "POPUP_INSTALL_CHECK") {
-                response = {
-                    success: "Click to install (test)",
-                    metadata: {
-                        description: "This userscript re-implements the \"View Image\" and \"Search by image\" buttons into google images.",
-                        grant: ["GM.getValue", "GM.setValue", "GM.xmlHttpRequest"],
-                        match: ["https://www.example.com/*", "https://www.example.com/somethingReallylong/goesRightHere"],
-                        name: "Test Install Userscript",
-                        require: ["https://code.jquery.com/jquery-3.5.1.min.js", "https://code.jquery.com/jquery-1.7.1.min.js"],
-                        source: "https://greasyforx.org/scripts/00000-something-something-long-name/code/Something%20something%20long20name.user.js"
-                    }
-                };
+            if (message.name === "DEMO_MSG") {
+                response = {};
                 // response.error = "something went wrong (dev)";
             }
             if (!responseCallback) {
@@ -481,6 +491,10 @@ function saveFile(content, lastMod, newFilename, oldName) {
     }
 }
 
+function random(array) {
+    return array[Math.floor(Math.random() * array.length)];
+}
+
 export const browser = _browser;
 
 export default {

src/shared/dev/DEMO.Alert-URL.user.js

@@ -0,0 +1,16 @@
+// ==UserScript==
+// @name               DEMO.Alert-URL
+// @description        Demo user script alert URL.
+// @author             Userscripts
+// @version            1.0.0
+// @match              *://*/*
+// @grant              none
+// @inject-into        content
+// @run-at             document-start
+// ==/UserScript==
+
+/* eslint-disable */
+(function () {
+    'use strict';
+    alert("DEBUG.Alert-URL:\n\n" + location);
+})();