got data in app

Author: johnwdunn20

test-extension/content_scripts/content.ts

@@ -3,12 +3,12 @@
  // Check if the content script has already been loaded into the current tab
  // Prevents it from injecting into the same page twice if the developer opens and closes the dev tool
  if (window.myContentScriptLoaded) {
- console.log('CONTENT.TS: Content script already injected');
+ console.log("CONTENT.TS: Content script already injected");
  return;
  } else {
  // Set the flag on the window to indicate the content script has already been loaded in the tab
  window.myContentScriptLoaded = true;
- console.log('CONTENT.TS: Loaded');
+ console.log("CONTENT.TS: Loaded");
  }
 
  let appConnected = false;
@@ -20,23 +20,23 @@
 
  // Function to setup and initialize the background port
  function setupPort() {
- console.log('CONTENT.TS: Background.ts Connected');
+ console.log("CONTENT.TS: Background.ts Connected");
 
  // Connect to background script
- backgroundPort = chrome.runtime.connect({ name: 'content-background' });
+ backgroundPort = chrome.runtime.connect({ name: "content-background" });
 
  // Handle background.ts messages - send message if connected to app otherwise add to queue
- backgroundPort.onMessage.addListener(message => {
+ backgroundPort.onMessage.addListener((message) => {
  if (appConnected) {
- console.log('CONTENT.TS: Message to app', message);
+ console.log("CONTENT.TS: Message to app", message);
  window.postMessage(message);
  } else {
  appMessageQueue.push(message);
  }
  });
 
  backgroundPort.onDisconnect.addListener(() => {
- console.log('CONTENT.TS: Background.ts Disconnected');
+ console.log("CONTENT.TS: Background.ts Disconnected");
  // Reset the port to trigger reconnection attempt
  backgroundPort = null;
  setupPort();
@@ -49,20 +49,20 @@
  }
 
  // Add listener to the window to handle messages from the app
- window.addEventListener('message', handleMessageFromApp, false);
+ window.addEventListener("message", handleMessageFromApp, false);
 
  function handleMessageFromApp(message: MessageEvent) {
  // Initial message from the app to confirm connection
- if (message.data?.type === 'app-connected') {
- console.log('CONTENT.TS: App Connected');
+ if (message.data?.type === "app-connected") {
+ console.log("CONTENT.TS: App Connected");
  clearInterval(appConnectionInterval);
  appConnected = true;
  appMessageQueue.forEach((message: any) => window.postMessage(message));
  appMessageQueue = [];
  }
 
  // All other messages are sent to background.ts
- if (message.data?.type === 'event') {
+ if (message.data?.type === "event") {
  // console.log('CONTENT.TS: Message from App:', message);
  sendMessageToBackground(message);
  }
@@ -71,7 +71,7 @@
  // Notify app that content.ts is ready
  function establishAppConnection() {
  if (!appConnected) {
- window.postMessage({ type: 'content-script-ready' }, '*');
+ window.postMessage({ type: "content-script-ready" }, "*");
  }
  }
 
@@ -81,12 +81,25 @@
 
  // Function to send a heartbeat message to the background script to keep it active
  function sendHeartbeat() {
- backgroundPort?.postMessage({ type: 'heartbeat' });
+ backgroundPort?.postMessage({ type: "heartbeat" });
  // console.log('heartbeat');
  }
 
  // Call sendHeartbeat function every 25 seconds
  setInterval(sendHeartbeat, 25000);
+
+ // Function to send a message to the app when the component tree is ready
+ window.addEventListener("message", (event) => {
+ // console.log("message from inject.js", event.data.eventListStr);
+ if (event.data.type && event.data.type === "tree") {
+ console.log("CONTENT.ts: component tree sending event: ", event);
+ backgroundPort?.postMessage({type: event.data.type, data: event.data.eventListStr});
+ // chrome.runtime.sendMessage({
+ // action: event.data.type,
+ // data: event.data.eventListStr,
+ // });
+ }
+ });
 })();
 
 // *** Component Tree ***
@@ -99,27 +112,14 @@
 */
 const inject = (fileName: string) => {
  // console.log("CONTENTSCRIPT.JS: INJECTING SCRIPT");
- const treeScript = document.createElement('script');
- treeScript.setAttribute('type', 'text/javascript');
- treeScript.setAttribute('src', chrome.runtime.getURL(fileName));
+ const treeScript = document.createElement("script");
+ treeScript.setAttribute("type", "text/javascript");
+ treeScript.setAttribute("src", chrome.runtime.getURL(fileName));
  document.body.appendChild(treeScript);
 };
 
 //invoke inject function to inject script
-inject('inject.js');
-
-// Function to send a message to the app when the component tree is ready
-window.addEventListener('message', event => {
- // console.log("message from inject.js", event.data.eventListStr);
- if (event.data.type && event.data.type === 'EVENT_LIST') {
- console.log("component tree sending event: ", event);
- chrome.runtime.sendMessage({
- action: event.data.type,
- data: event.data.eventListStr,
- });
- }
-});
-
+inject("inject.js");
 
 export {};
 
@@ -135,4 +135,3 @@ export {};
 // appMessageQueue = [];
 // console.log('CONTENT.TS: Old content.ts cleaned up.');
 // }
-

test-extension/content_scripts/inject.ts

@@ -177,7 +177,7 @@ const getReactTree = () => {
  //convert eventList to string
  const eventListStr = JSON.stringify(eventList);
  //send message w/eventList string
- window.postMessage({ type: "EVENT_LIST", eventListStr });
+ window.postMessage({ type: "tree", eventListStr });
  return onCommitFiberRoot(...args);
  };
  };

test-extension/src/App.tsx

@@ -18,6 +18,7 @@ function App() {
  const [devToolsPort, setDevToolsPort] = useState<chrome.runtime.Port | null>(
  null
  );
+ const [treeData, setTreeData] = useState<any>('');
 
  // adds event listeners when component mountsx
  useEffect(() => {
@@ -39,8 +40,9 @@ function App() {
  setQueryEvents(queryEvents => [...queryEvents, message.payload]);
  }
 
- if (message.type === 'metric') {
- // metrics logic
+ if (message.type === 'tree') {
+ console.log('APP.tsx: Recieved tree data', message);
+ setTreeData(message.data);
  }
  });
 
@@ -82,6 +84,7 @@ function App() {
  selectedQueries={selectedQueries}
  handleSelectionChange={handleSelectionChange}
  devToolsPort={devToolsPort}
+ treeData={treeData}
  />
  </Container>
  );

test-extension/src/containers/ParentTab.tsx

@@ -13,6 +13,7 @@ const ParentTab = ({
  selectedQueries,
  handleSelectionChange,
  devToolsPort,
+ treeData
 }: ParentTabsProps) => {
  const [value, setValue] = React.useState(0);
 
@@ -54,8 +55,7 @@ const ParentTab = ({
 
  <CustomTabPanel value={value} index={1}>
  <TreeTab
- queryEvents={queryEvents}
- selectedQueries={selectedQueries}
+ treeData={treeData}
  />
  </CustomTabPanel>
  </Box>

test-extension/src/containers/TreeTab.tsx

@@ -1,14 +1,29 @@
 import React, { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
-import { BasicTabsProps } from '../types';
 import ComponentTree from '../components/Tree';
 import ProfilingToggle from '../components/ProfilingToggle';
 
-const TreeTab = ({ queryEvents }: BasicTabsProps) => {
+const TreeTab:React.FC<any> = ({treeData}) => {
+ console.log('Tree Tab loaded');
+
+ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+ if (message.type === "tree") {
+ console.log("Received component tree events:", message.data);
+ // Handle the received data as needed
+ 
+ // Optionally, send a response back to the content script
+ sendResponse({ status: "success", data: "Processed EVENT_LIST" });
+ }
+ 
+ // Return true if you want to send a response asynchronously
+ // (this is necessary if the response will not be sent immediately)
+ return true;
+ });
+ 
+
  const [value, setValue] = React.useState(0);
  const [selectedQueries, setSelectedQueries] = useState<string[]>([]);
 
- const [treeData, setTreeData] = useState<any[]>([]);
  //state for navigating between tree and charts
  const [view, setView] = useState<string>('treeView');
  //state for recording status, default to false;
@@ -42,28 +57,6 @@ const TreeTab = ({ queryEvents }: BasicTabsProps) => {
  }
  }, [recStat]);
 
- useEffect(() => {
- const msgListener = (request: any, sender: any, sendResponse: any) => {
- console.log('inside use effect', request);
- if (recStat) {
- console.log('inside use effect', JSON.parse(request.data));
- switch (request.action) {
- case 'EVENT_LIST':
- if (request.data) {
- setTreeData([...JSON.parse(request.data)]);
- }
- break;
- }
- }
- };
-
- chrome.runtime.onMessage.addListener(msgListener);
-
- return () => {
- chrome.runtime.onMessage.removeListener(msgListener);
- };
- }, [recStat]);
-
  return (
  <Box sx={{ display: 'flex', flexDirection: 'column', width: '100%', height: '100%', marginTop: '1rem' }}>
  <ProfilingToggle onClick={() => setStatus()}>

test-extension/src/types.d.ts

@@ -16,6 +16,7 @@ export type ParentTabsProps = {
  selectedQueries: string[];
  handleSelectionChange: (queries: string[]) => void;
  devToolsPort: chrome.runtime.Port | null;
+ treeData: any;
 };
 
 export type QueryTabProps = {