fixed communcation bug between frontend and backend

.gitignore

@@ -4,3 +4,4 @@ dist/
 extension/bundle.js
 package/react-time-travel-1.0.1.tgz
 tictactoe
+parents

extension/background.js

@@ -16,17 +16,23 @@ chrome.runtime.onConnect.addListener((port) => {
     bg.postMessage(snapshotArr);
   }
 
-  // receive snapshot from background and send it to contentScript
+  // receive snapshot from devtools and send it to contentScript
   port.onMessage.addListener((msg) => {
-    console.log('contentScript -> background', msg);
-    chrome.runtime.sendMessage({ data: msg });
+    console.log('background -> contentScript', msg);
+    // find active tab
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      // send message to tab
+      chrome.tabs.sendMessage(tabs[0].id, msg);
+    });
   });
 });
 
 // background.js recieves message from contentScript.js
 chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // if port is not null, send a message to devtools
   if (bg) {
+    // get active tab id
+    // get snapshot arr from tab object
     snapshotArr.push(request);
     bg.postMessage(snapshotArr);
     // else, push snapshot into an array

extension/contentScript.js

@@ -13,5 +13,5 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
   // send the message to npm package
   console.log('devtools -> contentScript', request);
   const { action } = request;
-  if (action === 'jumpToSnap') window.postMessage({ request });
+  if (action === 'jumpToSnap') window.postMessage(request);
 });