Merge pull request #9 from sanyu1225/develop

version 1.0.8

Author: sanyu1225

README-zh_CN.md

@@ -57,7 +57,7 @@ vue add chrome-extension-cli
 ### 本地开发 跟 生产模式
 
 - 使用` npm run build-watch`运行开发模式，将生成一个`dist`文件。 安装[Extension Reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid)，以便在热更新。 （注意，当您更改 manifest.json 文件时，它不会自动加载，您需要点选 extension 页面中的更新）
-
+- ### manifest版本 3 不支援使用 `npm run build-watch` 因为 manifest版本 3不支援 [CSP](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#content-security-policy)
 - 生产模式 `npm run build`，并将其压缩成 zip 并部署到 chrome 商店中。
 
 ### prompts.js

README-zh_TW.md

@@ -57,7 +57,7 @@ vue add chrome-extension-cli
 ### 本地開發 跟 生產模式
 
 - 使用` npm run build-watch`運行開發模式，將生成一個`dist`文件。 安裝[Extension Reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid)，以便在熱更新。 （注意，當您更改 manifest.json 文件時，它不會自動加載，您需要點選 extension 頁面中的更新）
-
+- ### manifest版本 3 不支援使用 `npm run build-watch` 因為 manifest版本 3不支援 [CSP](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#content-security-policy)
 - 生產模式 `npm run build`，並將其壓縮成 zip 並部署到 chrome 商店中。
 
 ### prompts.js

README.md

