Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Insert JSX element from content-script into web page #26

Merged
merged 1 commit into from
Dec 21, 2023
Merged

Insert JSX element from content-script into web page #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 15 additions & 12 deletions src/pages/content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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) => {
Expand All @@ -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;
Expand All @@ -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/>)

}


14 changes: 14 additions & 0 deletions src/pages/dialog/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
13 changes: 13 additions & 0 deletions src/pages/dialog/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

12 changes: 12 additions & 0 deletions src/pages/dialog/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
14 changes: 14 additions & 0 deletions src/pages/dialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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();
2 changes: 1 addition & 1 deletion src/pages/popup/Popup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
}

Expand Down