Keeps conexion open from App to the original extension script on every refresh

Author: victorvrv

package.json

@@ -26,8 +26,6 @@
     "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "esprima": "^4.0.1",
-    "estraverse": "^4.2.0",
-    "lodash": "^4.17.11",
-    "lodash.clonedeep": "^4.5.0"
+    "estraverse": "^4.2.0"
   }
 }

src/app/components/App.jsx

@@ -71,7 +71,7 @@ class App extends Component {
     // adds listener to the effects that are gonna be sent from
     // our edited useReducer from the 'react' library.
     chrome.runtime.onConnect.addListener((port) => {
-      if (port.name !== 'injected-app') return;
+      if (port.name !== 'injected-app' || this.portToExtension) return;
 
       this.portToExtension = port;
 
@@ -90,7 +90,7 @@ class App extends Component {
         // search field
         const { searchField } = this.state;
         const newDataActionType = newData.action.type.toLowerCase();
-        
+
         // get the date everytime an action fires and add it to state
 
         const eventTime = Date.now();
@@ -140,18 +140,18 @@ class App extends Component {
   }
 
   setIsRecording() {
-    // This variable will prevent the app from refreshing when we refresh 
-    // the userpage.
-    this.justStartedRecording = true;
-    const { isRecording, hasInjectedScript } = this.state;
+    const { isRecording } = this.state;
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
 
     // if we are hitting the pause or re-starting the record session
-    if (isRecording || hasInjectedScript) return;
+    if (isRecording || this.hasInjectedScript) return;
 
-    this.setState({ hasInjectedScript: true });
+    // This variable will prevent the app from refreshing when we refresh 
+    // the userpage.
+    this.justStartedRecording = true;
+    this.hasInjectedScript = true;
 
     // we query the active window so we can send it to the background script
     // so it knows on which URL to run our devtool.
@@ -260,6 +260,7 @@ class App extends Component {
     if (isPlayingIndex === 0) return;
 
     if (!this.portToExtension) return console.error('No connection on stored port.');
+    console.log('Sending timetravel PAST to extension');    
     this.portToExtension.postMessage({
       type: 'TIMETRAVEL',
       direction: 'backwards',
@@ -278,11 +279,12 @@ class App extends Component {
 
   resetApp() {
     if (this.justStartedRecording) {
-      console.log('not reseting...');
       this.justStartedRecording = false;
       return;
     }
-    console.log('reseting...');
+
+    this.justStartedRecording = false;
+    this.hasInjectedScript = false;
     this.setState({
       data: [],
       searchField: '',
@@ -294,6 +296,7 @@ class App extends Component {
       action: {},
       state: {},
       prevState: {},
+      eventTimes: [],
     });
   }
 

src/browser/chrome/background.js

@@ -2,8 +2,8 @@ const parseAndGenerate = require('./scripts/parser');
 const injectBundleStr = require('./scripts/inject_bundle');
 
 let ports = [];
-let interceptedUrl = '';
 let reqIndex = 0;
+const interceptedURLs = {};
 
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
@@ -15,19 +15,26 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
     runAt: 'document_end',
   });
 
-  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-    interceptedUrl = '';
+  if (interceptedURLs.hasOwnProperty(tab.url)) {
+    delete interceptedURLs[tab.url];
     reqIndex = 0;
-    notifyPorts(
-      { action: 'refresh_devtool', tabId: tabs[0].id },
-      'devtools',
-    );
-  });
+  }
+
+  notifyPorts(
+    { action: 'refresh_devtool', tabId: tab.id },
+    'devtools',
+  );
+
 });
 
 function handleRequest(request) {
   // TODO: filter the request from the webRequest call.
-  if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
+  // We check wether or not the URL should have its requests intercepted
+  let shouldInterceptUrl = false;
+  Object.keys(interceptedURLs).forEach((url) => {
+    if (url.startsWith(request.initiator)) shouldInterceptUrl = true;
+  });
+  if (!shouldInterceptUrl) return { cancel: false };
 
   if (request.type === 'script' && !request.url.startsWith('chrome')
     && request.frameId === 0 && ((request.url.slice(-3) === '.js')
@@ -57,18 +64,15 @@ chrome.runtime.onConnect.addListener((port) => {
   if (ports) ports.push(port);
 
   port.onMessage.addListener((msg) => {
-    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 });
-      });
-
-    } else {
-      console.log('Got a msg not turnOnDevtool: ', msg);
-    }
+    if (!msg.turnOnDevtool) return;
+    console.log('got turn on: ', msg);
+    interceptedURLs[msg.url] = true;
+    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 });
+    });
   });
 });
 

src/browser/chrome/extension.js

@@ -6,22 +6,13 @@
   port.onMessage.addListener((msg) => {
     // This is where we get messages from the App component.
     // We get an object { type: 'TIMETRAVEL', direction: 'forward' }
+    console.log('Got msg to timetravel: ', msg);
     window.postMessage(msg);
   });
 
-  port.onDisconnect.addListener(() => console.log('Disconecting...'));
-
   window.addEventListener('message', (msg) => {
-    // TODO: fix comments. Are we gonna receive msgs from reactDOM here??
-    // When our injected scripts post messages (both from the 'react'
-    // and 'react-dom'), we receive it here and send it to our app loaded
-    // on the DevTool. If storage.isAppTurnedOff is false, it means that
-    // the user started the application, but stopped recording. So even
-    // though our injected scripts keep posting messages, we don't want to
-    // send them over to the App anymore.
-    chrome.storage.sync.get(['isAppTurnedOn'], (status) => {
-      // if (!status.isAppTurnedOn) return;
-      if (msg.data.type === 'DISPATCH') port.postMessage(msg.data.data);
-    });
+    // When our injected scripts post messages (from useRedute in 'react'),
+    // we receive it here and send it to our app loaded on the DevTool.
+    if (msg.data.type === 'DISPATCH') port.postMessage(msg.data.data);
   });
 }());

src/browser/chrome/manifest.json

@@ -21,12 +21,9 @@
     "tabs",
     "storage",
     "webRequest",
-    "webRequestBlocking",
-    "webNavigation"
+    "webRequestBlocking"
   ],
   "web_accessible_resources": [
-    "scripts/linked_list.js",
-    "scripts/time_travel.js",
     "scripts/deepclone_bundle.js"
   ],
   "devtools_page": "devtools.html"

src/browser/chrome/page_action.html

@@ -8,7 +8,8 @@
 </head>
 <body>
   Page Action
-  <button id="color_btn">CHANGE COLOR</button>
+  <a href="http://www.google.com">Test - goto google</a>
+  <button id="color_btn">CHANGE COLOR!</button>
   <script src="page_action.js"></script>
 </body>
 </html>