Improve post to lens processing

typeling1578 · Nov 21, 2024 · 3a34888 · 3a34888
1 parent 1dabf0f
commit 3a34888
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 35 deletions.
diff --git a/background.mjs b/background.mjs
@@ -120,9 +120,11 @@ async function search_on_google_lens(image_url, tab) {
         reader.readAsDataURL(image_data_processed);
     });
 
-    browser.tabs.sendMessage(tab.id, {
-        type: "open-new-tab",
-        data_url: image_data_processed_dataurl,
+    browser.tabs.create({
+        url: `${browser.runtime.getURL("/post_to_lens.html")}?image_data_url=${encodeURIComponent(image_data_processed_dataurl)}`,
+        windowId: tab.windowId ?? undefined,
+        openerTabId: tab.id ?? undefined,
+        active: !settings.get("local", "newTabsLoadInBackground"),
     });
 
     browser.tabs.sendMessage(tab.id, { type: "google-post-end" });

diff --git a/content_script.js b/content_script.js
@@ -39,38 +39,6 @@ browser.runtime.onMessage.addListener(async function (message) {
             elem.remove();
             alert(browser.i18n.getMessage("sendingImageError"));
             break;
-        case "open-new-tab":
-            const container = document.createElement("div");
-            container.style.display = "none";
-            document.body.appendChild(container);
-
-            const form = document.createElement("form");
-            form.action = `https://lens.google.com/v3/upload?ep=ccm&s=&st=${Date.now()}`;
-            form.method = "POST";
-            form.enctype = "multipart/form-data";
-            form.target = "_blank";
-            container.appendChild(form);
-
-            const file_input = document.createElement("input");
-            file_input.type = "file";
-            file_input.name = "encoded_image";
-            form.appendChild(file_input);
-
-            const pid_input = document.createElement("input");
-            pid_input.type = "text";
-            pid_input.name = "processed_image_dimensions";
-            pid_input.value = "1000,1000";
-
-            const result = await fetch(message.data_url);
-            const file = new Blob([await result.arrayBuffer()]);
-            const data_transfer = new DataTransfer();
-            const file_obj = new File([file], "image.jpg", { type: "image/jpeg" });
-            data_transfer.items.add(file_obj);
-            file_input.files = data_transfer.files;
-
-            form.submit();
-
-            container.remove();
         default:
             break;
     }

diff --git a/post_to_lens.html b/post_to_lens.html
@@ -0,0 +1,21 @@
+<!--
+  This Source Code Form is subject to the terms of the Mozilla Public
+  License, v. 2.0. If a copy of the MPL was not distributed with this
+  file, You can obtain one at http://mozilla.org/MPL/2.0/.
+-->
+
+<html>
+    <head>
+        <link rel="stylesheet" href="color.css">
+    </head>
+    <body style="height: 100vh;font-family: sans-serif;">
+        <div id="search_on_google_lens_elem" style="position: fixed; text-align: center; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000000;">
+            <div style="position: absolute; top: 50%; left: 50%; color: white; transform: translate(-50%, -50%); font-size: 50px; white-space: nowrap;">
+                <img style="width: 60px; height: 60px;" src="/loading.svg"></img>
+                <div class="i18n-text" data-i18n-id="sendingImage"></div>
+            </div>
+        </div>
+        <script src="l10n.js"></script>
+        <script type="module" src="./post_to_lens.mjs"></script>
+    </body>
+</html>
diff --git a/post_to_lens.mjs b/post_to_lens.mjs
@@ -0,0 +1,44 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+(async () => {
+    const params = new URLSearchParams(window.location.search);
+    const image_data_url = decodeURIComponent(params.get("image_data_url") ?? "");
+    if (!image_data_url) {
+        return;
+    }
+
+    const container = document.createElement("div");
+    container.style.display = "none";
+    document.body.appendChild(container);
+
+    const form = document.createElement("form");
+    form.action = `https://lens.google.com/v3/upload?ep=ccm&s=&st=${Date.now()}`;
+    form.method = "POST";
+    form.enctype = "multipart/form-data";
+    // form.target = "_blank";
+    container.appendChild(form);
+
+    const file_input = document.createElement("input");
+    file_input.type = "file";
+    file_input.name = "encoded_image";
+    form.appendChild(file_input);
+
+    const pid_input = document.createElement("input");
+    pid_input.type = "text";
+    pid_input.name = "processed_image_dimensions";
+    pid_input.value = "1000,1000";
+
+    const result = await fetch(image_data_url);
+    const file = new Blob([await result.arrayBuffer()]);
+    const data_transfer = new DataTransfer();
+    const file_obj = new File([file], "image.jpg", { type: "image/jpeg" });
+    data_transfer.items.add(file_obj);
+    file_input.files = data_transfer.files;
+
+    form.submit();
+
+    container.remove();
+})();