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}
+
+