@@ -57,8 +57,8 @@ vue add chrome-extension-cli
 ### Run Development mode and Production
 
 - Run development mode with `npm run build-watch` and a `dist` file will be generated. Install [Extension Reloader](https://chrome.google.com/webstore/detail/extensions-reloader/fimgfedafeadlieiabdeeaodndnlbhid) to reload chrome extensions easily everytime you reload. (take note that when u change manifest.json file, it will not automatically load, you need to click update extension )
+- ### manifest_version 3 can't use `npm run build-watch` beacause version 3 can't support [CSP](https://developer.chrome.com/docs/extensions/mv3/intro/mv3-migration/#content-security-policy)
 - Build for production `npm run build` and zip it and deploy onto chrome store.
-
 ### prompts.js
 
 Vue CLI prompt is based on [inquirer.js](https://github.com/SBoudrias/Inquirer.js) api.

generator/generate/generateEnv.js

@@ -7,27 +7,58 @@ const generateManifest = (options, manifestPath) => {
     description,
     version
   }
-
-  if (components.includes('background')) {
-    manifestJson.background = {
-      'scripts': ['/js/background.js'],
-      'persistent': false
-    }
+  const mf2_Key = {
+    'background': 'background',
+    'popup': 'browser_action',
+    'content': 'content_scripts',
+    'options': 'options_page',
+    'devtools': 'devtools_page'
   }
-  if (components.includes('popup')) {
-    manifestJson.browser_action = { default_popup: 'popup.html' }
+  const mf3_Key = {
+    'background': 'background',
+    'popup': 'action',
+    'content': 'action',
+    'options': 'options_page',
+    'devtools': 'devtools_page'
   }
-  if (components.includes('content')) {
-    manifestJson.content_scripts = [{
+  const mf3_content = {
+    'background': {
+      'service_worker': '/js/background.js'
+    },
+    'action': {
+      'default_popup': 'popup.html'
+    },
+    'content_scripts': [{
       'matches': ['<all_urls>'],
       'js': ['/js/content.js']
-    }]
+    }],
+    'options_page': 'options.html',
+    'devtools_page': 'devtools.html'
   }
-  if (components.includes('options')) {
-    manifestJson.options_page = 'options.html'
+  const mf2_content = {
+    'background': {
+      'scripts': ['/js/background.js'],
+      'persistent': false
+    },
+    'browser_action': { default_popup: 'popup.html' },
+    'content_scripts': [{
+      'matches': ['<all_urls>'],
+      'js': ['/js/content.js']
+    }],
+    'options_page': 'options.html',
+    'devtools_page': 'devtools.html'
   }
-  if (components.includes('devtools')) {
-    manifestJson.devtools_page = 'devtools.html'
+  if (manifest_version === 3) {
+    components.forEach(element => {
+      manifestJson[mf3_Key[element]] = mf3_content[mf3_Key[element]]
+    })
+  } else {
+    components.forEach(element => {
+      manifestJson[mf2_Key[element]] = mf2_content[mf2_Key[element]]
+    })
+    // Development build of manifest.json
+    manifestJson['content_security_policy'] =
+    "script-src 'self' 'unsafe-eval'; object-src 'self'"
   }
 
   // Production build of manifest.json
@@ -38,9 +69,7 @@ const generateManifest = (options, manifestPath) => {
       encoding: 'utf-8'
     }
   )
-  // Development build of manifest.json
-  manifestJson['content_security_policy'] =
-    "script-src 'self' 'unsafe-eval'; object-src 'self'"
+
   fs.writeFileSync(
     `${manifestPath}/manifest.development.json`,
     JSON.stringify(manifestJson, null, 4),

generator/generate/manifest.js

@@ -3,7 +3,6 @@ const generateIndex = require('./generate/generateIndex')
 const deleteFile = require('./generate/deleteFile')
 const editTsConfig = require('./generate/editTsConfig')
 const editPackage = require('./generate/editPackage')
-const generateEnv = require('./generate/generateEnv')
 const fs = require('fs')
 
 module.exports = async (api, options, { vueVersion }) => {
@@ -31,7 +30,6 @@ module.exports = async (api, options, { vueVersion }) => {
 
   api.onCreateComplete(() => {
     generateManifest(options, api.resolve('./src')) // add manifest.json
-    generateEnv(api.resolve('./'), components) // add env file
     // edit tsconfig.json
     if (isTypeScript) editTsConfig(api.resolve('./tsconfig.json'))
     // delete vue Initial file
@@ -40,9 +38,6 @@ module.exports = async (api, options, { vueVersion }) => {
 
   // Modify file content
   api.afterInvoke(() => {
-    if (isTypeScript) {
-      replaceFileString('./vue.config.js', /\{name\}\.js/, '{name}.js', '{name}.ts')
-    }
     components.forEach((e) => {
       const whiteList = ['popup', 'options', 'devtools']
       if (whiteList.includes(e)) {

generator/index.js

@@ -1,16 +1,27 @@
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const path = require('path')
+const fs = require('fs')
 
 // Generate pages object
 const pages = {}
 
-const chromeName = process.env.VUE_APP_FILE.split(',')
+function getEntryFile (entryPath) {
+  let files = fs.readdirSync(entryPath)
+  return files
+}
+
+const chromeName = getEntryFile(path.resolve(`src/entry`))
 
+function getFileExtension (filename) {
+  return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename)[0] : undefined
+}
 chromeName.forEach((name) => {
-  pages[name] = {
-    entry: `src/entry/${name}.js`,
+  const fileExtension = getFileExtension(name)
+  const fileName = name.replace('.' + fileExtension, '')
+  pages[fileName] = {
+    entry: `src/entry/${name}`,
     template: 'public/index.html',
-    filename: `${name}.html`
+    filename: `${fileName}.html`
   }
 })
 

generator/template/vue.config.js

@@ -1,15 +1,13 @@
 module.exports = (api, opts) => {
   api.chainWebpack(webpackConfig => {
     // remove split chunks for chrome extension, make sure everything in a file
-    webpackConfig.optimization.delete("splitChunks");
-  });
+    webpackConfig.optimization.delete('splitChunks')
+  })
 
-  api.configureWebpack(webpackConfig => { });
-
-  api.registerCommand("build-watch", (...args) => {
+  api.registerCommand('build-watch', (...args) => {
     api.configureWebpack(webpackConfig => {
-      webpackConfig.watch = true;
-    });
-    api.service.run("build", ...args);
-  });
-};
+      webpackConfig.watch = true
+    })
+    api.service.run('build', ...args)
+  })
+}

index.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-cli-plugin-chrome-extension-cli",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "Use Vue CLI generate chrome extension template | generate chrome extension with vue.js",
   "author": "sanyu1225 <[email protected]>",
   "scripts": {},