diff --git a/extension/app/components/Action.jsx b/extension/app/components/Action.jsx
index a66f14442..ecacd84b3 100644
--- a/extension/app/components/Action.jsx
+++ b/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 (
{
handleChangeSnapshot(index);
}}
>
- {snapshot.state}
- {selected.toString()}
+ {index}
+
);
};
diff --git a/extension/app/containers/ActionContainer.jsx b/extension/app/containers/ActionContainer.jsx
index be0c6b7ab..d353ade7f 100644
--- a/extension/app/containers/ActionContainer.jsx
+++ b/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}
/>
);
});
diff --git a/extension/app/containers/MainContainer.jsx b/extension/app/containers/MainContainer.jsx
index ab578a950..aa86507e2 100644
--- a/extension/app/containers/MainContainer.jsx
+++ b/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}
/>
);
diff --git a/extension/app/containers/StateContainer.jsx b/extension/app/containers/StateContainer.jsx
index 70e30a115..70d8ac8be 100644
--- a/extension/app/containers/StateContainer.jsx
+++ b/extension/app/containers/StateContainer.jsx
@@ -1,23 +1,21 @@
import React, { Component } from 'react';
import ReactJson from 'react-json-view';
+const JsonDisplay = snapshot => (
+
+);
class StateContainer extends Component {
constructor(props) {
super(props);
}
render() {
+ let snapshotObjs = [];
const { snapshot } = this.props;
- return (
-
-
-
- );
+ if (snapshot) {
+ snapshotObjs = snapshot.map(component => JsonDisplay(component));
+ }
+ return {snapshotObjs}
;
}
}
diff --git a/extension/app/styles/styles.css b/extension/app/styles/styles.css
index 8a69e150e..e2e4cab6a 100644
--- a/extension/app/styles/styles.css
+++ b/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;
+}
diff --git a/extension/background.js b/extension/background.js
index e69de29bb..f684e625c 100644
--- a/extension/background.js
+++ b/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);
+});
diff --git a/extension/contentScript.js b/extension/contentScript.js
new file mode 100644
index 000000000..0215ff132
--- /dev/null
+++ b/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 });
+});
diff --git a/extension/devtools.js b/extension/devtools.js
index 5bcfe1a93..56dceeec0 100644
--- a/extension/devtools.js
+++ b/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');
});
diff --git a/extension/manifest.json b/extension/manifest.json
index 89f132006..7bffe53ce 100644
--- a/extension/manifest.json
+++ b/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": [""],
+ "js": ["contentScript.js"]
+ }
+ ],
+ "permissions": ["contextMenus", "tabs", ""]
}
diff --git a/extension/panel.html b/extension/panel.html
index b49168776..26e1b6dbf 100644
--- a/extension/panel.html
+++ b/extension/panel.html
@@ -10,6 +10,7 @@
+