Implemented Highlight in Extension

apps/an-extension/background.ts

@@ -1 +1,26 @@
-console.log('Hello from the background script!')
+chrome.runtime.onInstalled.addListener(function () {
+    let context = 'selection';
+    let title = "Supermemory - Save Highlight";
+    chrome.contextMenus.create({
+      title: title,
+      contexts: ['selection'],
+      id: context,
+    });
+});
+
+chrome.contextMenus.onClicked.addListener(function (info, tab) {
+  if (info.menuItemId === 'selection') {
+      console.log(info.pageUrl)
+      chrome.tabs.sendMessage(tab?.id || 1, info.selectionText);
+      console.log(info.selectionText)
+
+      // you can add a link to a cf worker or whatever u want
+      // fetch("", {
+      //   method: "POST",
+      //   headers: { "Content-Type": "application/json" },
+      //   body: JSON.stringify({
+      //     data: info.selectionText,
+      //   }),
+      // });
+  }
+});

apps/an-extension/content/ContentApp.tsx

@@ -1,29 +1,26 @@
-import React from 'react'
-import reactLogo from '../public/react.png'
-import tailwindBg from '../public/tailwind_bg.png'
-import typescriptLogo from '../public/typescript.png'
-import tailwindLogo from '../public/tailwind.png'
-import chromeWindowBg from '../public/chromeWindow.png'
+import React, { useEffect } from "react";
+import tailwindBg from "../public/tailwind_bg.png";
 
 export default function ContentApp() {
-  const [isdialogOpen, setIsDialogOpen] = React.useState(true)
+  const [text, setText] = React.useState("");
 
-  if (!isdialogOpen) {
-    return (
-      <div className="mx-auto p-6">
-        <button
-          onClick={() => setIsDialogOpen(true)}
-          className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-        >
-          🧩 Open content script hint <span aria-hidden="true">+</span>
-        </button>
-      </div>
-    )
-  }
+  useEffect(() => {
+    const messageListener = (message: any) => {
+      setText(message);
+      setTimeout(() => setText(""), 2000);
+    };
+
+    chrome.runtime.onMessage.addListener(messageListener);
+    return () => {
+      chrome.runtime.onMessage.removeListener(messageListener);
+    };
+  }, []);
 
   return (
-    <div className="mx-auto max-w-7xl md:px-0 lg:p-6">
-      <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+    <div
+      className={`pointer-events-none ${text ? "opacity-100" : "opacity-0"} transition mx-auto max-w-7xl md:px-0 lg:px-6 lg:py-2`}
+    >
+      <div className="relative isolate overflow-hidden bg-gray-900 px-6 py-4 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
         <div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
           <div className="w-[108rem] flex-none flex justify-end">
             <picture>
@@ -37,51 +34,12 @@ export default function ContentApp() {
           </div>
         </div>
         <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
-          <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
-            <img
-              alt="React logo"
-              src={reactLogo}
-              className="relative inline-block w-12"
-            />
-            <div className="text-3xl text-white">+</div>
-            <img
-              alt="TypeScript logo"
-              src={typescriptLogo}
-              className="relative inline-block w-12"
-            />
-            <div className="text-3xl text-white">+</div>
-            <img
-              alt="Tailwind logo"
-              src={tailwindLogo}
-              className="relative inline-block w-12"
-            />
-          </div>
+          <div className="flex items-center justify-center space-x-4 my-4 mx-auto"></div>
           <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-            This is a content script running React, TypeScript, and
-            Tailwind.css.
+            Saved: {text}
           </h2>
-          <p className="mt-6 text-lg leading-8 text-gray-300">
-            Learn more about creating cross-browser extensions by{' '}
-            <button
-              onClick={() => setIsDialogOpen(false)}
-              className="underline hover:no-underline
-            "
-            >
-              closing this hint
-            </button>
-            .
-          </p>
-        </div>
-        <div className="relative mt-16 h-80 lg:mt-8">
-          <img
-            className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
-            src={chromeWindowBg}
-            alt="Chrome window screenshot"
-            width="1824"
-            height="1080"
-          />
         </div>
       </div>
     </div>
-  )
+  );
 }

apps/an-extension/content/content.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactDOM from 'react-dom/client'
 import ContentApp from './ContentApp'
 import('./base.css')
@@ -7,13 +6,10 @@ import('./content.css')
 setTimeout(initial, 1000)
 
 function initial() {
-  // Create a new div element and append it to the document's body
   const rootDiv = document.createElement('div')
   rootDiv.id = 'extension-root'
   document.body.appendChild(rootDiv)
 
-  // Use `createRoot` to create a root, then render the <App /> component
-  // Note that `createRoot` takes the container DOM node, not the React element
   const root = ReactDOM.createRoot(rootDiv)
   root.render(<ContentApp />)
 }

apps/an-extension/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>God Bless Vanilla JavaScript!!!</title>
+</head>
+<body>
+  <h1>hello World! Follow <a href="https://x.com/supermemoryai">@supermemoryai</a></h1>
+</body>
+</html>

apps/an-extension/manifest.json

@@ -1,15 +1,21 @@
 {
+  "name": "Supermemory.ai-Extension",
+  "description": "Uses the chrome.contextMenus API to customize the context menu.",
+  "version": "0.1",
+  "permissions": [
+    "contextMenus"
+  ],
   "manifest_version": 3,
-  "version": "1.0",
-  "name": "an-extension",
-  "description": "An extension template using React and TypeScript. This template includes a content script using Tailwind.css. To see it in action, visit https://extension.js.org.",
+  "action": {
+    "default_popup": "index.html"
+  },
   "background": {
     "service_worker": "./background.ts"
   },
   "content_scripts": [
     {
       "matches": [
-        "https://extension.js.org/*"
+        "<all_urls>"
       ],
       "js": [
         "./content/content.tsx"
@@ -17,7 +23,7 @@
     }
   ],
   "icons": {
-    "16": "public/icon/icon_16.png",
-    "48": "public/icon/icon_48.png"
+    "16": "public/icon/logo(16).png",
+    "48": "public/icon/logo(48).png"
   }
 }