Merge pull request #5 from oslabs-beta/rydang/react

joshua0308 · web-flow · commit 1b71b24d19db · 2019-07-23T14:32:38.000-04:00
changed file structure and react now renders on page
diff --git a/extension/app/components/App.jsx b/extension/app/components/App.jsx
@@ -0,0 +1,9 @@
+import React, { Component } from 'react';
+
+const App = () => (
+  <div>
+    App
+  </div>
+);
+
+export default App;
diff --git a/extension/app/index.js b/extension/app/index.js
@@ -0,0 +1,7 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App';
+
+ReactDOM.render(
+  <App />, document.getElementById('root'),
+);
diff --git a/extension/devtools.html b/extension/devtools.html
@@ -2,10 +2,14 @@
 <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 Time Travel</title>
 </head>
 
 <body>
-  <script src="dist/main.bundle.js"></script>
-</body>
+  <script type="text/javascript" src="devtools.js"></script>
+  </body>
 
 </html>
diff --git a/extension/devtools.js b/extension/devtools.js
@@ -1 +1,3 @@
-chrome.devtools.panels.create('React Time-Travel', null, 'panel.html', (panel) => { });
+chrome.devtools.panels.create('React Time-Travel', null, 'panel.html', (panel) => {
+  console.log('created');
+});
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -4,5 +4,5 @@
   "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'"
 }
diff --git a/extension/panel.html b/extension/panel.html
@@ -1,12 +1,16 @@
 <!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>Document</title>
 </head>
+
 <body>
-  time test 1
+  <div id="root" />
+  <script type="text/javascript" src="dist/app.bundle.js"></script>
 </body>
+
 </html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,7 +3,7 @@ const ChromeExtensionReloader = require('webpack-chrome-extension-reloader');
 
 const config = {
   entry: {
-    main: './extension/index.js',
+    app: './extension/app/index.js',
     background: './extension/background.js',
   },
   output: {
@@ -39,7 +39,12 @@ const config = {
 
 module.exports = (env, argv) => {
   if (argv.mode === 'development') {
-    config.plugins.push(new ChromeExtensionReloader());
+    config.plugins.push(new ChromeExtensionReloader({
+      entries: {
+        contentScript: ['app'],
+        background: ['background'],
+      },
+    }));
   }
   return config;
 };

Original file line number	Diff line number	Diff line change
`@@ -4,5 +4,5 @@`
`4`	`4`	`"devtools_page": "devtools.html",`
`5`	`5`	`"description": "A Chrome extension that helps debug React by memorizing the state of components with every render.",`
`6`	`6`	`"manifest_version": 2,`
`7`		`- "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"`
	`7`	`+ "content_security_policy": "script-src 'self' 'unsafe-eval' ; object-src 'self'"`
`8`	`8`	`}`