Merge pull request #2 from Termina/mobile

make UI mobile friendly

.github/workflows/upload.yaml

@@ -19,7 +19,7 @@ jobs:
 
     - uses: calcit-lang/[email protected]
       with:
-        version: '0.9.0-a1'
+        version: '0.9.1'
 
     - name: "compiles to js"
       run: >

.gitignore

@@ -7,3 +7,5 @@ node_modules/
 dist/
 
 .DS_Store
+
+extension/dist

assets/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Msg Gemini",
+  "name": "Msg Gemini",
+  "icons": [
+    {
+      "src": "https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/google-gemini-icon.png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "/Termina/msg-buffer/index.html",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#ffffff",
+  "theme_color": "#ffffff"
+}

extension/content.js

@@ -0,0 +1,24 @@
+// Listen for messages
+chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
+  // If the received message has the expected format...
+  console.log("[Side Message] msg", msg);
+  if (msg.get === "selected") {
+    // Call the specified callback, passing
+    // the web-page's DOM content as argument
+    sendResponse(getSelectedText());
+  }
+});
+
+let getSelectedText = () => {
+  if (window.getSelection) {
+    // 标准浏览器
+    return window.getSelection().toString();
+  } else if (document.selection) {
+    // IE 浏览器
+    return document.selection.createRange().text;
+  } else {
+    return "<未获取到内容>";
+  }
+};
+
+console.log("[Side Message] prepared content script");

extension/get-selected.mjs

@@ -0,0 +1,54 @@
+export let get_selected = () => {
+  return new Promise((resolve, reject) => {
+    if (chrome?.runtime?.id == null) {
+      console.warn("not chrome extension runtime...");
+      resolve(null);
+      return;
+    }
+    console.log("calling content script...");
+    chrome.tabs
+      .query({ active: true, currentWindow: true })
+      .then((x) => {
+        let activeTab = x[0];
+        if (activeTab) {
+          let id = activeTab.id;
+          chrome.tabs.sendMessage(id, { get: "selected" }, function (response) {
+            // 接收来自 content.js 的返回数据
+            // console.info('Content script returned: ' + response);
+            resolve(response);
+          });
+        } else {
+          reject("found not active tab");
+        }
+      })
+      .catch((error) => {
+        console.error("Error", error);
+      });
+  });
+};
+
+//   setTimeout(()=>{
+//   chrome.tabs.query({active: true, currentWindow: true}).then(x => {
+//     let activeTab = x[0]
+//     if (activeTab) {
+//       let id = activeTab.id
+//       chrome.tabs.sendMessage(id, {get: 'selected'}, function(response) {
+//         // 接收来自 content.js 的返回数据
+//         console.info('Content script returned: ' + response);
+//       });
+
+//     } else {
+//       throw Error("no active tab found")
+//     }
+//   })
+// }, 2000)
+
+// chrome.scripting.executeScript({
+//   target: { tabId: 1201634844 },
+//   function: () => { console.log(document.body.innerText) }
+// });
+
+// chrome.tabs.sendMessage(1201634844, {get: 'selected'}, function(response) {
+//   // 接收来自 content.js 的返回数据
+//   console.info('Content script returned: ' + response.message);
+// });

extension/manifest.json

@@ -0,0 +1,26 @@
+{
+  "manifest_version": 3,
+  "name": "Msg Gemini",
+  "version": "1.0",
+  "description": "interact with Gemini",
+  "background": {
+    "service_worker": "service-worker.js"
+  },
+  "action": {
+    "default_title": "Click to open panel"
+  },
+  "icons": {
+    "128": "gemini-icon.png"
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "match_origin_as_fallback": true,
+      "js": ["content.js"]
+    }
+  ],
+  "side_panel": {
+    "default_path": "dist/index.html"
+  },
+  "permissions": ["sidePanel", "scripting", "activeTab", "tabs", "contextMenus"]
+}

extension/service-worker.js

@@ -0,0 +1,39 @@
+let sidepanelOpen = false;
+
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
+});
+
+chrome.runtime.onInstalled.addListener(async () => {
+  chrome.contextMenus.create({
+    id: "msg-gemeni-selection",
+    title: "Msg Gemini",
+    type: "normal",
+    contexts: ["selection"],
+  });
+});
+
+chrome.contextMenus.onClicked.addListener((item, tab) => {
+  let content = item.selectionText;
+  chrome.runtime.sendMessage({ action: "menu-trigger", content });
+  chrome.sidePanel.open({ tabId: tab.id }, () => {
+    // also try to open
+    if (!sidepanelOpen) {
+      setTimeout(() => {
+        chrome.runtime.sendMessage({ action: "menu-trigger", content });
+      }, 1000);
+    }
+  });
+});
+
+// https://stackoverflow.com/a/77106777/883571
+chrome.runtime.onConnect.addListener(function (port) {
+  if (port.name === "mySidepanel") {
+    sidepanelOpen = true;
+    console.log("Sidepanel opened.");
+    port.onDisconnect.addListener(async () => {
+      sidepanelOpen = false;
+      console.log("Sidepanel closed.");
+    });
+  }
+});

index.html

@@ -5,6 +5,7 @@
 <head>
   <title>Gemini Msg</title>
   <link href="https://uxwing.com/wp-content/themes/uxwing/download/brands-and-social-media/google-gemini-icon.png" rel="icon" type="image/png" />
+  <link rel="manifest" href="./assets/manifest.json">
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.tiye.me/favored-fonts/main-fonts.css">

package.json

@@ -1,14 +1,17 @@
 {
   "dependencies": {
-    "@calcit/procs": "^0.9.0",
+    "@calcit/procs": "^0.9.1",
     "@google/generative-ai": "^0.16.0",
-    "axios": "^1.7.2",
+    "axios": "^1.7.3",
     "cirru-color": "^0.2.4",
     "copy-text-to-clipboard": "^3.2.0"
   },
   "devDependencies": {
     "bottom-tip": "^0.1.5",
     "vite": "^5.3.5"
   },
+  "scripts": {
+    "build": "yarn vite build --base ./ && rm -rfv extension/dist && cp -vr dist extension/"
+  },
   "version": "0.0.1"
 }

vite.config.mjs

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    minify: false
+  }
+});