officially migrated to manifest v3

Author: lxieyang

README.md

@@ -11,16 +11,19 @@
 
 ## Announcements
 
-- **_Recently updated from React ~~16~~ to 17 and Webpack ~~4~~ to 5!_**
-- **_Recently added [TypeScript](https://www.typescriptlang.org/) Support!_**
-- **_Recently added [devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/) Support! Thanks [GeekaholicLin](https://github.com/lxieyang/chrome-extension-boilerplate-react/issues/17)!_**
+- **_This boilerplate adopts [Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)!_** For V2 users, please check out the [manifest-v2](https://github.com/lxieyang/chrome-extension-boilerplate-react/tree/manifest-v2) branch, or use version [3.x](https://www.npmjs.com/package/chrome-extension-boilerplate-react/v/3.3.0).
+  - Check out the [Manifest V3 Migration Guide](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/).
+- Recently added [devtools](https://developer.chrome.com/docs/extensions/mv3/devtools/) Support! Thanks [GeekaholicLin](https://github.com/lxieyang/chrome-extension-boilerplate-react/issues/17)!
+- Recently updated from React ~~16~~ to **17** and Webpack ~~4~~ to **5**!
+- Recently added [TypeScript](https://www.typescriptlang.org/) Support!
 
 ## Features
 
 This is a basic Chrome Extensions boilerplate to help you write modular and modern Javascript code, load CSS easily and [automatic reload the browser on code changes](https://webpack.github.io/docs/webpack-dev-server.html#automatic-refresh).
 
 This boilerplate is updated with:
 
+- [Chrome Extension Manifest V3](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-overview/)
 - [React 17](https://reactjs.org)
 - [Webpack 5](https://webpack.js.org/)
 - [React Hot Loader](https://github.com/gaearon/react-hot-loader)

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension-boilerplate-react",
-  "version": "3.3.0",
+  "version": "4.0.0",
   "description": "A chrome extension boilerplate built with React 17 and Webpack 5",
   "license": "MIT",
   "repository": {

package.json

@@ -1,10 +1,13 @@
 {
+  "manifest_version": 3,
   "name": "Chrome Extension with React & Webpack",
   "options_page": "options.html",
-  "background": {
-    "page": "background.html"
-  },
-  "browser_action": {
+  "background": [
+    {
+      "service_worker": ["background.bundle.js"]
+    }
+  ],
+  "action": {
     "default_popup": "popup.html",
     "default_icon": "icon-34.png"
   },
@@ -23,10 +26,9 @@
   ],
   "devtools_page": "devtools.html",
   "web_accessible_resources": [
-    "content.styles.css",
-    "icon-128.png",
-    "icon-34.png"
-  ],
-  "manifest_version": 2,
-  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
-}
+    {
+      "resources": ["content.styles.css", "icon-128.png", "icon-34.png"],
+      "matches": []
+    }
+  ]
+}

src/manifest.json

@@ -1,5 +1,2 @@
-import '../../assets/img/icon-34.png';
-import '../../assets/img/icon-128.png';
-
 console.log('This is the background page.');
 console.log('Put the background scripts here.');

src/pages/Background/index.html

@@ -17,7 +17,7 @@ const Newtab = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn React
+          Learn React!
         </a>
         <h6>The color of this paragraph is defined using SASS.</h6>
       </header>

src/pages/Background/index.js

@@ -5,3 +5,5 @@ import Newtab from './Newtab';
 import './index.css';
 
 render(<Newtab />, window.document.querySelector('#app-container'));
+
+if (module.hot) module.hot.accept();

src/pages/Newtab/Newtab.jsx

@@ -8,3 +8,5 @@ render(
   <Options title={'settings'} />,
   window.document.querySelector('#app-container')
 );
+
+if (module.hot) module.hot.accept();

src/pages/Newtab/index.jsx

@@ -5,3 +5,5 @@ import Panel from './Panel';
 import './index.css';
 
 render(<Panel />, window.document.querySelector('#app-container'));
+
+if (module.hot) module.hot.accept();