bump version

lxieyang · lxieyang · commit c1b37f762612 · 2020-12-03T14:03:41.000-05:00
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+<img src="src/assets/img/icon-128.png" width="64"/>
+
 # Chrome Extension Boilerplate with React 17 and Webpack 5
 
 [![npm](https://img.shields.io/npm/v/chrome-extension-boilerplate-react)](https://www.npmjs.com/package/chrome-extension-boilerplate-react)
@@ -33,7 +35,7 @@ Please open up an issue to nudge me to keep the npm packages up-to-date. FYI, it
 
 ### Procedures:
 
-1. Check if your [Node.js](https://nodejs.org/) version is >= **10.13**.
+1. Check if your [Node.js](https://nodejs.org/) version is >= **14**.
 2. Clone this repository.
 3. Change the package's `name`, `description`, and `repository` fields in `package.json`.
 4. Change the name of your extension on `src/manifest.json`.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "chrome-extension-boilerplate-react",
-  "version": "3.1.2",
-  "description": "A chrome extension boilerplate built with React 17 and Webpack 4",
+  "version": "3.2.0",
+  "description": "A chrome extension boilerplate built with React 17 and Webpack 5",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -14,23 +14,23 @@
   },
   "dependencies": {
     "@hot-loader/react-dom": "^17.0.0",
-    "@types/chrome": "0.0.125",
-    "@types/react": "^16.9.53",
-    "@types/react-dom": "^16.9.8",
+    "@types/chrome": "0.0.126",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-hot-loader": "^4.13.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.3",
+    "@babel/core": "^7.12.9",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@babel/preset-react": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-react": "^7.12.7",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.1.0",
+    "babel-loader": "^8.2.2",
     "babel-preset-react-app": "^10.0.0",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.2.1",
+    "copy-webpack-plugin": "^6.3.2",
     "css-loader": "^5.0.0",
     "eslint": "^7.12.1",
     "eslint-config-react-app": "^6.0.0",
@@ -39,20 +39,20 @@
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "file-loader": "^6.1.1",
+    "file-loader": "^6.2.0",
     "fs-extra": "^9.0.1",
     "html-loader": "^1.3.2",
-    "html-webpack-plugin": "^5.0.0-alpha.7",
+    "html-webpack-plugin": "^5.0.0-alpha.14",
     "node-sass": "^4.14.1",
-    "prettier": "^2.1.2",
-    "sass-loader": "^10.0.4",
+    "prettier": "^2.2.1",
+    "sass-loader": "^10.1.0",
     "source-map-loader": "^1.1.2",
     "style-loader": "^2.0.0",
-    "terser-webpack-plugin": "^5.0.2",
-    "ts-loader": "^8.0.7",
-    "typescript": "^4.0.5",
-    "webpack": "^5.2.0",
-    "webpack-cli": "^4.1.0",
+    "terser-webpack-plugin": "^5.0.3",
+    "ts-loader": "^8.0.11",
+    "typescript": "^4.1.2",
+    "webpack": "^5.9.0",
+    "webpack-cli": "^4.2.0",
     "webpack-dev-server": "^3.11.0"
   }
 }
diff --git a/src/assets/img/icon-128.png b/src/assets/img/icon-128.png
diff --git a/src/assets/img/icon-34.png b/src/assets/img/icon-34.png
diff --git a/src/pages/Options/Options.css b/src/pages/Options/Options.css
@@ -0,0 +1,8 @@
+.OptionsContainer {
+  width: 100%;
+  height: 50vh;
+  font-size: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/src/pages/Options/Options.tsx b/src/pages/Options/Options.tsx
@@ -6,7 +6,7 @@ interface Props {
 }
 
 const Options: React.FC<Props> = ({ title }: Props) => {
-  return <div className="OptionsContainer">{title.toUpperCase()} Page</div>;
+  return <div className="OptionsContainer">{title.toUpperCase()} PAGE</div>;
 };
 
 export default Options;
diff --git a/src/pages/Options/index.css b/src/pages/Options/index.css
@@ -1,3 +0,0 @@
-.OptionsContainer {
-  font-size: 2rem;
-}
diff --git a/src/pages/Options/index.html b/src/pages/Options/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <title></title>
+    <title>Settings</title>
   </head>
 
   <body>
diff --git a/src/pages/Popup/Popup.css b/src/pages/Popup/Popup.css
@@ -1,5 +1,13 @@
 .App {
+  position: absolute;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
   text-align: center;
+  height: 100%;
+  padding: 10px;
+  background-color: #282c34;
 }
 
 .App-logo {
@@ -14,8 +22,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/pages/Popup/index.css b/src/pages/Popup/index.css
@@ -1,12 +1,14 @@
 body {
-  width: 360px;
-  min-height: 360px;
+  width: 300px;
+  height: 260px;
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  position: relative;
 }
 
 code {
diff --git a/webpack.config.js b/webpack.config.js
@@ -110,7 +110,7 @@ var options = {
     // clean the build folder
     new CleanWebpackPlugin({
       verbose: true,
-      cleanStaleWebpackAssets: false,
+      cleanStaleWebpackAssets: true,
     }),
     // expose and write the allowed env vars on the compiled bundle
     new webpack.EnvironmentPlugin(['NODE_ENV']),

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ interface Props {`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`const Options: React.FC<Props> = ({ title }: Props) => {`
`9`		`- return <div className="OptionsContainer">{title.toUpperCase()} Page</div>;`
	`9`	`+ return <div className="OptionsContainer">{title.toUpperCase()} PAGE</div>;`
`10`	`10`	`};`
`11`	`11`
`12`	`12`	`export default Options;`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +0,0 @@`
`1`		`-.OptionsContainer {`
`2`		`- font-size: 2rem;`
`3`		`-}`