From abafe549b8a07ae4802455aa0d49f8feac746bf4 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Sun, 5 Mar 2023 03:47:06 +0800 Subject: [PATCH 1/4] fix: try catch error when fetch url --- src/popup/App.svelte | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/popup/App.svelte b/src/popup/App.svelte index 9a9d57ec..29e38d71 100644 --- a/src/popup/App.svelte +++ b/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; } From a6d905837b4bf06a20ff4a7313f2f4144d2575c9 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Sun, 5 Mar 2023 03:52:22 +0800 Subject: [PATCH 2/4] refactor: popup dev experience --- src/page/main.js | 2 +- src/popup/main.js | 24 ++++++++++++++- src/shared/dev.js | 42 ++++++++++++++++++--------- src/shared/dev/DEMO.Alert-URL.user.js | 16 ++++++++++ 4 files changed, 68 insertions(+), 16 deletions(-) create mode 100644 src/shared/dev/DEMO.Alert-URL.user.js diff --git a/src/page/main.js b/src/page/main.js index 1588a92b..0c38b58f 100644 --- a/src/page/main.js +++ b/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({ diff --git a/src/popup/main.js b/src/popup/main.js index 4088e5b4..25be0c37 100644 --- a/src/popup/main.js +++ b/src/popup/main.js @@ -7,7 +7,29 @@ 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; +} +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({ diff --git a/src/shared/dev.js b/src/shared/dev.js index b376101d..5bf75d5d 100644 --- a/src/shared/dev.js +++ b/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 { diff --git a/src/shared/dev/DEMO.Alert-URL.user.js b/src/shared/dev/DEMO.Alert-URL.user.js new file mode 100644 index 00000000..97868afb --- /dev/null +++ b/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); +})(); \ No newline at end of file From a2516e2a7c980cf563ac03e3e23ae4b969131a86 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Sun, 5 Mar 2023 04:09:29 +0800 Subject: [PATCH 3/4] chore: fine-tune message case --- src/popup/App.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/popup/App.svelte b/src/popup/App.svelte index 29e38d71..70f45885 100644 --- a/src/popup/App.svelte +++ b/src/popup/App.svelte @@ -440,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; From 8e5a88f5989edd0d020cdfc22cbb2418b64a6495 Mon Sep 17 00:00:00 2001 From: ACTCD <101378590+ACTCD@users.noreply.github.com> Date: Sun, 5 Mar 2023 04:22:57 +0800 Subject: [PATCH 4/4] style: add box-shadow to popup in dev mode --- src/popup/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/popup/main.js b/src/popup/main.js index 25be0c37..23e0ab93 100644 --- a/src/popup/main.js +++ b/src/popup/main.js @@ -17,6 +17,7 @@ body { 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: "";