Data flows from npm package to chrome extension

extension/app/components/Action.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 const Action = (props) => {
   const {
-    snapshot, selected, handleChangeSnapshot, index,
+    snapshot, selected, handleChangeSnapshot, handleSendSnapshot, index,
   } = props;
   return (
     <div
@@ -12,8 +12,8 @@ const Action = (props) => {
         handleChangeSnapshot(index);
       }}
     >
-      {snapshot.state}
-      {selected.toString()}
+      {index}
+      <button onClick={() => handleSendSnapshot(index)}>Jump</button>
     </div>
   );
 };

extension/app/containers/ActionContainer.jsx

@@ -7,9 +7,11 @@ class ActionContainer extends Component {
   }
 
   render() {
-    const { snapshots, snapshotIndex, handleChangeSnapshot } = this.props;
+    const {
+      snapshots, snapshotIndex, handleChangeSnapshot, handleSendSnapshot,
+    } = this.props;
     let actionsArr = [];
-    if (snapshots) {
+    if (snapshots.length > 0) {
       actionsArr = snapshots.map((snapshot, index) => {
         const selected = index === snapshotIndex;
         return (
@@ -19,6 +21,7 @@ class ActionContainer extends Component {
             snapshot={snapshot}
             selected={selected}
             handleChangeSnapshot={handleChangeSnapshot}
+            handleSendSnapshot={handleSendSnapshot}
           />
         );
       });

extension/app/containers/MainContainer.jsx

@@ -8,34 +8,38 @@ class MainContainer extends Component {
   constructor() {
     super();
     this.state = {
-      snapshots: [{ state: 'snapshot1' , state2: 'othercomp snapshot1'}, { state: 'snapshot2' }, { state: 'snapshot3' }],
+      snapshots: [],
       snapshotIndex: 0,
+      port: null,
     };
 
     this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
+    this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
   }
 
   componentDidMount() {
-    // add a listener to capture messages from our backend
-    // this should be in the inject script
-    // window.addEventListener(
-    //   'message',
-    //   (event) => {
-    //     // We only accept messages from ourselves
-    //     if (event.source !== window) return;
-    //     console.log(`Message received from backend: ${event.payload}`);
-    //   },
-    //   false,
-    // );
+    const port = chrome.runtime.connect();
+    port.onMessage.addListener((snapshots) => {
+      console.log('message from background script', snapshots);
+      this.setState({ snapshots });
+    });
+    port.onDisconnect.addListener((obj) => {
+      console.log('disconnected port', obj);
+    });
+    this.setState({ port });
   }
 
+  // this method changes the snapshotIndex state
+  // snapshotIndex could be changed from either the ActionContainer or the TravelContainer
   handleChangeSnapshot(snapshotIndex) {
-    console.log('handleChangeSnapshot', snapshotIndex);
-    // change snapshotIndex
-    // snapshotIndex could be changed from either the ActionContainer or the TravelContainer
     this.setState({ snapshotIndex });
   }
 
+  handleSendSnapshot(snapshotIndex) {
+    const { snapshots, port } = this.state;
+    port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
+  }
+
   render() {
     const { snapshots, snapshotIndex } = this.state;
 
@@ -48,13 +52,14 @@ class MainContainer extends Component {
             snapshots={snapshots}
             snapshotIndex={snapshotIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
+            handleSendSnapshot={this.handleSendSnapshot}
           />
           <StateContainer snapshot={snapshots[snapshotIndex]} />
         </div>
         <TravelContainer
-          snapshotsLength = {snapshots.length}
-          handleChangeSnapshot = {this.handleChangeSnapshot}
-          snapshotIndex = {snapshotIndex}
+          snapshotsLength={snapshots.length}
+          handleChangeSnapshot={this.handleChangeSnapshot}
+          snapshotIndex={snapshotIndex}
         />
       </div>
     );

extension/app/containers/StateContainer.jsx

@@ -1,23 +1,21 @@
 import React, { Component } from 'react';
 import ReactJson from 'react-json-view';
 
+const JsonDisplay = snapshot => (
+  <ReactJson enableClipboard={false} theme="solarized" groupArraysAfterLength={50} src={snapshot} />
+);
 class StateContainer extends Component {
   constructor(props) {
     super(props);
   }
 
   render() {
+    let snapshotObjs = [];
     const { snapshot } = this.props;
-    return (
-      <div className="state-container">
-        <ReactJson
-          enableClipboard={false}
-          theme="solarized"
-          groupArraysAfterLength={50}
-          src={snapshot}
-        />
-      </div>
-    );
+    if (snapshot) {
+      snapshotObjs = snapshot.map(component => JsonDisplay(component));
+    }
+    return <div className="state-container">{snapshotObjs}</div>;
   }
 }
 

extension/app/styles/styles.css

@@ -55,6 +55,10 @@
 }
 
 .action-component {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
   height: 40px;
   width: 100%;
   background-color: rgb(170, 170, 170);
@@ -66,3 +70,8 @@
 .action-component.selected {
   background-color: rgb(134, 134, 134);
 }
+
+.action-component button {
+  position: relative;
+  right: 0px;
+}

extension/background.js

@@ -0,0 +1,34 @@
+console.log('background.js file is running');
+
+let bg;
+
+// need a function to clear snapshotArr when either tab is closed or page is refreshed
+const snapshotArr = [];
+
+// establishing connection with devtools
+chrome.runtime.onConnect.addListener((port) => {
+  bg = port;
+  bg.postMessage({ from: 'background.js', message: 'established connection', date: Date.now() });
+
+  // if snapshots were saved in the snapshotArr,
+  // send it to devtools as soon as connection to devtools is made
+  if (snapshotArr.length > 0) {
+    bg.postMessage(snapshotArr);
+  }
+
+  // receive snapshot from background and send it to contentScript
+  port.onMessage.addListener((msg) => {
+    console.log('contentScript -> background', msg);
+    chrome.runtime.sendMessage({ data: msg });
+  });
+});
+
+// background.js recieves message from contentScript.js
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  // if port is not null, send a message to devtools
+  if (bg) {
+    snapshotArr.push(request);
+    bg.postMessage(snapshotArr);
+    // else, push snapshot into an array
+  } else snapshotArr.push(request);
+});

extension/contentScript.js

@@ -0,0 +1,17 @@
+console.log('contentScript injected');
+
+// listening for messages from npm package
+window.addEventListener('message', (msg) => {
+  const { action, payload } = msg.data;
+
+  if (action === 'recordSnap') chrome.runtime.sendMessage(payload);
+  // console.log(msg);
+});
+
+// listening for messages from background.js
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+  // send the message to npm package
+  console.log('devtools -> contentScript', request);
+  const { action } = request;
+  if (action === 'jumpToSnap') window.postMessage({ request });
+});

extension/devtools.js

@@ -1,3 +1,3 @@
 chrome.devtools.panels.create('React Time-Travel', null, 'panel.html', (panel) => {
-  console.log('created');
+  console.log('devtools.js => panel created');
 });

extension/manifest.json

@@ -4,5 +4,16 @@
   "devtools_page": "devtools.html",
   "description": "A Chrome extension that helps debug React by memorizing the state of components with every render.",
   "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval' ; object-src 'self'"
+  "content_security_policy": "script-src 'self' 'unsafe-eval' ; object-src 'self'",
+  "background": {
+    "scripts": ["background.js"],
+    "persistent": false
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["contentScript.js"]
+    }
+  ],
+  "permissions": ["contextMenus", "tabs", "<all_urls>"]
 }

extension/panel.html

@@ -10,6 +10,7 @@
   <body>
     <div id="root"></div>
     <link rel="stylesheet" type="text/css" href="./app/styles/panel.css" />
+    <script type="text/javascript" src="panel.js"></script>
     <script type="text/javascript" src="dist/app.bundle.js"></script>
   </body>
 </html>