Refresh devtools instance of specific that specific tab when that tab refreshes

Author: victorvrv

src/app/components/App.jsx

@@ -57,30 +57,39 @@ class App extends Component {
     this.actionInPlay = this.actionInPlay.bind(this);
     this.handleBarChange = this.handleBarChange.bind(this);
     this.searchChange = this.searchChange.bind(this);
+    this.resetApp = this.resetApp.bind(this);
   }
 
   componentDidMount() {
-    // *******************************************************
-    // need to impletement setState for filteredData to same value as data
-    // this.setState({ data, filteredData: data });
-    // *******************************************************
-
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
-    chrome.runtime.onConnect.addListener((portFromExtension) => {
-      this.portToExtension = portFromExtension;
-
-      portFromExtension.onMessage.addListener((msg) => {
-        const newData = {
-          action: msg.action,
-          state: msg.state,
-          id: this.state.data.length,
-        };
-        this.setState((state) => ({
-          data: [...state.data, newData],
-          filteredData: [...state.data, newData],
-        }));
-      });
+    chrome.runtime.onConnect.addListener((port) => {
+      if (port.name === 'injected-app') {
+        this.portToExtension = port;
+
+        port.onMessage.addListener((msg) => {
+          const newData = {
+            action: msg.action,
+            state: msg.state,
+            id: this.state.data.length,
+          };
+          this.setState((state) => ({
+            data: [...state.data, newData],
+            filteredData: [...state.data, newData],
+          }));
+        });
+      }
+    });
+
+    // We listen to the message from devtools.js (sent originally from 
+    // background) to refresh our App whenever the user refreshes the webpage.
+    // The msg from background will come with the ID of the current tab.
+    // We only want to refresh our App instance of that specific tab.
+    window.addEventListener('message', (msg) => {
+      const { action, tabId } = msg.data;
+      if (action !== 'refresh_devtool') return;
+      const devtoolsId = chrome.devtools.inspectedWindow.tabId;
+      if (tabId === devtoolsId) this.resetApp();
     });
   }
 
@@ -203,6 +212,17 @@ class App extends Component {
     });
   }
 
+  resetApp() {
+    this.setState({
+      data: [],
+      searchField: '',
+      filteredData: [],
+      isPlaying: false,
+      isRecording: false,
+      isPlayingIndex: 0,
+    });
+  }
+
   render() {
     const {
       action,

src/app/parser.js

@@ -1,7 +1,5 @@
 const parseAndGenerate = require('./scripts/parser');
-
-let portToDevtools;
-const msgsToPanel = [];
+const ports = [];
 
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
@@ -13,16 +11,18 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
     runAt: 'document_end',
   });
 
-  // refresh devtool panel everytime we refresh webpage
-  // console.log('port: ', portToDevtools);
-  // if (portToDevtools) portToDevtools.postMessage({ action: 'refresh_devtool' });
-  // else msgsToPanel.push({ action: 'refresh_devtool' });
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    notifyPorts(
+      { action: 'refresh_devtool', tabId: tabs[0].id },
+      'devtools',
+    );
+  });
 });
 
 
 let interceptedUrl = '';
 function handleRequest(request) {
-  // TODO: filter the request from the webRequest call. 
+  // TODO: filter the request from the webRequest call.
   if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
 
   console.log('intercepting... ', request);
@@ -48,27 +48,20 @@ function handleRequest(request) {
 // The App on the devtools panel start a connection so that it can
 // tell us when to start intercepting the script requests.
 chrome.runtime.onConnect.addListener((port) => {
-  portToDevtools = port;
-
-  // if (msgsToPanel.length > 0) {
-  //   for (let msg of msgsToPanel) port.postMessage(msg);
-  // }
-  // we change the port to null when we disconnect, so that when we refresh
-  // the page by start recording, we can check if (!port) and not refresh
-  // the devtools page.
-  port.onDisconnect.addListener(() => {
-    portToDevtools = null;
-  });
+  if (ports) ports.push(port);
 
   port.onMessage.addListener((msg) => {
-    if (!msg.turnOnDevtool) return;
-    interceptedUrl = msg.url;
-    addScriptInterception();
+    if (msg.turnOnDevtool) {
+      interceptedUrl = msg.url;
+      addScriptInterception();
 
-    // after activating our interception script, we refresh the active tab
-    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      chrome.tabs.update(tabs[0].id, { url: tabs[0].url });
-    });
+      // after activating our interception script, we refresh the active tab
+      chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+        chrome.tabs.update(tabs[0].id, { url: tabs[0].url });
+      });
+    } else {
+      console.log('Got a msg not turnOnDevtool: ', msg);
+    }
   });
 });
 
@@ -88,3 +81,14 @@ function sendMessageToContent(codeString) {
     chrome.tabs.sendMessage(tabs[0].id, { codeString, index });
   });
 }
+
+function notifyPorts(msg, portName) {
+  ports.forEach((port) => {
+    if (portName && (port.name !== portName)) return;
+    try {
+      port.postMessage(msg);
+    } catch {
+      console.log('notifyPorts has found some closed conections.');
+    }
+  });
+}

src/browser/chrome/background.js

@@ -1,14 +1,23 @@
 chrome.devtools.panels.create('React Rewind',
   null,
   'devtools.html',
-  (extensionPanel) => {
-    const port = chrome.runtime.connect({ name: 'devtools' });
-    port.onMessage.addListener((msg) => {
-      // console.log('got msg: ', msg);
-      if (msg.action === 'refresh_devtool') extensionPanel.setPage('devtools.html');
+  (devtoolsPanel) => {
+    const backgroundPageConnection = chrome.runtime.connect({
+      name: 'devtools',
     });
 
-    extensionPanel.onShown.addListener((panelWindow) => {
-      panelWindow.backgroundPort = port;
+    devtoolsPanel.onShown.addListener(function tmp(panelWindow) {
+      // Run once only
+      devtoolsPanel.onShown.removeListener(tmp);
+
+      const windowP = panelWindow;
+      windowP.backgroundPort = backgroundPageConnection;
+
+      backgroundPageConnection.onMessage.addListener((message) => {
+        // When we get a msg from background telling us that we need
+        // to refresh the App, we send it to App via window.PostMessage()
+        if (message.action === 'refresh_devtool') windowP.postMessage(message);
+      });
     });
+
   });