From 557c7b82eb89cf95f480896fbe41355352a01482 Mon Sep 17 00:00:00 2001 From: codetorso Date: Mon, 24 Jun 2024 03:54:53 +0530 Subject: [PATCH] Add Extension (1/2) --- apps/extension/README.md | 37 +++++++++++++++++++ apps/extension/background.ts | 25 +++++++++++++ apps/extension/content/ContentApp.tsx | 45 ++++++++++++++++++++++++ apps/extension/content/base.css | 3 ++ apps/extension/content/content.css | 6 ++++ apps/extension/content/content.tsx | 15 ++++++++ apps/extension/extension-env.d.ts | 9 +++++ apps/extension/index.html | 11 ++++++ apps/extension/manifest.json | 30 ++++++++++++++++ apps/extension/package.json | 20 +++++++++++ apps/extension/public/icon/logo(16).png | Bin 0 -> 980 bytes apps/extension/public/icon/logo(48).png | Bin 0 -> 2087 bytes apps/extension/tailwind.config.js | 8 +++++ apps/extension/tsconfig.json | 19 ++++++++++ 14 files changed, 228 insertions(+) create mode 100644 apps/extension/README.md create mode 100644 apps/extension/background.ts create mode 100644 apps/extension/content/ContentApp.tsx create mode 100644 apps/extension/content/base.css create mode 100644 apps/extension/content/content.css create mode 100644 apps/extension/content/content.tsx create mode 100644 apps/extension/extension-env.d.ts create mode 100644 apps/extension/index.html create mode 100644 apps/extension/manifest.json create mode 100644 apps/extension/package.json create mode 100644 apps/extension/public/icon/logo(16).png create mode 100644 apps/extension/public/icon/logo(48).png create mode 100644 apps/extension/tailwind.config.js create mode 100644 apps/extension/tsconfig.json diff --git a/apps/extension/README.md b/apps/extension/README.md new file mode 100644 index 00000000..d5aceb2c --- /dev/null +++ b/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. diff --git a/apps/extension/background.ts b/apps/extension/background.ts new file mode 100644 index 00000000..8f3162fc --- /dev/null +++ b/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); +} +}); \ No newline at end of file diff --git a/apps/extension/content/ContentApp.tsx b/apps/extension/content/ContentApp.tsx new file mode 100644 index 00000000..b8cb6710 --- /dev/null +++ b/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 ( +
+
+
+
+ +
+

Saved!

+

{text}

+
+
+ ); +} \ No newline at end of file diff --git a/apps/extension/content/base.css b/apps/extension/content/base.css new file mode 100644 index 00000000..bd6213e1 --- /dev/null +++ b/apps/extension/content/base.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; \ No newline at end of file diff --git a/apps/extension/content/content.css b/apps/extension/content/content.css new file mode 100644 index 00000000..b8195ee8 --- /dev/null +++ b/apps/extension/content/content.css @@ -0,0 +1,6 @@ +#extension-root { + position: fixed; + bottom: 0; + right: 0; + z-index: 99999; +} diff --git a/apps/extension/content/content.tsx b/apps/extension/content/content.tsx new file mode 100644 index 00000000..65c62d74 --- /dev/null +++ b/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(<>) +} diff --git a/apps/extension/extension-env.d.ts b/apps/extension/extension-env.d.ts new file mode 100644 index 00000000..7cadeab2 --- /dev/null +++ b/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. +/// + +// Polyfill types for browser.* APIs. +/// diff --git a/apps/extension/index.html b/apps/extension/index.html new file mode 100644 index 00000000..bb4c07c7 --- /dev/null +++ b/apps/extension/index.html @@ -0,0 +1,11 @@ + + + + + + God Bless Vanilla JavaScript!!! + + +

hello World! Follow @supermemoryai

