Implement extension

apps/an-extension/background.ts

@@ -10,10 +10,6 @@ chrome.runtime.onInstalled.addListener(function () {
 
 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",
@@ -22,5 +18,8 @@ chrome.contextMenus.onClicked.addListener(function (info, tab) {
       //     data: info.selectionText,
       //   }),
       // });
+
+      //so you first save it and then send the reponse to the screen
+      chrome.tabs.sendMessage(tab?.id || 1, info.selectionText);
   }
 });

apps/an-extension/content/ContentApp.tsx

@@ -1,45 +1,45 @@
 import React, { useEffect } from "react";
-import tailwindBg from "../public/tailwind_bg.png";
 
 export default function ContentApp() {
   const [text, setText] = React.useState("");
+  const [hover, setHover] = React.useState(false);
 
   useEffect(() => {
     const messageListener = (message: any) => {
       setText(message);
       setTimeout(() => setText(""), 2000);
     };
-
     chrome.runtime.onMessage.addListener(messageListener);
+
+    document.addEventListener('mousemove', (e)=> {
+      const percentageX = (e.clientX / window.innerWidth) * 100;
+      const percentageY = (e.clientY / window.innerHeight) * 100;
+
+      if (percentageX > 75 && percentageY > 75){
+        setHover(true)
+      } else {
+        setHover(false)
+      }
+    })
     return () => {
       chrome.runtime.onMessage.removeListener(messageListener);
     };
   }, []);
 
   return (
-    <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>
-              <img
-                src={tailwindBg}
-                alt=""
-                className="w-[90rem] flex-none max-w-none hidden dark:block"
-                decoding="async"
-              />
-            </picture>
-          </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"></div>
-          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-            Saved: {text}
-          </h2>
-        </div>
+    <div className="pointer-events-none flex justify-end items-end  h-screen w-full absolute z-99999">
+      <div className="h-[30vh] absolute flex justify-end items-center">
+        <div
+          className={`${hover && "opacity-100 "} transition bg-red-600 opacity-0 h-12 w-12 `}
+        ></div>
+      </div>
+
+      <div
+        className={`mx-4 my-2 flex flex-col gap-3 rounded-3xl bg-gray-900 text-xl py-4 px-6 overflow-hidden min-w-[20vw] min-h-24 max-w-96 max-h-40 ${text ? "translate-y-0 opacity-100" : "translate-y-[15%] opacity-0"} transition`}
+      >
+        <h2 className="text-2xl font-extrabold  text-white">Saved!</h2>
+        <h2 className="text-lg font-medium text-white">{text}</h2>
       </div>
     </div>
   );
-}
+}

apps/an-extension/content/content.css

@@ -1,6 +1,9 @@
 #extension-root {
+  pointer-events: none;
   position: fixed;
-  bottom: 0;
-  right: 0;
-  z-index: 99999;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100%;
+  z-index: 999999;
 }

apps/an-extension/content/content.tsx

@@ -11,5 +11,5 @@ function initial() {
   document.body.appendChild(rootDiv)
 
   const root = ReactDOM.createRoot(rootDiv)
-  root.render(<ContentApp />)
+  root.render(<><ContentApp /></>)
 }

apps/an-extension/tailwind.config.js

@@ -6,3 +6,4 @@ module.exports = {
   },
   plugins: []
 }
+module.exports = require("@repo/tailwind-config/tailwind.config");

apps/an-extension/tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "@repo/typescript-config/nextjs.json",
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,

packages/ui/shadcn/use-toast.ts

@@ -3,7 +3,7 @@
 // Inspired by react-hot-toast library
 import * as React from "react";
 
-import type { ToastActionElement, ToastProps } from "packages/ui/src/toast";
+import type { ToastActionElement, ToastProps } from "@repo/ui/shadcn/toast";
 
 const TOAST_LIMIT = 1;
 const TOAST_REMOVE_DELAY = 1000000;