Runn

.babelrc

@@ -3,9 +3,5 @@
     // "@babel/preset-env"
     "@babel/preset-react"
     // "react-app"
-  ],
-  "plugins": [
-    // "@babel/plugin-proposal-class-properties",
-    "react-hot-loader/babel"
   ]
 }

.gitignore

@@ -10,6 +10,7 @@
 /build
 
 # misc
+.env
 .DS_Store
 .env.local
 .env.development.local
@@ -19,3 +20,4 @@
 
 # secrets
 secrets.*.js
+.env

README.md

@@ -1,4 +1,4 @@
-<img src="src/assets/img/icon-128.png" width="64"/>
+<img src="src/assets/img/plane.png" width="64"/>
 
 # Chrome Extension Boilerplate with React 17 and Webpack 5
 

package.json

@@ -1,26 +1,26 @@
 {
-  "name": "planes-in-the-sky",
+  "name": "planes-dashboard",
   "version": "4.3.5",
-  "description": "A chrome extension boilerplate built with React 17, Webpack 5, and Webpack Dev Server 4",
+  "description": "A Dashboard for all things planes",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/lxieyang/chrome-extension-boilerplate-react.git"
+    "url": "https://github.com/teamplanes/planes-dashboard.git"
   },
   "scripts": {
     "build": "node utils/build.js",
     "start": "node utils/webserver.js",
     "prettier": "prettier --write '**/*.{js,jsx,ts,tsx,json,css,scss,md}'"
   },
   "dependencies": {
-    "@chakra-ui/react": "1.8.9",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@hot-loader/react-dom": "^17.0.2",
-    "framer-motion": "6.2.4",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-hot-loader": "^4.13.0"
+    "@chakra-ui/icons": "^2.0.13",
+    "@chakra-ui/react": "^2.4.2",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "framer-motion": "^7.6.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.7.1"
   },
   "devDependencies": {
     "@babel/core": "^7.17.0",
@@ -35,7 +35,8 @@
     "babel-preset-react-app": "^10.0.1yarn star",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^6.6.0",
+    "css-loader": "^6.7.2",
+    "dotenv-webpack": "^8.0.1",
     "eslint": "^8.8.0",
     "eslint-config-react-app": "^7.0.0",
     "eslint-plugin-flowtype": "^8.0.3",
@@ -53,8 +54,8 @@
     "terser-webpack-plugin": "^5.3.1",
     "ts-loader": "^9.2.6",
     "typescript": "^4.5.5",
-    "webpack": "^5.68.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4"
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.11.1"
   }
-}
+}

src/manifest.json

@@ -1,45 +1,35 @@
 {
   "manifest_version": 3,
-  "name": "Takeoff",
+  "name": "Planes Dashboard",
   "description": "A chrome extension that will help you to takeoff from your current tab to a new tab.",
   "options_page": "options.html",
   "background": {
     "service_worker": "background.bundle.js"
   },
+
   "action": {
     "default_popup": "popup.html",
-    "default_icon": "icon-34.png"
+    "default_icon": "plane.png"
   },
+  "permissions": ["identity", "identity.email"],
   "chrome_url_overrides": {
     "newtab": "newtab.html"
   },
   "icons": {
-    "128": "icon-128.png"
+    "128": "plane.png"
   },
   "content_scripts": [
     {
-      "matches": [
-        "http://*/*",
-        "https://*/*",
-        "<all_urls>"
-      ],
-      "js": [
-        "contentScript.bundle.js"
-      ],
-      "css": [
-        "content.styles.css"
-      ]
+      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
+      "js": ["contentScript.bundle.js"],
+      "css": ["content.styles.css"]
     }
   ],
   "devtools_page": "devtools.html",
   "web_accessible_resources": [
     {
-      "resources": [
-        "content.styles.css",
-        "icon-128.png",
-        "icon-34.png"
-      ],
+      "resources": ["content.styles.css", "plane.png"],
       "matches": []
     }
   ]
-}
+}

src/pages/Background/index.js

@@ -1,2 +1,15 @@
 console.log('This is the background page.');
 console.log('Put the background scripts here.');
+
+const userEmail = chrome.identity.getProfileUserInfo(function (info) {
+  console.log('info', info);
+  return info.email;
+});
+
+chrome.extension.onMessage.addListener(function (
+  request,
+  sender,
+  sendResponse
+) {
+  sendResponse({ email: userEmail });
+});

src/pages/Devtools/index.js

@@ -1,5 +1,5 @@
 chrome.devtools.panels.create(
   'Dev Tools from chrome-extension-boilerplate-react',
-  'icon-34.png',
+  'plane.png',
   'panel.html'
 );

src/pages/Newtab/Newtab.jsx

@@ -1,29 +1,32 @@
 import React from 'react';
-import logo from '../../assets/img/logo.svg';
-import './Newtab.css';
-import './Newtab.scss';
-import { Text } from '@chakra-ui/react'
+import { Header } from './components/header';
+import { Announcements } from './components/announcements';
+import { Reminder } from './components/reminder';
+import { QuickAccessTools } from './components/quick-access-tools';
+import { Box, Flex, useColorModeValue } from '@chakra-ui/react';
+import { Section } from './components/section';
+import { BorderBox } from './components/border-box';
+
 const Newtab = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <Text fontSize='20px' color='white'>
-          Edit <code>src/pages/Newtab/Newtab.js</code> and save to reload.
-        </Text>
-        <Text fontSize='50px' color='tomato'>
-          PLANES
-        </Text>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React!
-        </a>
-      </header>
-    </div>
+    <Box bg={useColorModeValue('cream', 'dark')} minHeight="100vh" p="100px">
+      <Header />
+      <Flex mt={30} flexDirection="column" gap="45px">
+        <Flex gap="15px">
+          <Flex flex={3}>
+            <Announcements />
+          </Flex>
+          <Flex flex={1}>
+            <Section title="Reminders">
+              <BorderBox>
+                <Reminder />
+              </BorderBox>
+            </Section>
+          </Flex>
+        </Flex>
+        <QuickAccessTools />
+      </Flex>
+    </Box>
   );
 };