Connected chrome dev tool to front end (#26)

* commit to handle merges * Delete devtools_bundle.js * Delete devtools_bundle.js.map * added doubly linked list data structure * Added buttons back and forth time travel functionality * Merge last PR with the current chrome dev tools version. * removed console.log from extension * deleted console.log * Minor change to background, extension and inject_script. Commiting before pulling parser functionality * Connecting parser and chrome dev tools. Code is full of console.logs. * Connected dev tools with page. Injected script working, parsing working, time travel working * fixed wrong type for expected Number on TimeSlider

Author: victorvrv

package-lock.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",

package.json

@@ -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/components/App.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/app/container/TimeSlider.jsx

@@ -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/background.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/extension.js

@@ -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/manifest.json

@@ -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/scripts/inject_script_tags.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;