From 557c7b82eb89cf95f480896fbe41355352a01482 Mon Sep 17 00:00:00 2001 From: codetorso Date: Mon, 24 Jun 2024 03:54:53 +0530 Subject: 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 00000000..3c1610b0 Binary files /dev/null and b/apps/extension/public/icon/logo(16).png differ diff --git a/apps/extension/public/icon/logo(48).png b/apps/extension/public/icon/logo(48).png new file mode 100644 index 00000000..de5a6d2e Binary files /dev/null and b/apps/extension/public/icon/logo(48).png differ 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 -- cgit v1.2.3