Passing messages between components

example-web/my-app/src/App.js

@@ -6,7 +6,7 @@ function App() {
 
   function clickMe() {
       window.postMessage(
-          {type : "FROM_PAGE", text : "Hello from the webpage!"}, "*");
+          {type : "getVersion"}, "*");
 
   }
 

src/pages/background/index.ts

@@ -1,13 +1,43 @@
+import { randomPasscode, SignifyClient, Tier, ready } from 'signify-ts'
+const url = "https://keria-dev.rootsid.cloud/admin"
+const boot_url = "https://keria-dev.rootsid.cloud"
 
 console.log('Background script loaded');
 
-chrome.runtime.onConnect.addListener(function(port) {
-    console.log("Connection with content script established")
-    console.assert(port.name === "signify");
-    port.onMessage.addListener(function(msg, sender) {
-        console.log("Message received from content script: ",msg);
-        port.postMessage({signature: "ABCD"});
-
-    });
-  });
+// Handle messages
+chrome.runtime.onMessage.addListener(
+    async function (message, sender, sendResponse) {
+        if (sender.tab) {
+            // Handle mesages from content script
+            console.log("Message received from content script at " + sender.tab.url + ": " + message.type)
+            if (message.type) {
+                switch (message.type) {
+                    case "getVersion":
+                        const manifestData = chrome.runtime.getManifest()
+                        sendResponse(manifestData.version);
+                        break;
+                    case "isUnlocked":
+                        const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
+                        const response = chrome.tabs.sendMessage(tab.id!, {type: "for_content_script"});
+                        // sendResponse(true);
+                        break;
+                    case "hasLogin":
+                        sendResponse({ login: "AID 123" });
+                        break;
+                    case "authenticate":
+                        sendResponse({ signature: "ABCD" });
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+        } else if (sender.origin === "chrome-extension://" + chrome.runtime.id &&
+            sender.url === "chrome-extension://" + chrome.runtime.id + "/src/pages/popup/index.html") {
+            // handle messages from Popup
+            console.log("Message received from browser extension pupup: " + message)
+            sendResponse({ resp: "received" });
+        }
+    }
+);
 

src/pages/content/index.tsx

@@ -1,51 +1,50 @@
 import { createRoot } from 'react-dom/client';
 import './style.css' 
-const div = document.createElement('div');
-div.id = '__root';
-document.body.appendChild(div);
 
-const rootContainer = document.querySelector('#__root');
-if (!rootContainer) throw new Error("Can't find Options root element");
-const root = createRoot(rootContainer);
-root.render(
-  <div className='absolute bottom-0 left-0 text-lg text-black bg-amber-400 z-50'  >
-    content script injected
-  </div>
-);
-
-try {
-  console.log('content script injected');
-} catch (e) {
-  console.error(e);
-}
-
-var port = chrome.runtime.connect({name: "signify"});
-
-port.onMessage.addListener(function(msg) {
-  console.log("received message from background script: "+msg.signature)
-  alert('signature received from extension: '+msg.signature);
-
-});
-
-window.addEventListener("message", (event) => {
-  // We only accept messages from ourselves
+// Handle messages from web page
+window.addEventListener("message", async (event) => {
+  // Accept messages only from same window
   if (event.source !== window) {
     return;
   }
-
-  if (event.data.type && (event.data.type === "FROM_PAGE")) {
-    console.log("Content script received from web page: " + event.data.text);
-    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")
+  console.log("Content script received from web page: " + event.data.type);
+  if (event.data.type) {
+    switch (event.data.type) {
+      case "getVersion":
+        const manifest =  chrome.runtime.getManifest()
+        chrome.runtime.sendMessage({type: "isUnlocked"});
+        alert('Signify extension installed with version: '+manifest.version)
+        break;
+      case "isUnlocked":
+        break;
 
-    dialog.querySelector("button").addEventListener("click", function() {
-      port.postMessage(event.data.text);  
-      dialog.close()
-    })
-    dialog.showModal()
-
-  dialog.showModal()
 
+    }
+
     }
 }, false);
 
+// Handle messages from background script
+chrome.runtime.onMessage.addListener(
+  function (message, sender, sendResponse) {
+    console.log(sender)
+    if (sender.origin === "chrome-extension://" + chrome.runtime.id ) {
+            // handle messages from Popup
+            console.log("Message received from browser extension pupup: " + message)
+            // sendResponse({ resp: "received" });
+        }
+    }
+);
+
+  // 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()
+

src/pages/popup/Popup.tsx

@@ -16,9 +16,11 @@ export default function Popup(): JSX.Element {
   }
     , [])
 
-  const generatePasscode = () => {
+  const generatePasscode = async () => {
     let p = randomPasscode()
     setPasscode(p)
+    const response = await chrome.runtime.sendMessage({greeting: "bye"});
+    console.log(response)
   }
 
   const newClient = (passcode: string) => {