om protocol extension

background.ts

// Function to handle messages from the popup
chrome.runtime.onMessage.addListener(function (message, sender, sendResponse) {
    if (message && message.data) {
        let name: string = message.data['thirdparty_user_info']['user_info']['name'];
        console.log('Name:', name);
        let email: string = message.data['thirdparty_user_info']['user_info']['email'];
        console.log('Email:', email);
        let evmAddress: string = message.data['wallets'][1]['public_address'];
        console.log('EVM Address:', evmAddress);
        
        // Store the data in Chrome storage
        chrome.storage.local.set({ userData: message.data }, function() {
            console.log('Data stored successfully');
        });

        // send back a response
        sendResponse({ success: true, message: 'Data received successfully' });
    }
});

content.ts

// content.ts
// Listen for messages from the webpage
window.addEventListener('message', function(event: MessageEvent) {
    // Only accept messages from the current webpage
    if (event.source !== window) return;
    var message = event.data;
    // Check if the message is from the webpage and has the expected type
    if (message && message.type === 'FROM_PAGE') {
        // Send the message data to the background script using chrome.runtime.sendMessage
        chrome.runtime.sendMessage({ data: message.data }, function(response) {
            console.log('Message sent to extension');
            // Handle response from extension if needed
            console.log('Response from extension:', response);
        });
    }
});

manifest.json

{
  "manifest_version": 3,
  "name": "Om Protocol",
  "description": "Streamline experience with Om Protocol Extension: Instantly check top-up balance and discover the DApp Listings.",
  "version": "1.0.0",
  "permissions": [
    "tabs",
    "activeTab",
    "storage",
    "scripting",
    "background"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_title": "Om Protocol",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "nonceblox-logo.png",
    "48": "nonceblox-logo.png",
    "128": "nonceblox-logo.png"
  }
}

popup.tsx

import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { useEthereum } from "@particle-network/auth-core-modal";
import { injectAccountAbstractionProvider } from '../services/injectAccountAbstractionProvider';

const App = () => {
  const [userData, setUserData] = useState<any>(null);

   // const { provider } = useEthereum();
  // useEffect(() => {
  //   console.log(window.ethereum);
  //   injectAccountAbstractionProvider(provider).then(() => console.log(window.ethereum));
  // }, []);


  useEffect(() => {
    // Retrieve the stored data from Chrome storage
    chrome.storage.local.get(['userData'], function(result) {
        console.log('Data retrieved from storage:', result.userData);
        setUserData(result.userData);
    });
  }, []);

  return (
    <div>
      <h1>User Data</h1>
      {userData && (
        <div>
          <p>Name: {userData['thirdparty_user_info']['user_info']['name']}</p>
          <p>Email: {userData['thirdparty_user_info']['user_info']['email']}</p>
          <p>EVM Address: {userData['wallets'][1]['public_address']}</p>
        </div>
      )}
    </div>
  );
};

const container = document.createElement('div');
document.body.appendChild(container);
const root = createRoot(container);
root.render(<App />);