Add Extension (1/2)

apps/extension/README.md

@@ -0,0 +1,37 @@
+# [projectName]
+
+> This project was bootstrapped using the Extension.js React-TypeScript template.
+
+## Scripts Available
+
+In the project directory, you can run:
+
+### [projectPackageManager] dev
+
+```
+// Runs the app in the development mode.
+// Will open a new browser instance with your extension loaded.
+// The page will reload when you make changes.
+[projectPackageManager] dev
+```
+
+### [projectPackageManager] start
+
+```
+// Runs the app in the production mode.
+// Will open a new browser instance with your extension loaded.
+// This is how your browser extension will work once published.
+[projectPackageManager] start
+```
+
+### [projectPackageManager] build
+
+```
+// Builds the app for production.
+// Bundles your browser extension in production mode for the target browser.
+[projectPackageManager] run build
+```
+
+## Learn More
+
+You can learn more in the [Extension.js](https://extension.js.org) documentation.

apps/extension/background.ts

@@ -0,0 +1,25 @@
+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') {
+    // 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,
+    //   }),
+    // });
+
+    //so you first save it and then send the reponse to the screen
+    chrome.tabs.sendMessage(tab?.id || 1, info.selectionText);
+}
+});

apps/extension/content/ContentApp.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect } from "react";
+
+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 flex justify-end items-end  h-screen w-full absolute z-99999">
+      <div className="h-[30vh] bg-red-500 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/extension/content/base.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/extension/content/content.css

@@ -0,0 +1,6 @@
+#extension-root {
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  z-index: 99999;
+}

apps/extension/content/content.tsx

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom/client'
+import ContentApp from './ContentApp'
+import('./base.css')
+import('./content.css')
+
+setTimeout(initial, 4000)
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  const root = ReactDOM.createRoot(rootDiv)
+  root.render(<><ContentApp /></>)
+}

apps/extension/extension-env.d.ts

@@ -0,0 +1,9 @@
+// Required Extension.js types for TypeScript projects.
+// This file is auto-generated and should not be excluded.
+// If you need extra types, consider creating a new *.d.ts and
+// referencing it in the "include" array in your tsconfig.json file.
+// See https://www.typescriptlang.org/tsconfig#include for info.
+/// <reference types="@extension-create/develop/dist/types/index.d.ts" />
+
+// Polyfill types for browser.* APIs.
+/// <reference types="@extension-create/develop/dist/types/polyfill.d.ts" />

apps/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/extension/manifest.json

@@ -0,0 +1,30 @@
+
+{
+  "name": "Supermemory.ai-Extension",
+  "description": "Uses the chrome.contextMenus API to customize the context menu.",
+  "version": "0.1",
+  "permissions": [
+    "contextMenus"
+  ],
+  "manifest_version": 3,
+  "action": {
+    "default_popup": "index.html"
+  },
+  "background": {
+    "service_worker": "./background.ts"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "./content/content.tsx"
+      ]
+    }
+  ],
+  "icons": {
+    "16": "public/icon/logo(16).png",
+    "48": "public/icon/logo(48).png"
+  }
+}

apps/extension/package.json

@@ -0,0 +1,20 @@
+{
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "5.3.3",
+    "extension": "latest"
+  },
+  "scripts": {
+    "dev": "extension dev",
+    "start": "extension start",
+    "build": "extension build"
+  },
+  "dependencies": {},
+  "name": "extension",
+  "private": true,
+  "version": "0.0.0"
+}

apps/extension/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  content: ['**/*.html', '**/*.tsx'],
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}
+module.exports = require("@repo/tailwind-config/tailwind.config");

apps/extension/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": false,
+    "jsx": "react-jsx",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "moduleResolution": "node",
+    "module": "esnext",
+    "resolveJsonModule": true,
+    "strict": true,
+    "target": "esnext"
+  },
+  "include": ["./"],
+  "exclude": ["node_modules", "dist"]
+}