Merge pull request #26 from rodolfomiranda/web-dialog

Insert JSX element from content-script into web page
WebOfTrust · Dec 21, 2023 · 3d4206f · 3d4206f
2 parents 1ba2342 + 7128c64
commit 3d4206f
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 13 deletions.
diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx
@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import './style.css' 
+import Dialog from '../dialog/Dialog';
 
 // Handle messages from web page
 window.addEventListener("message", async (event) => {
@@ -13,7 +14,8 @@ window.addEventListener("message", async (event) => {
       case "getVersion":
         const manifest =  chrome.runtime.getManifest()
         chrome.runtime.sendMessage({type: "isUnlocked"});
-        alert('Signify extension installed with version: '+manifest.version)
+        // alert('Signify extension installed with version: '+manifest.version)
+        insertReactComponent()
         break;
       case "isUnlocked":
         break;
@@ -36,15 +38,16 @@ chrome.runtime.onMessage.addListener(
     }
 );
 
-  // OPEN A DIALOG IN WEB PAGE 
-  //   document.body.innerHTML += '<dialog data-dialog="animated-dialog" data-dialog-mount="opacity-100 translate-y-0 scale-100" data-dialog transition="transition-all duration-300" class="relative m-4 w-2/5 min-w-[40%] max-w-[40%] rounded-lg bg-white font-sans text-base font-light leading-relaxed text-blue-gray-500 antialiased shadow-2xl">Select AID<br><br><button class="select-none rounded-lg bg-gradient-to-tr from-gray-900 to-gray-800 py-3 px-6 text-center align-middle font-sans text-xs font-bold uppercase text-white shadow-md shadow-gray-900/10 transition-all hover:shadow-lg hover:shadow-gray-900/20 active:opacity-[0.85] disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none">Sign in</button></dialog>';
-  //   var dialog = document.querySelector("dialog")
-
-  //   dialog.querySelector("button").addEventListener("click", function() {
-  //     port.postMessage(event.data.text);  
-  //     dialog.close()
-  //   })
-  //   dialog.showModal()
-
-  // dialog.showModal()
+function insertReactComponent() {
+  console.log('inserting react component')
+  const div = document.createElement('div');
+  div.id = '__root';
+  document.body.appendChild(div);
+
+  const rootContainer = document.querySelector('#__root');
+  const root = createRoot(rootContainer!);
+  root.render(<Dialog/>)
+
+}
+
 
diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import logo from '@assets/img/128_keri_logo.png';
+
+export default function Popup(): JSX.Element {
+
+  return (
+    <div className="absolute top-20 right-20 text-center p-3 bg-white">
+      <header className="items-center justify-center">
+      {/* <img src={logo} className="w-32 h-32" alt="logo" /> */}
+      <p className="text-2xl font-bold">Dialog from extension</p>
+      </header>
+    </div>
+  );
+}
diff --git a/src/pages/dialog/index.css b/src/pages/dialog/index.css
@@ -0,0 +1,13 @@
+body {
+    width: 300px;
+    height: 260px;
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+      sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    position: relative;
+  }
+
diff --git a/src/pages/dialog/index.html b/src/pages/dialog/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8" />
+        <title>Dialog</title>
+    </head>
+
+    <body>
+        <div id="__root"></div>
+        <script type="module" src="./index.tsx"></script>
+    </body>
+</html>
diff --git a/src/pages/dialog/index.tsx b/src/pages/dialog/index.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import '@pages/popup/index.css';
+import '@assets/styles/tailwind.css';
+import Popup from '@pages/popup/Popup';
+
+function init() {
+  const rootContainer = document.querySelector("#__root");
+  if (!rootContainer) throw new Error("Can't find Popup root element");
+  const root = createRoot(rootContainer);
+  root.render(<Popup />);
+}
+
+init();
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
@@ -19,7 +19,7 @@ export default function Popup(): JSX.Element {
   const generatePasscode = async () => {
     let p = randomPasscode()
     setPasscode(p)
-    const response = await chrome.runtime.sendMessage({greeting: "bye"});
+    const response = await chrome.runtime.sendMessage({message: "passcode generated"});
     console.log(response)
   }