+ + \ No newline at end of file diff --git a/apps/extension/manifest.json b/apps/extension/manifest.json new file mode 100644 index 00000000..529b0afe --- /dev/null +++ b/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": [ + "" + ], + "js": [ + "./content/content.tsx" + ] + } + ], + "icons": { + "16": "public/icon/logo(16).png", + "48": "public/icon/logo(48).png" + } +} \ No newline at end of file diff --git a/apps/extension/package.json b/apps/extension/package.json new file mode 100644 index 00000000..7b06b3da --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/apps/extension/public/icon/logo(16).png b/apps/extension/public/icon/logo(16).png new file mode 100644 index 0000000000000000000000000000000000000000..3c1610b0af68fac5090e67a19ec81f29ea9a889a GIT binary patch literal 980 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbL!Lb6AYF9SoB8UsT^3j@P1pisjL z28L1t28LG&3=CE?7#PG0=IjczVPIhN3h)VW1uFOt0{{O0|NHO%zyJULYG?p?K>Gjx zUtk#$h>xghfu=wJ&@2S__x}%=^BHUnLLAP5YlDlRFbGJas0CXA_7+$et5%qMpc=ty zfW%KwAOQ9M`~U6Rf2fn8N`TaFh%7?j|9^wLDMG-|%q1H}Xs@c7g>=JQHcm5Q?a z);1I|*+pBIiG=d8bIJHIad9wO*OZ$$#OrCBri8O3GhK!mdFHCBFYsOhw2d*z+ueonKa=h~ zAcwug)7O>#1sgMixHc1~$aSF5D^C~45Q)pW=fcAeIS8;m*cm9IoE>q?&4rgkYy-Pa zN0UhPQKlQ*W&i(go@{&WcFl7?MW!Swdrh_ul z4~%$rMV5?dWlUfudN$x!On0w2!`&f84k zb;aFHth`UXvUW$UX1)@ztL)As?YFUZ+NJuZs(-V$yWf*P?$lg+NSkMV|BEj^?&oHU zPY=KDAiwn%BfpjT)gy23?qz&cKjDzHA>;FnKfn0=n|?j#`+xrDy5Ien|Mj0Q39l(+ zTKj(fefznBikp|`#-;#$tyS6G7 L^>bP0l+XkKZY&g& literal 0 HcmV?d00001 diff --git a/apps/extension/public/icon/logo(48).png b/apps/extension/public/icon/logo(48).png new file mode 100644 index 0000000000000000000000000000000000000000..de5a6d2e0520b0b4f471a849809982906e5e1d79 GIT binary patch literal 2087 zcmZ{lc{J1w7sr1Tqr8&FmYvWtmWe^8VLZ&lLAY%yb35fj6p$urM+&w0;z-*et`&%NJ!zW094{qv^S+ggepmOBgpfEdOK z<;Yj)-zg%@uP%Z+WWK0)SvlGOK#V2;#3cg2F5ik<1^^;|@v8>_!1Dn>CZzC<1A;#g z{=?c51?>MFkKR^g@f}b&#s&>q7Cr#T9KndSKHxhb4C=Q_gz0w^*1>M?r9kV<2Qbb{ zt@A%1DFKZslQ65>f@nj52^`W4X~Ez@c}lp0%V+KeHJ!o22o9|}v(1mja%ag(xf+gz zI{j&wI+B%Uff6g>_55f3CFIggovhQ@VM-hhj+9p5s=$$b6BUP?ktokj-qHAZtfd{> zNCqR`m9UNGvojrr;bfM!mX~6%msH=Ov4Vw%uy|jc7Nd{8xbxg8l)sG|RHavLy3=l5 zTE`~JG>19ilt`Fq2k6sr!tjMKA0Rz+VvU7!*WD%#Ar>1Ys<8tkECy&xhD}?=otlLprNsY}Dhzj-DTl*h( zB15M$!c2(<=Ic1)wc=TagIDxSB#Y&Ln;CDlRuJE)ZBLqX-aQa;GT;%aPQ7uymUo zD0r;^qI{Q*E>5A=;{Yug&7M3=L3soEr}FeNVi;T*^@L>D6Zu5-frck#6qT?dr}srD z{Yqs~BPC&ARgiUYrlB}W>Lz7j9x3U(_%W@jIFX{9vN?I`CswF6RN&>w<`+ihU?Q(V zkW{*EEb-|ZK7i2S-0UFTf184)FUEyPbRvT4dcIV}J>@W7Eh)Eu+WRVBN+8+%LPi(Ku|`F8-U0o-9Fh-!KP8$^7>9jkCYpTE(o%i+&Ak_#q1)F znx%`_p+ppyT=&J{61K7Dep(3G_mICvAO_E2WY_~xu{XlRjQ(ma_dm6Q~pTt@>ti$p<`@LrIn-<2SL>=6?2D~ z);>LFvOpbgVpxN#oo%bOnub<5%`jP$F26?+q`SL5jFJ0$P6FQ~Rtxf48r9Ylw3&4reu68Jkxv)Hn*j4mhaAzi%gGmU7LLRjfO z`g5%zGI^U=-pdvcWu{(hqA~-EqIJSgy$oq1ov-y&IYH|ulswq#gILPq&aA9s4@`RjC%?X;TN=|Xu^bnbn|5fDX;6$-VlS$|i zv+ZI3ScT-vy`IUV+$$UQY0wh}N4E4ZwC&&RIwn~YlFl$1s* z;zH_NvP=E=@0|<1BfaUJXTAtTDn~mr(!}r83`P`*95o;^C7tKB-d?H4lUmmw}r zeDx}PYb!i2chmNXfn)!n2#u!92!S07PB*A5W>wOU@s7H254zSrTShJ@pnVu0%1#Ek zsrtB3Nw`plvz^gHA~mBOH#GlQ+wUKIH@D%g?L`Kq&t<4l6=>U#WnPp{lzVc#Z$rBe z7NZHPQ_b{nLl(6BJ|CS{Gz7F`Z=8G7kQAG_Wi{#zAy~Z;>NOM4&+PY(IPnYVP%$*eVIv#}o)1;JV3~7R`&8Ds-%s(UGr{=eP>uC=Ud#4#2BpN6z52Qa2 z*_62$Dl5Pm#WQojrpzT??fTQS7g;N)P%u*emSjnfu%+)vr^wesSDQ~ZrPr770%uMP z?2DRFU(mE-?=-}eFa42^l~yfW&Fwx;EHlzt&X$RCGRR=NZ`ns27tQp_AhbXzY-N*j z-Jrz}6*&Hv)CfnrhI@O4*>J_j3N963dMI5T>lFQ z4EFZ(iT?k9WDb3v51jhXg>b(>d|0?=V95V6`tY-`e;>gxIY>SOV9>UxKg~T7{sPAY B=Dz>{ literal 0 HcmV?d00001 diff --git a/apps/extension/tailwind.config.js b/apps/extension/tailwind.config.js new file mode 100644 index 00000000..1beb1aca --- /dev/null +++ b/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"); \ No newline at end of file diff --git a/apps/extension/tsconfig.json b/apps/extension/tsconfig.json new file mode 100644 index 00000000..8538580f --- /dev/null +++ b/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"] +} \ No newline at end of file