officially migrated to manifest v3

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.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": {

src/manifest.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/pages/Background/index.js

@@ -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/Newtab/Newtab.jsx

@@ -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/Newtab/index.jsx

@@ -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/Options/index.tsx → src/pages/Options/index.jsx

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

src/pages/Panel/index.tsx → src/pages/Panel/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();

src/pages/Popup/Popup.jsx

@@ -17,7 +17,7 @@ const Popup = () => {
           target="_blank"
           rel="noopener noreferrer"
         >
-          Learn React
+          Learn React!
         </a>
       </header>
     </div>

src/pages/Popup/index.jsx

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

utils/webserver.js

@@ -43,4 +43,8 @@ var server = new WebpackDevServer(compiler, {
   disableHostCheck: true,
 });
 
+if (process.env.NODE_ENV === 'development' && module.hot) {
+  module.hot.accept();
+}
+
 server.listen(env.PORT);

webpack.config.js

@@ -37,12 +37,12 @@ var options = {
   mode: process.env.NODE_ENV || 'development',
   entry: {
     newtab: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.jsx'),
-    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.tsx'),
+    options: path.join(__dirname, 'src', 'pages', 'Options', 'index.jsx'),
     popup: path.join(__dirname, 'src', 'pages', 'Popup', 'index.jsx'),
     background: path.join(__dirname, 'src', 'pages', 'Background', 'index.js'),
     contentScript: path.join(__dirname, 'src', 'pages', 'Content', 'index.js'),
     devtools: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.js'),
-    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.tsx'),
+    panel: path.join(__dirname, 'src', 'pages', 'Panel', 'index.jsx'),
   },
   chromeExtensionBoilerplate: {
     notHotReload: ['contentScript', 'devtools'],
@@ -144,6 +144,24 @@ var options = {
         },
       ],
     }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/img/icon-128.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: 'src/assets/img/icon-34.png',
+          to: path.join(__dirname, 'build'),
+          force: true,
+        },
+      ],
+    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Newtab', 'index.html'),
       filename: 'newtab.html',
@@ -162,18 +180,6 @@ var options = {
       chunks: ['popup'],
       cache: false,
     }),
-    new HtmlWebpackPlugin({
-      template: path.join(
-        __dirname,
-        'src',
-        'pages',
-        'Background',
-        'index.html'
-      ),
-      filename: 'background.html',
-      chunks: ['background'],
-      cache: false,
-    }),
     new HtmlWebpackPlugin({
       template: path.join(__dirname, 'src', 'pages', 'Devtools', 'index.html'),
       filename: 'devtools.html',
@@ -193,7 +199,7 @@ var options = {
 };
 
 if (env.NODE_ENV === 'development') {
-  options.devtool = 'eval-cheap-module-source-map';
+  options.devtool = 'cheap-module-source-map';
 } else {
   options.optimization = {
     minimize: true,