diff --git a/src/pages/content/index.tsx b/src/pages/content/index.tsx
index 6c2841c3..dafeada3 100644
--- 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 += '';
- // 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()
+
+}
+
diff --git a/src/pages/dialog/Dialog.tsx b/src/pages/dialog/Dialog.tsx
new file mode 100644
index 00000000..933316a1
--- /dev/null
+++ 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 (
+
+
+ {/* */}
+ Dialog from extension
+
+
+ );
+}
diff --git a/src/pages/dialog/index.css b/src/pages/dialog/index.css
new file mode 100644
index 00000000..35f1727a
--- /dev/null
+++ 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;
+ }
+
\ No newline at end of file
diff --git a/src/pages/dialog/index.html b/src/pages/dialog/index.html
new file mode 100644
index 00000000..37397769
--- /dev/null
+++ b/src/pages/dialog/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+ Dialog
+
+
+
+
+
+
+
diff --git a/src/pages/dialog/index.tsx b/src/pages/dialog/index.tsx
new file mode 100644
index 00000000..c62dee0c
--- /dev/null
+++ 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();
+}
+
+init();
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 167a5e26..f01741f1 100644
--- 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)
}