changed file structure of extension

rydang · rydang · commit 2d84d3bad166 · 2019-08-01T10:36:46.000-04:00
now the build folder is packed into the actual extension
the contentscript and backgroundscript bundle files are now actually used in manifest.json
removed unnecessary panel.css file
diff --git a/.gitignore b/.gitignore
@@ -1,10 +1,7 @@
 node_modules
 .DS_Store
-dist/
-extension/bundle.js
-package/react-time-travel-1.0.1.tgz
+src/extension/build/bundles
+package/react-time-travel-*.tgz
 tictactoe
-tictactoe/build/bundle.js
-tictactoe/package-lock.json
 parents
 coverage
diff --git a/src/app/styles/styles.scss b/src/app/styles/styles.scss
@@ -1,3 +1,16 @@
+html {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  height: 100%;
+}
+
+#root {
+  height: 100%;
+}
+
 .main-container {
   height: 100%;
   margin: 0 auto;
@@ -11,9 +24,9 @@
   grid-template-columns: 1fr 2fr;
   grid-template-rows: 8fr 1fr;
   grid-template-areas:
-    'actions states'
-    'travel travel'
-    'buttons buttons';
+    "actions states"
+    "travel travel"
+    "buttons buttons";
 }
 
 /* if extension width is less than 500px, stack the body containers */
@@ -22,10 +35,10 @@
     grid-template-rows: 3fr 5fr 1fr;
     grid-template-columns: auto;
     grid-template-areas:
-      'actions'
-      'states'
-      'travel'
-      'buttons';
+      "actions"
+      "states"
+      "travel"
+      "buttons";
   }
 }
 .travel-container {
diff --git a/src/extension/build/devtools.html b/src/extension/build/devtools.html
@@ -10,6 +10,6 @@
 
 <body>
   <script type="text/javascript" src="devtools.js"></script>
-  </body>
+</body>
 
 </html>
diff --git a/src/extension/build/devtools.js b/src/extension/build/devtools.js
diff --git a/src/extension/build/manifest.json b/src/extension/build/manifest.json
@@ -6,13 +6,13 @@
   "manifest_version": 2,
   "content_security_policy": "script-src 'self' 'unsafe-eval' ; object-src 'self'",
   "background": {
-    "scripts": ["background.js"],
+    "scripts": ["bundles/background.bundle.js"],
     "persistent": false
   },
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
-      "js": ["contentScript.js"]
+      "js": ["bundles/content.bundle.js"]
     }
   ],
   "permissions": ["contextMenus", "tabs", "<all_urls>"]
diff --git a/src/extension/build/panel.html b/src/extension/build/panel.html
@@ -10,7 +10,6 @@
   <body>
     <div id="root"></div>
     <link rel="stylesheet" type="text/css" href="./styles/panel.css" />
-    <script type="text/javascript" src="panel.js"></script>
-    <script type="text/javascript" src="dist/app.bundle.js"></script>
+    <script type="text/javascript" src="bundles/app.bundle.js"></script>
   </body>
 </html>
diff --git a/src/extension/panel.js b/src/extension/panel.js
diff --git a/src/extension/styles/panel.css b/src/extension/styles/panel.css
diff --git a/webpack.config.js b/webpack.config.js
@@ -5,9 +5,10 @@ const config = {
   entry: {
     app: './src/app/index.js',
     background: './src/extension/background.js',
+    content: './src/extension/contentScript.js',
   },
   output: {
-    path: path.resolve(__dirname, 'src/extension/dist'),
+    path: path.resolve(__dirname, 'src/extension/build/bundles'),
     filename: '[name].bundle.js',
   },
   module: {
@@ -43,7 +44,7 @@ module.exports = (env, argv) => {
     config.plugins.push(
       new ChromeExtensionReloader({
         entries: {
-          contentScript: ['app'],
+          contentScript: ['app', 'content'],
           background: ['background'],
         },
       }),

-Original file line number
+Diff line change
 <body>
   <script type="text/javascript" src="devtools.js"></script>
 -  </body>
 +</body>
 </html>