Victor dev

package.json

@@ -18,16 +18,15 @@
     "babel-eslint": "^10.0.1",
     "eslint": "^5.14.1",
     "eslint-plugin-import": "^2.16.0",
-    "eslint-plugin-react": "^7.12.4"
+    "eslint-plugin-react": "^7.12.4",
+    "watchify": "^3.11.1"
   },
   "dependencies": {
     "escodegen": "^1.11.1",
     "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",
-    "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "lodash": "^4.17.11"
   }
 }

src/app/components/App.jsx

@@ -47,7 +47,8 @@ class App extends Component {
       isPlayingIndex: 0,
     };
 
-    this.port = null;
+    this.portToExtension = null;
+
     this.addActionToView = this.addActionToView.bind(this);
     this.toTheFuture = this.toTheFuture.bind(this);
     this.toThePast = this.toThePast.bind(this);
@@ -59,15 +60,10 @@ class App extends Component {
   }
 
   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.port = portFromExtension;
+      this.portToExtension = portFromExtension;
 
       portFromExtension.onMessage.addListener((msg) => {
         const newData = {
@@ -76,11 +72,11 @@ class App extends Component {
           id: this.state.data.length,
         };
         this.setState((state) => ({
-          data: [...state.data, newData]
+          data: [...state.data, newData],
+          filteredData: [...state.data, newData],
         }));
       });
     });
-  }
 
   // functionality to change 'play' button to 'stop'
   setIsPlaying() {
@@ -103,6 +99,18 @@ class App extends Component {
     this.setState(state => ({
       isRecording: !state.isRecording,
     }));
+
+    // we query the active window so we can send it to the background script
+    // so it knows on which URL to run our devtool.
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      const { url } = tabs[0];
+
+      // backgroundPort is a variable made avaiable by the devtools.js 
+      backgroundPort.postMessage({
+        turnOnDevtool: true,
+        url,
+      });
+    });
   }
 
   actionInPlay() {
@@ -170,17 +178,17 @@ class App extends Component {
 
   // function to travel to the FUTURE
   toTheFuture() {
-    if (!this.port) return console.error('No connection on stored port.');
-    this.port.postMessage({
+    if (!this.portToExtension) return console.error('No connection on stored port.');
+    this.portToExtension.postMessage({
       type: 'TIMETRAVEL',
       direction: 'forward',
     });
   }
 
   // function to travel to the PAST
   toThePast() {
-    if (!this.port) return console.error('No connection on stored port.');
-    this.port.postMessage({
+    if (!this.portToExtension) return console.error('No connection on stored port.');
+    this.portToExtension.postMessage({
       type: 'TIMETRAVEL',
       direction: 'backwards',
     });

src/browser/chrome/background.js

@@ -10,33 +10,58 @@ chrome.tabs.onUpdated.addListener((id, info, tab) => {
   });
 });
 
-let reqIndex = 0;
-const urlCache = {};
-chrome.webRequest.onBeforeRequest.addListener(
-  (request) => {
-    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'],
-);
 
+let interceptedUrl = '';
+function handleRequest(request) {
+  // TODO: filter the request from the webRequest call. 
+  if (!interceptedUrl.startsWith(request.initiator)) return { cancel: false };
+
+  console.log('intercepting... ', request);
+  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:' };
+  }
+}
+
+// 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) => {
+  port.onMessage.addListener((msg) => {
+    if (!msg.turnOnDevtool) return;
+    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 });
+    });
+  });
+});
+
+function addScriptInterception() {
+  chrome.webRequest.onBeforeRequest.removeListener(handleRequest);
+  chrome.webRequest.onBeforeRequest.addListener(
+    handleRequest,
+    { urls: ['<all_urls>'] },
+    ['blocking'],
+  );
+}
+
+let reqIndex = 0;
 function sendMessageToContent(codeString) {
   const index = reqIndex++;
   console.log(`Sending request ${index}.`);

src/browser/chrome/devtools.js

@@ -1 +1,10 @@
-chrome.devtools.panels.create('React Rewind', null, 'devtools.html');
+chrome.devtools.panels.create('React Rewind',
+  null,
+  'devtools.html',
+  (extensionPanel) => {
+    const port = chrome.runtime.connect({ name: 'devtools' });
+    port.onMessage.addListener(() => {});
+    extensionPanel.onShown.addListener((panelWindow) => {
+      panelWindow.backgroundPort = port;
+    });
+  });

src/browser/chrome/manifest.json

@@ -0,0 +1,31 @@
+{
+  "name": "React Rewind",
+  "version": "1.0",
+  "description": "Time travel",
+  "manifest_version": 2,
+  "page_action": {
+    "default_popup": "page_action.html"
+  },
+  "background": {
+    "scripts": ["devtools_bundle/bg_bundle.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["scripts/inject_script_tags.js"],
+      "run_at":"document_start"
+    }
+  ],
+  "permissions": [
+    "<all_urls>",
+    "tabs",
+    "storage",
+    "webRequest",
+    "webRequestBlocking"
+  ],
+  "web_accessible_resources": [
+    "scripts/linked_list.js",
+    "scripts/time_travel.js"
+  ],
+  "devtools_page": "devtools.html"
+}