feat(chrome): create extension 💪

web/chrome-extension/background.js

@@ -0,0 +1,67 @@
+// const CLIPDROP_DOMAIN = 'http://localhost:3000'
+const CLIPDROP_DOMAIN =
+  'https://clipdrop-home-git-chore-stack-structureimage-url-clipdrop.vercel.app'
+// const CLIPDROP_DOMAIN = 'https://clipdrop.co'
+
+const PROXY_DOMAIN = 'http://localhost:3001'
+
+function transferToClipDropApp(app, targetUrl) {
+  const url = `${CLIPDROP_DOMAIN}/${app}?i=${encodeURIComponent(targetUrl)}`
+  chrome.tabs.create({ url })
+}
+
+function setContextsMenu() {
+  chrome.contextMenus.create({
+    id: '@initml/remove-background',
+    title: 'Remove Background',
+    contexts: ['image'],
+  })
+
+  chrome.contextMenus.create({
+    id: '@initml/enhance',
+    title: 'Image Upscaler',
+    contexts: ['image'],
+  })
+
+  chrome.contextMenus.create({
+    id: '@initml/cleanup',
+    title: 'Cleanup',
+    contexts: ['image'],
+  })
+
+  chrome.contextMenus.create({
+    id: '@initml/relight',
+    title: 'Relight',
+    contexts: ['image'],
+  })
+
+  chrome.contextMenus.onClicked.addListener((info, tab) => {
+    switch (info.menuItemId) {
+      case '@initml/remove-background': {
+        const targetUrl = info.srcUrl
+        transferToClipDropApp('remove-background', targetUrl)
+        break
+      }
+      case '@initml/enhance': {
+        const targetUrl = info.srcUrl
+        transferToClipDropApp('image-upscaler', targetUrl)
+        break
+      }
+      case '@initml/cleanup': {
+        const targetUrl = info.srcUrl
+        transferToClipDropApp('cleanup', targetUrl)
+        break
+      }
+      case '@initml/relight': {
+        const targetUrl = info.srcUrl
+        transferToClipDropApp('relight', targetUrl)
+        break
+      }
+      default:
+        console.warn('Unknown menu item clicked', info)
+        break
+    }
+  })
+}
+
+setContextsMenu()

web/chrome-extension/manifest.json

@@ -0,0 +1,16 @@
+{
+  "name": "ClipDrop",
+  "description": "ClipDrop power on every web page",
+  "version": "1.0.1",
+  "manifest_version": 3,
+  "permissions": ["contextMenus"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "icons": {
+    "16": "/images/get_started16.png",
+    "32": "/images/get_started32.png",
+    "48": "/images/get_started48.png",
+    "128": "/images/get_started128.png"
+  }
+}