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 += 'Select AID

'; - // 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 ( +
+
+ {/* logo */} +

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