Connected chrome dev tool to front end

package.json

@@ -5,7 +5,8 @@
   "main": "index.js",
   "scripts": {
     "lint": "eslint \"*/**/*.{js,jsx}\"",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "bundle_bg": "browserify src/browser/chrome/background.js -o src/browser/chrome/devtools_bundle/bg_bundle.js"
   },
   "repository": {
     "type": "git",

src/app/components/App.jsx

@@ -75,11 +75,11 @@ class App extends Component {
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
-    if (this.state.isPlayingIndex === this.state.data.length - 1) {
-      this.state.isPlayingIndex = 0;
+    if (this.state.isPlayingIndex > this.state.data.length - 1) {
+      this.setState({ isPlayingIndex: 0 });
     }
 
-    console.log('isplaying')
+    console.log('isplaying');
     let { isPlaying } = this.state;
     isPlaying = !isPlaying;
     this.setState({ isPlaying });
@@ -98,14 +98,17 @@ class App extends Component {
   }
 
   actionInPlay() {
-    this.isPlayingIndex++;
+    let { isPlayingIndex } = this.state;
+    if (isPlayingIndex >= this.state.data.length - 1) isPlayingIndex = 0;
+
+    this.setState({ isPlayingIndex: isPlayingIndex + 1 });
+    const { id, action, state } = this.state.data[isPlayingIndex + 1];
 
-    const { id, action, state } = this.state.data[this.isPlayingIndex];
     setTimeout(() => {
       this.setState((prev, props) => {
-        return { ...prev, id, action, state }
+        return { ...prev, id, action, state };
       });
-      if (this.state.isPlaying && this.isPlayingIndex < this.state.data.length - 1) {
+      if (this.state.isPlaying && isPlayingIndex + 1 < this.state.data.length - 1) {
         this.actionInPlay();
       } else {
         this.setState({ isPlaying: false });
@@ -142,7 +145,7 @@ class App extends Component {
       id,
       action,
       state,
-      isPlayingIndex: e.target.value,
+      isPlayingIndex: parseInt(e.target.value),
     });
   }
 

src/app/container/TimeSlider.jsx

@@ -22,9 +22,9 @@ const TimeSlider = (props) => {
     <>
       <SliderWrapper>
         <Button onClick={setIsRecording}>{isRecording ? 'PAUSE' : 'RECORD'}</Button>
-        <Button onClick={setIsPlaying}>{ isPlaying ? <text>||</text> : <text>&#9658;</text> }</Button>
-      <input type="range" min="0" max={data.length - 1} value={isPlayingIndex}
-      onChange={handleBarChange} />
+        <Button onClick={setIsPlaying}>{isPlaying ? '||' : '►'}</Button>
+        <input type="range" min="0" max={data.length - 1} value={isPlayingIndex}
+         onChange={handleBarChange} />
       </SliderWrapper>
     </>
   );

src/browser/chrome/background.js

@@ -1,4 +1,4 @@
-const parseAndGenerate = require('./parser');
+const parseAndGenerate = require('./scripts/parser');
 
 chrome.tabs.onUpdated.addListener((id, info, tab) => {
   if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
@@ -10,31 +10,37 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
   });
 });
 
-chrome.runtime.onMessage.addListener((msg) => {
-  if (msg.react_check) {
-    console.log('Background got the react_check! Resending...');
-
-    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
-      chrome.tabs.sendMessage(tabs[0].id, msg);
-    });
-  }
-});
-
+let reqIndex = 0;
+const urlCache = {};
 chrome.webRequest.onBeforeRequest.addListener(
   (request) => {
-    if (request.type === 'script' && !request.url.startsWith('chrome')) {
-      console.log('redirecting... ORIGINAL: ', request);
-      fetch(request.url)
-        .then(r => r.text())
-        .then((codeString) => {
-          const editedCode = parseAndGenerate(codeString);
-          if (!editedCode) return { redirectUrl: request.url };
-          //TODO: Define sendMessage and redirectURL
-          // sendMessageToContent(editedCode);
-          // return { redirectUrl: 'javascript:' };
-        });
+    if (request.type === 'script' && !request.url.startsWith('chrome')
+    && request.frameId === 0) {
+      // TODO: adjust comment
+      // Else we need to check wether or not this contains the react
+      // library. If it does, we need to send the edit javascript to
+      // out content script, so it can inject into the page. If it doesnt,
+      // we need to send the url to our content script so that it can
+      // add it to the page <script src=URL> AND add it to our cache, so
+      // that when we intercept it, we dont block it.
+      const syncRequest = new XMLHttpRequest();
+      syncRequest.open('GET', request.url, false);
+      syncRequest.send(null);
+      console.log(`Status: ${syncRequest.status} - Size of response: ${syncRequest.responseText.length}`);
+
+      sendMessageToContent(parseAndGenerate(syncRequest.responseText));
+
+      return { redirectUrl: 'javascript:' };
     }
   },
   { urls: ['<all_urls>'] },
   ['blocking'],
 );
+
+function sendMessageToContent(codeString) {
+  const index = reqIndex++;
+  console.log(`Sending request ${index}.`);
+  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+    chrome.tabs.sendMessage(tabs[0].id, { codeString, index });
+  });
+}

src/browser/chrome/extension.js

@@ -3,6 +3,8 @@ const port = chrome.runtime.connect({
 });
 
 port.onMessage.addListener((msg) => {
+  // This is where we get messages from the App component.
+  // We get an object { type: 'TIMETRAVEL', direction: 'forward' }
   window.postMessage(msg);
 });
 

src/browser/chrome/manifest.json

@@ -7,11 +7,11 @@
     "default_popup": "page_action.html"
   },
   "background": {
-    "scripts": ["bundle.js"]
+    "scripts": ["devtools_bundle/bg_bundle.js"]
   },
   "content_scripts": [
     {
-      "matches": ["<all_urls>", "http://*/*", "https://*/*"],
+      "matches": ["<all_urls>"],
       "js": ["scripts/inject_script_tags.js"],
       "run_at":"document_start"
     }

src/browser/chrome/scripts/inject_script_tags.js

@@ -13,3 +13,38 @@ timeTravelScript.src = chrome.runtime.getURL('scripts/time_travel.js');
 linkedListScript.onload = timeTravelScript.onload = function removeScriptTag() {
   this.remove();
 };
+
+const scriptsToParse = [];
+let lastReceivedMsgTime = null;
+
+chrome.runtime.onMessage.addListener(scheduleWork);
+
+function scheduleWork(work) {
+  // We want to add the scripts to a work array. When its been 100s
+  // without receiving any new scripts, then we sort the array and
+  // add all scripts to the page.
+  if (work) scriptsToParse.push(work);
+
+  if (Date.now() - lastReceivedMsgTime > 100 && lastReceivedMsgTime !== null) {
+    lastReceivedMsgTime = null;
+    addScriptToPage();
+  } else {
+    if (work) lastReceivedMsgTime = Date.now();
+    setTimeout(scheduleWork, 50);
+  }
+}
+
+function addScriptToPage() {
+  // First we sort the array by index, then we add everything to page
+  scriptsToParse.sort((a, b) => a.index - b.index);
+  while (scriptsToParse.length > 0) {
+    const { codeString } = scriptsToParse.shift();
+
+    const script = document.createElement('script');
+    script.innerHTML = codeString;
+    (document.head || document.documentElement).appendChild(script);
+    script.onload = function removeScriptTag() {
+      this.remove();
+    };
+  }
+}

src/browser/chrome/parser.js → src/browser/chrome/scripts/parser.js

@@ -5,12 +5,11 @@ const escodegen = require('escodegen');
 const _ = require('lodash');
 
 // declare functions to insert
-// TODO: Un-comment timeTravelTracker
 function useReducerReplacement() {
   const dispatcher = resolveDispatcher();
   function reducerWithTracker(state, action) {
     const newState = reducer(state, action);
-    //  timeTravelTracker[timeTravelTracker.length - 1].actionDispatched = true;
+    timeTravelTracker[timeTravelTracker.length - 1].actionDispatched = true;
     window.postMessage({
       type: 'DISPATCH',
       data: {
@@ -22,7 +21,15 @@ function useReducerReplacement() {
   }
   return dispatcher.useReducer(reducerWithTracker, initialArg, init);
 }
+
 function commitAllHostEffectsReplacement() {
+  if (Object.keys(funcStorage).length === 0) {
+    funcStorage.commitDeletion = commitDeletion;
+    funcStorage.commitPlacement = commitPlacement;
+    funcStorage.commitWork = commitWork;
+    funcStorage.prepareUpdate = prepareUpdate;
+  }
+
   while (nextEffect !== null) {
     {
       setCurrentFiber(nextEffect);
@@ -51,12 +58,9 @@ function commitAllHostEffectsReplacement() {
       case Placement:
       {
         // editbyme
-        window.postMessage({
-          type: 'EFFECT',
-          data: {
+        timeTravelTracker.push({
             primaryEffectTag: 'PLACEMENT',
             effect: _.cloneDeep(nextEffect),
-          },
         });
 
         commitPlacement(nextEffect);
@@ -84,13 +88,10 @@ function commitAllHostEffectsReplacement() {
       case Update:
       {
         // editbyme
-        window.postMessage({
-          type: 'EFFECT',
-          data: {
-            primaryEffectTag: 'UPDATE',
-            effect: _.cloneDeep(nextEffect),
-            current: _.cloneDeep(nextEffect.alternate),
-          },
+        timeTravelTracker.push({
+          primaryEffectTag: 'UPDATE',
+          effect: _.cloneDeep(nextEffect),
+          current: _.cloneDeep(nextEffect.alternate),
         });
 
         let _current2 = nextEffect.alternate;
@@ -100,12 +101,9 @@ function commitAllHostEffectsReplacement() {
       case Deletion:
       {
         // editbyme
-        window.postMessage({
-          type: 'EFFECT',
-          data: {
-            primaryEffectTag: 'DELETION',
-            effect: _.cloneDeep(nextEffect),
-          },
+        timeTravelTracker.push({
+          primaryEffectTag: 'DELETION',
+          effect: _.cloneDeep(nextEffect),
         });
 
         commitDeletion(nextEffect);
@@ -122,34 +120,37 @@ function commitAllHostEffectsReplacement() {
 
 // traverse ast to find method and replace body with our node's body
 function traverseTree(replacementNode, functionName, ast) {
+  console.log('traverse called');
   estraverse.replace(ast, {
     enter(node) {
       if (node.type === 'FunctionDeclaration') {
         if (node.id.name === functionName) {
           node.body = replacementNode.body[0].body;
+          console.log('From parser. REPLACING!', node.id.name);
         }
       }
     },
   });
 }
 
 const parseAndGenerate = (codeString) => {
-  if (codeString.search('react')) {
+  if (codeString.search('react') !== -1) {
     const ast = esprima.parseModule(codeString);
+
     // parse react-dom code
-    if (codeString.search('react-dom')) {
-      const injectableCommitAllHostEffects = esprima.parseScript(commitAllHostEffectsReplacement.toString());
-      traverseTree(injectableCommitAllHostEffects, 'commitAllHostEffects', ast);
-    } else {
-      // parse react code
-      const injectableUseReducer = esprima.parseScript(useReducerReplacement.toString());
-      traverseTree(injectableUseReducer, 'useReducer', ast);
-    }
+    const injectableCommitAllHostEffects = esprima.parseScript(commitAllHostEffectsReplacement.toString());
+    traverseTree(injectableCommitAllHostEffects, 'commitAllHostEffects', ast);
+
+    // parse react code
+    const injectableUseReducer = esprima.parseScript(useReducerReplacement.toString());
+    traverseTree(injectableUseReducer, 'useReducer', ast);
+
     const code = escodegen.generate(ast);
+    console.log('returning code.');
     return code;
   }
-  return -1;
+  console.log('returning string.');
+  return codeString;
 };
 
-// }
 module.exports = parseAndGenerate;