Move tab state to content script and synchronous authentications

example-web/my-app/package.json

@@ -9,6 +9,7 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "eslint": "^8.56.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -24,7 +25,10 @@
     "extends": [
       "react-app",
       "react-app/jest"
-    ]
+    ],
+    "globals": {
+      "chrome": true
+    }
   },
   "browserslist": {
     "production": [

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

@@ -12,6 +12,16 @@ function App() {
     window.postMessage({ type: "init-req-credential" }, "*");
   };
 
+  const handleSyncRequest = () => {
+    // TODO extension Id harcoded just for testing, need to find a way to get it dynamically
+    chrome.runtime.sendMessage("fklmfbmpaimbgjplbambkdjphdadbmed", {data: "test"},
+      function(response) {
+        if (!response.success)
+          console.log(response.data)
+          alert("Signed headers received\n"+ JSON.stringify(response.data.headers, null, 2));
+      });
+  };
+
 
 
   return (
@@ -25,6 +35,9 @@ function App() {
           <Button variant="contained" onClick={handleRequestCredential}>
             Authenticate with Credential
           </Button>
+          <Button variant="contained" onClick={handleSyncRequest}>
+            Synchronous Authentication
+          </Button>
         </div>
       </header>
     </div>

manifest.json

@@ -19,23 +19,14 @@
   "permissions": [
     "activeTab",
     "storage",
-    "tabs",
     "alarms"
   ],
   "content_scripts": [
     {
-      "matches": [
-        "http://*/*",
-        "https://*/*",
-        "<all_urls>"
-      ],
+      "matches": ["<all_urls>"],
       "run_at": "document_end",
-      "js": [
-        "src/pages/content/index.tsx"
-      ],
-      "css": [
-        "contentStyle.css"
-      ]
+      "js": ["src/pages/content/index.tsx"],
+      "css": ["contentStyle.css"]
     }
   ],
   "web_accessible_resources": [
@@ -48,5 +39,8 @@
   ],
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'"
+  },
+  "externally_connectable": {
+    "matches": ["<all_urls>"]
   }
 }

src/components/main.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { Sidebar } from "@components/sidebar";
 import { SelectIdentifier } from "@components/selectIdentifier";
 import { SelectCredential } from "@components/selectCredential";
-import { APP_STATE } from "@pages/popup/constants";
+import { TAB_STATE } from "@pages/popup/constants";
 import { IdentifierList } from "@components/identifierList";
 import { CredentialList } from "@components/credentialList";
 import { SigninList } from "@components/signinList";
@@ -13,39 +13,41 @@ interface IMain {
 
 export function Main(props: IMain): JSX.Element {
   const [activeSidebar, setActiveSidebar] = useState("Identifiers");
-  const [tabState, setTabState] = useState(APP_STATE.DEFAULT);
+  const [tabState, setTabState] = useState(TAB_STATE.DEFAULT);
 
   const fetchTabState = async () => {
-    const { data } = await chrome.runtime.sendMessage({
-      type: "tab",
-      subtype: "get-tab-state",
-    });
 
-    if (!data) return;
+    chrome.tabs.query({ active: true, currentWindow: true }, async function (tabs) {
+      const { data } = await chrome.tabs.sendMessage(
+        tabs[0].id!,
+        { type: "tab", subtype: "get-tab-state" }
+      );
+      if (!data) return;
 
     if (data?.appState) {
       setTabState(data?.appState);
       if (
-        data?.appState === APP_STATE.SELECT_IDENTIFIER ||
-        data?.appState === APP_STATE.SELECT_CREDENTIAL
+        data?.appState === TAB_STATE.SELECT_IDENTIFIER ||
+        data?.appState === TAB_STATE.SELECT_CREDENTIAL
       ) {
         setActiveSidebar(
-          data?.appState === APP_STATE.SELECT_IDENTIFIER
+          data?.appState === TAB_STATE.SELECT_IDENTIFIER
             ? "Identifiers"
             : "Credentials"
         );
       }
     }
+    });
   };
 
   useEffect(() => {
     fetchTabState();
   }, []);
 
   const renderItems = () => {
-    if (tabState === APP_STATE.SELECT_IDENTIFIER) return <SelectIdentifier />;
+    if (tabState === TAB_STATE.SELECT_IDENTIFIER) return <SelectIdentifier />;
 
-    if (tabState === APP_STATE.SELECT_CREDENTIAL) return <SelectCredential />;
+    if (tabState === TAB_STATE.SELECT_CREDENTIAL) return <SelectCredential />;
 
     switch (activeSidebar) {
       case "Credentials":
@@ -60,8 +62,8 @@ export function Main(props: IMain): JSX.Element {
 
   const isSidebarDisabled = () => {
     return (
-      tabState === APP_STATE.SELECT_IDENTIFIER ||
-      tabState === APP_STATE.SELECT_CREDENTIAL
+      tabState === TAB_STATE.SELECT_IDENTIFIER ||
+      tabState === TAB_STATE.SELECT_CREDENTIAL
     );
   };
 

src/components/selectCredential.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { CredentialCard } from "@components/credentialCard";
 import { IMessage } from "@pages/background/types";
-import { APP_STATE } from "@pages/popup/constants";
 
 export function SelectCredential(): JSX.Element {
   const [credentials, setCredentials] = useState([]);
@@ -13,20 +12,18 @@ export function SelectCredential(): JSX.Element {
     setCredentials(data.credentials);
   };
 
-  const createSigninWithCredential = async (credential) => {
-    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+  const createSigninWithCredential = async (credential: any) => {
+    await chrome.runtime.sendMessage<IMessage<any>>({
       type: "create-resource",
       subtype: "signin",
       data: {
         credential,
       },
     });
-    await chrome.runtime.sendMessage({
-      type: "tab",
-      subtype: "set-app-state",
-      data: {
-        appState: APP_STATE.DEFAULT,
-      },
+    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+      chrome.tabs.sendMessage(
+        tabs[0].id!,
+        { type: "tab", subtype: "reload-state" });
     });
     window.close();
   };

src/components/selectIdentifier.tsx

@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { IdentifierCard } from "@components/identifierCard";
 import { IMessage } from "@pages/background/types";
-import { APP_STATE } from "@pages/popup/constants";
 
 export function SelectIdentifier(): JSX.Element {
   const [aids, setAids] = useState([]);
@@ -14,29 +13,19 @@ export function SelectIdentifier(): JSX.Element {
     setAids(data.aids);
   };
 
-  const createSigninWithIdentifiers = async (aid) => {
-    const { data } = await chrome.runtime.sendMessage<IMessage<void>>({
+  const createSigninWithIdentifiers = async (aid: any) => {
+    await chrome.runtime.sendMessage<IMessage<any>>({
       type: "create-resource",
       subtype: "signin",
       data: {
         identifier: aid,
       },
     });
-    await chrome.runtime.sendMessage({
-      type: "tab",
-      subtype: "set-app-state",
-      data: {
-        appState: APP_STATE.DEFAULT,
-      },
-    });
 
-    console.log("data.signins", data.signins);
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
       chrome.tabs.sendMessage(
-        tabs[0].id,
-        { type: "tab", subtype: "reload-state" },
-        function (response) {}
-      );
+        tabs[0].id!,
+        { type: "tab", subtype: "reload-state" });
     });
     window.close();
   };

src/pages/background/index.ts

@@ -1,5 +1,4 @@
 import { browserStorageService } from "@pages/background/services/browser-storage";
-import { webappService } from "@pages/background/services/webapp";
 import { configService } from "@pages/background/services/config";
 import { userService } from "@pages/background/services/user";
 import { signifyService } from "@pages/background/services/signify";
@@ -9,6 +8,12 @@ import { getCurrentDomain } from "@pages/background/utils";
 
 console.log("Background script loaded");
 
+chrome.runtime.onInstalled.addListener(function (object) {
+  if (object.reason === chrome.runtime.OnInstalledReason.INSTALL) {
+    console.log("Signify Browser Extension installed");
+  }
+});
+
 // Handle messages
 chrome.runtime.onMessage.addListener(function (
   message: IMessage<any>,
@@ -18,7 +23,7 @@ chrome.runtime.onMessage.addListener(function (
   (async () => {
 
     // Handle mesages from content script on active tab
-    if (sender.tab &&  sender.tab.active) {
+    if (sender.tab && sender.tab.active) {
 
       console.log(
         "Message received from content script at " +
@@ -92,19 +97,6 @@ chrome.runtime.onMessage.addListener(function (
       }
     }
 
-    if (message.type === "tab" && message.subtype === "get-tab-state") {
-      const currentDomain = await getCurrentDomain();
-      const appData = await webappService.getAppData(currentDomain!.origin);
-      sendResponse({ data: appData });
-    }
-
-    if (message.type === "tab" && message.subtype === "set-app-state") {
-      const currentDomain = await getCurrentDomain();
-      await webappService.setAppData(currentDomain!.origin, message.data);
-      const appData = await webappService.getAppData(currentDomain!.origin);
-      sendResponse({ data: appData });
-    }
-
     if (message.type === "create-resource" && message.subtype === "signin") {
       const signins = await browserStorageService.getValue("signins") as any[];
       const currentDomain = await getCurrentDomain();
@@ -158,3 +150,26 @@ chrome.runtime.onMessage.addListener(function (
   // return true to indicate chrome api to send a response asynchronously
   return true;
 });
+
+chrome.runtime.onMessageExternal.addListener(
+  async function(request, sender, sendResponse) {
+    console.log("Message received from external source: " + sender.url);
+    // if (sender.url === blocklistedWebsite)
+    //   return;  // don't allow this web page access
+    // if (request.openUrlInEditor)
+    //   openUrl(request.openUrlInEditor);
+    // sendResponse({data: "received"})
+    const origin = sender.url!;
+    const signins = await browserStorageService.getValue("signins") as any;
+    // Validate that message comes from a page that has a signin
+    if (origin.startsWith(signins[0].domain)) {
+      const signedHeaders = await signifyService.signHeaders(signins[0].identifier.name, origin);
+      let jsonHeaders: { [key: string]: string; } = {};
+      for (const pair of signedHeaders.entries()) {
+        jsonHeaders[pair[0]] = pair[1];
+      }
+      sendResponse({ data: { headers: jsonHeaders } });
+
+    }
+
+  });

src/pages/background/services/config.ts

@@ -6,7 +6,7 @@ const CONFIG_ENUMS = {
 
 const Config = () => {
     const getUrl = async (): Promise<string> => {
-        return await browserStorageService.getValue(CONFIG_ENUMS.KERIA_URL);
+        return await browserStorageService.getValue(CONFIG_ENUMS.KERIA_URL) as string;
     }
 
     const removeUrl = async () => {

src/pages/background/utils.ts

@@ -23,6 +23,7 @@ export const getCurrentTab = (): Promise<chrome.tabs.Tab> => {
 
 export const getCurrentDomain = async () => {
   const currentTab = await getCurrentTab();
+  console.log("Current tab: ", currentTab)
   return currentTab ? new URL(currentTab.url!) : null;
 };