Initial state of dev tools and a few components change

.gitignore

@@ -1 +1,2 @@
 /node_modules
+/devtools_bundle

src/app/components/App.jsx

@@ -14,16 +14,30 @@ class App extends Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      data: []
+    };
 
     this.addActionToView = this.addActionToView.bind(this);
     // this.toTheFuture = this.toTheFuture.bind(this);
   }
 
+  componentDidMount() {
+    // adds listener to the effects that are gonna be sent from
+    // our edited useReducer from the 'react' library.
+    chrome.runtime.onConnect.addListener((portFromExtension) => {
+      portFromExtension.onMessage.addListener(msg => {
+        const newData = { action: msg.action, state: msg.state, id: this.state.data.length };
+        const newDataArray = [...this.state.data, newData];
+        this.setState({ data: newDataArray });
+      });
+    });
+  }
+
   // function to select an event from the data
   // and set state with all required info
   addActionToView(e) {
-    const actionToView = data.filter(action => e.target.id === String(action.id));
+    const actionToView = this.state.data.filter(action => e.target.id === String(action.id));
     const {
       action, id, payload, state,
     } = actionToView[0];
@@ -54,12 +68,12 @@ class App extends Component {
 
   render() {
     const {
-      action, id, payload, state,
+      action, id, payload, state, data
     } = this.state;
     return (
       <SplitPane
         left={
-          <Events addAction={this.addActionToView} />
+          <Events data={data} addAction={this.addActionToView} />
         }
         right={
           (

src/app/components/DetailCards/Actions/ActionsDisplay.jsx

@@ -2,14 +2,14 @@ import React from 'react';
 
 export default function Actions(props) {
   // renders action information
-  const { action, payload } = props;
+  const { action } = props;
   return (
     <>
       action:
-      {action || 'select an event'}
+      {action.type || 'select an event'}
       <br></br>
       payload:
-      {payload || 'select an event'}
+      {action.payload || 'select an event'}
     </>
   );
 }

src/app/components/EventCards/EventsDisplay.jsx

@@ -11,14 +11,11 @@ import { EventsWrapper } from '../../styles/Events.jsx';
 import { DataContext } from '../../index.js'
 
 export default function Events(props) {
-  // data context instance created
-  const data = useContext(DataContext);
-
   return (
     <EventsWrapper>
-      {data.map((e, i) => (
+      {props.data.map((e, i) => (
         <EventCreator
-          action={e.action}
+          action={e.action.type}
           key={i}
           id={e.id}
           addAction={props.addAction}

src/app/container/Events.jsx

@@ -15,7 +15,7 @@ class Events extends Component {
     return (
       <>
         <EventsNav />
-        <EventsDisplay addAction={addAction} />
+        <EventsDisplay data={this.props.data} addAction={addAction} />
       </>
     );
   }

src/app/index.js

@@ -2,12 +2,6 @@ import React from "react";
 import ReactDOM from "react-dom";
 import App from "./components/App.jsx";
 
-// data
-import data from './data.jsx'
-export const DataContext = React.createContext();
-
 ReactDOM.render(
-  <DataContext.Provider value={data}>
-    <App />
-  </DataContext.Provider>, document.getElementById('root')
+    <App />, document.getElementById('root')
 );

src/app/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "start": "nodemon server/server.js",
     "start:dev": "webpack-dev-server --mode development --open --hot",
-    "build": "webpack --mode production"
+    "build": "webpack --watch"
   },
   "babel": {
     "presets": [

src/app/webpack.config.js

@@ -1,20 +1,17 @@
 var path = require('path');
-var HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
+  mode: 'development',
   entry: './index.js',
   output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'index_bundle.js'
+    path: path.resolve(__dirname, '../browser/chrome/devtools_js'),
+    filename: 'devtools_bundle.js'
   },
   devtool: 'source-map',
   module: {
     rules: [
       { test: /\.(js|jsx)$/, use: 'babel-loader' },
       { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}
     ]
-  },
-  plugins: [new HtmlWebpackPlugin({
-    template: './index.html'
-  })]
+  }
 }

src/browser/chrome/background.js

@@ -0,0 +1,34 @@
+chrome.tabs.onUpdated.addListener(function(id, info, tab) {
+  if (tab.status !== 'complete' || tab.url.startsWith('chrome')) return;
+
+  chrome.pageAction.show(tab.id);
+  chrome.tabs.executeScript(null, {
+    file: 'extension.js',
+    runAt: 'document_end'
+  });
+});
+
+chrome.runtime.onMessage.addListener(msg => {
+  if (msg.hasOwnProperty('init_app') && msg['init_app']) {
+    // the injected script is gonna tell 
+  } else if (msg['react_check']) {
+    console.log('Background got the react_check! Resending...');
+
+    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
+      chrome.tabs.sendMessage(tabs[0].id, msg);
+    });
+  }
+});
+
+// let shouldRedirect = true;
+// chrome.webRequest.onBeforeRequest.addListener(
+//   function(details) {
+//     if (details.type === 'script' && shouldRedirect) {
+//       console.log('redirecting... ORIGINAL: ', details);
+//       shouldRedirect = false;
+//       return { redirectUrl: chrome.extension.getURL('hack.js') };
+//     }
+//   }, 
+//   { urls: ["<all_urls>"] },
+//   ["blocking"]
+// );

src/browser/chrome/devtools.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>React Rewind</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/javascript" src="./devtools_bundle/devtools_bundle.js"></script>
+  <script type="text/javascript" src="./devtools_bundle/devtools.js"></script>
+</body>
+</html>

src/browser/chrome/extension.js

@@ -0,0 +1,21 @@
+chrome.runtime.onMessage.addListener(msg => {
+  if (msg['react_check']) {
+    console.log('Extension got the react_check!');
+  }
+})
+console.log('Now listening for messages...');
+
+let port = chrome.runtime.connect({
+  name: "Injected-Background Connection" 
+});
+
+port.onDisconnect.addListener(() => console.log('Disconecting...'));
+
+window.addEventListener("message", msg => {
+  console.log(msg);
+  if (msg.data.type === 'DISPATCH') {
+    // sends message to devtools
+    console.log('Posting msg: ', msg);
+    port.postMessage(msg.data.data);
+  }
+});

src/browser/chrome/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "React Rewind",
+  "version": "1.0",
+  "description": "Time travel",
+  "manifest_version": 2,
+  "page_action": {
+    "default_popup": "page_action.html"
+  },
+  "background": {
+    "scripts": ["background.js"]
+  },
+  "permissions": [
+    "<all_urls>",
+    "tabs",
+    "webRequest",
+    "webRequestBlocking"
+  ],
+  "web_accessible_resources": [
+
+  ],
+  "devtools_page": "devtools.html"
+}