many more console.logs. Committing before I try a new approach. Going to add tabsObj instance upon the contextMenu being clicked.

Author: jrosengrant

src/app/containers/ErrorContainer.tsx

@@ -22,6 +22,13 @@ function ErrorContainer(): JSX.Element {
   const titleTracker = useRef(currentTitle); // useRef returns an object with a property 'initialValue' and a value of whatever was passed in. This allows us to reference a value that's not needed for rendering
   const timeout = useRef(null);
 
+  console.log(
+    'ErrorContainer state variables: tabs: ',
+    tabs,
+    'currentTab: ',
+    currentTab,
+    'currentTitle: ',
+  );
   // function that launches the main app
   function launch(): void {
     dispatch(launchContentScript(tabs[currentTab]));

src/app/containers/MainContainer.tsx

@@ -28,6 +28,10 @@ function MainContainer(): JSX.Element {
 
   const { currentTab, tabs, port }: MainState = useSelector((state: RootState) => state.main);
 
+  //JR: check connection status
+  const { connectionStatus }: MainState = useSelector((state: RootState) => state.main);
+  console.log('MainContainer connectionStatus at initialization: ', connectionStatus);
+
   const [actionView, setActionView] = useState(true); // We create a local state 'actionView' and set it to true
 
   // this function handles Time Jump sidebar view
@@ -64,7 +68,14 @@ function MainContainer(): JSX.Element {
   }) => {
     const { action, payload, sourceTab } = message;
     let maxTab: number;
-
+    console.log(
+      'MainContainer messageListener message. action: ',
+      action,
+      'payload: ',
+      payload,
+      'sourceTab: ',
+      sourceTab,
+    );
     if (!sourceTab && action !== 'keepAlive') {
       // if the sourceTab doesn't exist or is 0 and it is not a 'keepAlive' action
       const tabsArray: Array<string> = Object.keys(payload); // we create a tabsArray of strings composed of keys from our payload object
@@ -106,20 +117,29 @@ function MainContainer(): JSX.Element {
   };
 
   useEffect(() => {
+    console.log('MainContainer state view of port at start of useEffect: ', port);
     if (port) return; // only open port once so if it exists, do not run useEffect again
 
     // Connect ot port and assign evaluated result (obj) to currentPort
-    const currentPort = chrome.runtime.connect();
+    const currentPort = chrome.runtime.connect({ name: 'uiPort1' });
 
     // JR: why are we removing the listener just to readd it? logging here
     console.log('messageListener before removing: ', messageListener);
+    console.log(
+      'currentPort hasListener? before removing: ',
+      currentPort.onMessage.hasListener(messageListener),
+    );
     // If messageListener exists on currentPort, remove it
     while (currentPort.onMessage.hasListener(messageListener))
       currentPort.onMessage.removeListener(messageListener);
     console.log('messageListener after removing: ', messageListener);
 
     // Add messageListener to the currentPort
     currentPort.onMessage.addListener(messageListener);
+    console.log(
+      'currentPort hasListener? after re-adding: ',
+      currentPort.onMessage.hasListener(messageListener),
+    );
 
     // If handleDisconnect exists on chrome.runtime, remove it
     while (chrome.runtime.onMessage.hasListener(handleDisconnect))

src/app/slices/mainSlice.ts

@@ -143,7 +143,7 @@ export const mainSlice = createSlice({
         } else if (typeof action.payload === 'object') {
           state.currentTab = action.payload.tabId;
           if (action.payload?.title) state.currentTitle = action.payload.title;
-          console.log('mainSlice setTab currentTitle: ', state.currentTitle);
+          console.log('mainSlice setTab successful! currentTitle: ', state.currentTitle);
           return;
         }
       }

src/extension/background.js

@@ -168,16 +168,17 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // JR: CONSIDER DELETING
   // 12.20.23 commenting out, possible culprit of many in no target bug
-  // if (portsArr.length > 0) {
-  //   portsArr.forEach((bg) => {
-  //     // go through each port object (each Reactime instance)
-  //     bg.postMessage({
-  //       // send passed in action object as a message to the current port
-  //       action: 'changeTab',
-  //       payload: { tabId: activeTab.id, title: activeTab.title },
-  //     });
-  //   });
-  // }
+  if (portsArr.length > 0) {
+    portsArr.forEach((bg) => {
+      console.log('background onConnect. Send changeTab for port ', bg);
+      // go through each port object (each Reactime instance)
+      bg.postMessage({
+        // send passed in action object as a message to the current port
+        action: 'changeTab',
+        payload: { tabId: activeTab.id, title: activeTab.title },
+      });
+    });
+  }
 
   // JR: CONSIDER DELETING
   if (Object.keys(tabsObj).length > 0) {
@@ -189,11 +190,14 @@ chrome.runtime.onConnect.addListener((port) => {
 
   // every time devtool is closed, remove the port from portsArr
   port.onDisconnect.addListener((e) => {
+    console.log('port onDisconnect triggered, portsArr: ', portsArr);
     for (let i = 0; i < portsArr.length; i += 1) {
       if (portsArr[i] === e) {
+        // if (portsArr.length === 1) portsArr[i].sendMessage('portDisconnect'); // JR 12.20.23 try sending message to last remaining port directly prior to it being disconnected
         portsArr.splice(i, 1);
-        chrome.runtime.sendMessage('portDisconnect');
-        console.log(`port ${e} disconnected. Remaining portsArr: `, portsArr);
+        chrome.runtime.sendMessage({ action: 'portDisconnect', port: e.name }); // JR 12.20.23 isn't this supposed to be a port.sendMessage? chrome.runtime sends messages between content script and background.js
+        console.log('spliced portsArr', portsArr);
+        console.log(`port ${e.name} disconnected. Remaining portsArr: `, portsArr);
         break;
       }
     }
@@ -516,6 +520,7 @@ chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
   // });
 
   chrome.windows.getCurrent((window) => {
+    console.log('onContext click window properties', window);
     const invokedScreenHeight = window.height || 1000;
     const invokedScreenTop = window.top || 0;
     const invokedScreenLeft = -400;

src/extension/contentScript.ts

@@ -1,3 +1,7 @@
+chrome.tabs.getCurrent((tab) => {
+  console.log('contentScript loaded on ', tab);
+});
+
 // Web vital metrics calculated by 'web-vitals' npm package to be displayed
 // in Web Metrics tab of Reactime app.
 import { onTTFB, onLCP, onFID, onFCP, onCLS, onINP } from 'web-vitals';
@@ -42,7 +46,13 @@ window.addEventListener('message', (msg) => {
 // FROM BACKGROUND TO CONTENT SCRIPT
 // Listening for messages from the UI of the Reactime extension.
 chrome.runtime.onMessage.addListener((request) => {
-  const { action }: { action: string } = request;
+  console.log(
+    'contentScript received message from background.js. request.action: ',
+    request.action,
+    'request.port',
+    request.port,
+  );
+  const { action, port }: { action: string; port?: string } = request;
   if (action) {
     // Message being sent from background.js
     // This is toggling the record button on Reactime when clicked
@@ -53,6 +63,11 @@ chrome.runtime.onMessage.addListener((request) => {
     if (action === 'jumpToSnap') {
       chrome.runtime.sendMessage(request);
     }
+
+    // JR: adding a response to a port disconnection message from background.js
+    if (action === 'portDisconnect') {
+      console.log(`Port ${port} disconnected!`);
+    }
     // After the jumpToSnap action has been sent back to background js,
     // it will send the same action to backend files (index.ts) for it execute the jump feature
     // '*' == target window origin required for event to be dispatched, '*' = no preference