npm scripts to pack an extension

README.md

@@ -27,7 +27,8 @@ Then follow these instructions to see your extension:
 3. Click on the **Load unpacked extension** button
 4. Select the folder **my-extension/build**
 
-When you're ready to publish to Chrome Web Store, create a minified bundle with `npm run build` and then zip the `build` folder.
+When you're ready to publish to Chrome Web Store, create a minified bundle with `npm run build` and pack it with `npm run pack`.
+Or you can zip the `build` folder manually.
 
 <div align="center">
   <img width="600" height="413" src="assets/installation.png" alt="Chrome Extension CLI">
@@ -106,7 +107,18 @@ Then follow these instructions to see your app:
 ### `npm run build`
 
 Builds the app for production to the build folder.<br>
-Zip the build folder and your app is ready to be published on Chrome Web Store.
+Run `npm run pack` to
+zip the build folder and your app is ready to be published on Chrome Web Store.<br>
+Or you can zip it manually.
+
+### `npm run pack`
+
+Packs the build folder into a zip file under release folder.
+
+### `npm run repack`
+
+Rebuilds and packs the app.
+It is a shorthand for `npm run build && npm run pack`.
 
 ### `npm run format`
 

index.js

@@ -186,6 +186,8 @@ function createExtension(name, { overridePage, devtools, language }) {
     watch:
       'webpack --mode=development --watch --config config/webpack.config.js',
     build: 'webpack --mode=production --config config/webpack.config.js',
+    pack: 'node pack.js',
+    repack: 'npm run build && npm run pack',
     format:
       'prettier --write --ignore-unknown "{config,public,src}/**/*.{html,css,js,ts,json}"',
   };
@@ -216,7 +218,8 @@ function createExtension(name, { overridePage, devtools, language }) {
     'mini-css-extract-plugin@^2.6.0',
     'css-loader@^6.7.1',
     'file-loader@^6.2.0',
-    'prettier@^2.6.2'
+    'prettier@^2.6.2',
+    'adm-zip@^0.5.10'
   );
 
   if (languageName === 'typescript') {
@@ -288,6 +291,12 @@ function createExtension(name, { overridePage, devtools, language }) {
     );
   });
 
+  // Copy script to automatically generate zip file
+  fs.copyFileSync(
+    path.resolve(__dirname, 'templates', 'shared', 'pack.js'),
+    path.join(root, 'pack.js')
+  );
+
   // Setup the manifest file
   const manifestDetails = Object.assign(
     {},

templates/shared/dotfiles/gitignore

@@ -10,3 +10,6 @@
 .DS_Store
 
 npm-debug.log*
+
+# packed files
+/release

templates/shared/pack.js

@@ -0,0 +1,20 @@
+const { readFileSync } = require('fs');
+const { parse, resolve } = require('path');
+const AdmZip = require('adm-zip');
+
+const { base } = parse(__dirname);
+const { version } = JSON.parse(
+  readFileSync(resolve(__dirname, 'build', 'manifest.json'), 'utf8')
+);
+
+const outdir = 'release';
+const filename = `${base}-v${version}.zip`;
+const zip = new AdmZip();
+zip.addLocalFolder('build');
+zip.writeZip(`${outdir}/${filename}`);
+
+console.log(
+  `${chalk.green(
+    'Success!'
+  )} Created a ${filename} file under ${outdir} directory. You can upload this file to web store.`
+);