├── .editorconfig ├── .eslintignore ├── .eslintrc.js ├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── generator ├── index.js └── template │ ├── App.js.vue │ ├── App.ts.vue │ ├── HelloWorld.js.vue │ ├── HelloWorld.ts.vue │ ├── background │ └── src │ │ └── background.js │ ├── base-app │ ├── public │ │ ├── __locales │ │ │ └── en │ │ │ │ └── messages.json │ │ ├── browser-extension.html │ │ └── icons │ │ │ ├── 128.png │ │ │ ├── 16.png │ │ │ ├── 19.png │ │ │ ├── 38.png │ │ │ └── 48.png │ └── src │ │ └── manifest.json │ ├── content-scripts │ └── src │ │ └── content-scripts │ │ └── content-script.js │ ├── devtools │ └── src │ │ └── devtools │ │ └── main.js │ └── main.js ├── index.js ├── lib ├── manifest.js ├── render.js └── signing-key.js ├── locales └── en.json ├── logo.png ├── package.json ├── prompts.js ├── ui.js └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = lf 6 | insert_final_newline = true 7 | indent_size = 2 8 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | generator/template/background/src/background.js 2 | generator/template/devtools/src/devtools/main.js 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true, 5 | webextensions: true, 6 | }, 7 | extends: ['plugin:vue/essential', '@vue/standard'], 8 | rules: { 9 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 10 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | If the bug is a build error, please include the exact command used, and any terminal output. 15 | 1. `yarn run build --mode=modern` 16 | For rendering/running bugs please include the steps to reproduce the behavior: 17 | 1. Go to '...' 18 | 2. Click on '....' 19 | 3. Scroll down to '....' 20 | 4. See error 21 | 22 | **Expected behavior** 23 | A clear and concise description of what you expected to happen. 24 | 25 | **Screenshots** 26 | If applicable, add screenshots to help explain your problem. 27 | 28 | **Reproducible Example** 29 | If possible, add a link to a repository/branch where the issue is currently happening. 30 | 31 | |Name|Version| 32 | |-------|--------| 33 | | vue-cli-plugin-browser-extension| | 34 | | Operating System | | 35 | | Node | | 36 | | NPM/Yarn | | 37 | | vue-cli | | 38 | | vue-cli-service | | 39 | | browser | | 40 | 41 | **Additional context** 42 | Add any other context about the problem here. If you are unable to share a repository link, then a `package.json`, `vue.config.js` and a contrived example would be the next best thing. 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "printWidth": 120, 4 | "singleQuote": true, 5 | "semi": false 6 | } 7 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU LESSER GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | 9 | This version of the GNU Lesser General Public License incorporates 10 | the terms and conditions of version 3 of the GNU General Public 11 | License, supplemented by the additional permissions listed below. 12 | 13 | 0. Additional Definitions. 14 | 15 | As used herein, "this License" refers to version 3 of the GNU Lesser 16 | General Public License, and the "GNU GPL" refers to version 3 of the GNU 17 | General Public License. 18 | 19 | "The Library" refers to a covered work governed by this License, 20 | other than an Application or a Combined Work as defined below. 21 | 22 | An "Application" is any work that makes use of an interface provided 23 | by the Library, but which is not otherwise based on the Library. 24 | Defining a subclass of a class defined by the Library is deemed a mode 25 | of using an interface provided by the Library. 26 | 27 | A "Combined Work" is a work produced by combining or linking an 28 | Application with the Library. The particular version of the Library 29 | with which the Combined Work was made is also called the "Linked 30 | Version". 31 | 32 | The "Minimal Corresponding Source" for a Combined Work means the 33 | Corresponding Source for the Combined Work, excluding any source code 34 | for portions of the Combined Work that, considered in isolation, are 35 | based on the Application, and not on the Linked Version. 36 | 37 | The "Corresponding Application Code" for a Combined Work means the 38 | object code and/or source code for the Application, including any data 39 | and utility programs needed for reproducing the Combined Work from the 40 | Application, but excluding the System Libraries of the Combined Work. 41 | 42 | 1. Exception to Section 3 of the GNU GPL. 43 | 44 | You may convey a covered work under sections 3 and 4 of this License 45 | without being bound by section 3 of the GNU GPL. 46 | 47 | 2. Conveying Modified Versions. 48 | 49 | If you modify a copy of the Library, and, in your modifications, a 50 | facility refers to a function or data to be supplied by an Application 51 | that uses the facility (other than as an argument passed when the 52 | facility is invoked), then you may convey a copy of the modified 53 | version: 54 | 55 | a) under this License, provided that you make a good faith effort to 56 | ensure that, in the event an Application does not supply the 57 | function or data, the facility still operates, and performs 58 | whatever part of its purpose remains meaningful, or 59 | 60 | b) under the GNU GPL, with none of the additional permissions of 61 | this License applicable to that copy. 62 | 63 | 3. Object Code Incorporating Material from Library Header Files. 64 | 65 | The object code form of an Application may incorporate material from 66 | a header file that is part of the Library. You may convey such object 67 | code under terms of your choice, provided that, if the incorporated 68 | material is not limited to numerical parameters, data structure 69 | layouts and accessors, or small macros, inline functions and templates 70 | (ten or fewer lines in length), you do both of the following: 71 | 72 | a) Give prominent notice with each copy of the object code that the 73 | Library is used in it and that the Library and its use are 74 | covered by this License. 75 | 76 | b) Accompany the object code with a copy of the GNU GPL and this license 77 | document. 78 | 79 | 4. Combined Works. 80 | 81 | You may convey a Combined Work under terms of your choice that, 82 | taken together, effectively do not restrict modification of the 83 | portions of the Library contained in the Combined Work and reverse 84 | engineering for debugging such modifications, if you also do each of 85 | the following: 86 | 87 | a) Give prominent notice with each copy of the Combined Work that 88 | the Library is used in it and that the Library and its use are 89 | covered by this License. 90 | 91 | b) Accompany the Combined Work with a copy of the GNU GPL and this license 92 | document. 93 | 94 | c) For a Combined Work that displays copyright notices during 95 | execution, include the copyright notice for the Library among 96 | these notices, as well as a reference directing the user to the 97 | copies of the GNU GPL and this license document. 98 | 99 | d) Do one of the following: 100 | 101 | 0) Convey the Minimal Corresponding Source under the terms of this 102 | License, and the Corresponding Application Code in a form 103 | suitable for, and under terms that permit, the user to 104 | recombine or relink the Application with a modified version of 105 | the Linked Version to produce a modified Combined Work, in the 106 | manner specified by section 6 of the GNU GPL for conveying 107 | Corresponding Source. 108 | 109 | 1) Use a suitable shared library mechanism for linking with the 110 | Library. A suitable mechanism is one that (a) uses at run time 111 | a copy of the Library already present on the user's computer 112 | system, and (b) will operate properly with a modified version 113 | of the Library that is interface-compatible with the Linked 114 | Version. 115 | 116 | e) Provide Installation Information, but only if you would otherwise 117 | be required to provide such information under section 6 of the 118 | GNU GPL, and only to the extent that such information is 119 | necessary to install and execute a modified version of the 120 | Combined Work produced by recombining or relinking the 121 | Application with a modified version of the Linked Version. (If 122 | you use option 4d0, the Installation Information must accompany 123 | the Minimal Corresponding Source and Corresponding Application 124 | Code. If you use option 4d1, you must provide the Installation 125 | Information in the manner specified by section 6 of the GNU GPL 126 | for conveying Corresponding Source.) 127 | 128 | 5. Combined Libraries. 129 | 130 | You may place library facilities that are a work based on the 131 | Library side by side in a single library together with other library 132 | facilities that are not Applications and are not covered by this 133 | License, and convey such a combined library under terms of your 134 | choice, if you do both of the following: 135 | 136 | a) Accompany the combined library with a copy of the same work based 137 | on the Library, uncombined with any other library facilities, 138 | conveyed under the terms of this License. 139 | 140 | b) Give prominent notice with the combined library that part of it 141 | is a work based on the Library, and explaining where to find the 142 | accompanying uncombined form of the same work. 143 | 144 | 6. Revised Versions of the GNU Lesser General Public License. 145 | 146 | The Free Software Foundation may publish revised and/or new versions 147 | of the GNU Lesser General Public License from time to time. Such new 148 | versions will be similar in spirit to the present version, but may 149 | differ in detail to address new problems or concerns. 150 | 151 | Each version is given a distinguishing version number. If the 152 | Library as you received it specifies that a certain numbered version 153 | of the GNU Lesser General Public License "or any later version" 154 | applies to it, you have the option of following the terms and 155 | conditions either of that published version or of any later version 156 | published by the Free Software Foundation. If the Library as you 157 | received it does not specify a version number of the GNU Lesser 158 | General Public License, you may choose any version of the GNU Lesser 159 | General Public License ever published by the Free Software Foundation. 160 | 161 | If the Library as you received it specifies that a proxy can decide 162 | whether future versions of the GNU Lesser General Public License shall 163 | apply, that proxy's public statement of acceptance of any version is 164 | permanent authorization for you to choose that version for the 165 | Library. 166 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-cli-plugin-browser-extension 2 | 3 | Browser extension development plugin for vue-cli 3.x 4 | 5 | ## What does it do? 6 | 7 | This is intended to be a vue-cli@3.x replacement for [Kocal/vue-web-extension `v1`](https://github.com/Kocal/vue-web-extension/tree/v1) (now, [Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) is a preset using this plugin). 8 | 9 | This plugin changes the `serve` command for your vue applications. 10 | This new command is only for running a livereload server while testing out your browser extension. 11 | 12 | This removes the entrypoint of `src/main.js`, and as such will not scaffold a general vue app. 13 | 14 | Packaging and deploying will still be done with `yarn build` and zipping in up for Chrome, Firefox, or whichever other browser you wish to develop for. 15 | 16 | It makes some assumptions about your project setup. 17 | I hope to be able to scaffold an app so that identifying the below in unnecessary. 18 | 19 | ``` 20 | . 21 | ├── public/ 22 | │ ├── _locales/ 23 | │ │ └── en/ 24 | │ │ └── messages.json 25 | │ ├── icons/ 26 | │ │ └── Icons for your extension. Should include a 16, 19, 38, 48, and 128px square image 27 | │ └── browser-extension.html (default target html template) 28 | ├── src/ 29 | │ ├── assets/ 30 | │ │ └── Static assets in use in your app, like logo.png 31 | │ ├── components/ 32 | │ │ └── HelloWorld.vue (modified) 33 | │ ├── content-scripts 34 | │ │ └── content-script.js 35 | │ ├── devtools/ (asked during project generation) 36 | │ │ ├── App.vue 37 | │ │ └── main.js 38 | │ ├── options/ (asked during project generation) 39 | │ │ ├── App.vue 40 | │ │ └── main.js 41 | │ ├── popup/ (asked during project generation) 42 | │ │ ├── App.vue 43 | │ │ └── main.js 44 | │ ├── override/ (asked during project generation) 45 | │ │ ├── App.vue 46 | │ │ └── main.js 47 | │ └── standalone/ (asked during project generation) 48 | │ ├── App.vue 49 | │ └── main.js 50 | ├── background.js 51 | └── manifest.json 52 | ``` 53 | 54 | ## System Dependencies 55 | 56 | If you wish to use the signing key functionality you will need to have `openssl` available on your system. 57 | 58 | ## Adding to your project 59 | 60 | This can be added to your vuejs project by one of the following methods: 61 | 62 | - Using the `vue ui` and searching for this project 63 | - Using the vue cli `vue add browser-extension` command 64 | 65 | ## Usage 66 | 67 | Running the Livereload server. 68 | This will build and write to the local `dist` directory. 69 | 70 | This plugin will respect the `outputDir` setting, however it cannot read into passed CLI args, so if you require a custom output dir, be sure to add it in your `vue.config.js` file. 71 | You can then add this as an unpacked plugin to your browser, and will continue to update as you make changes. 72 | 73 | **NOTE:** you cannot get HMR support in the popup window, however, closing and reopening will refresh your content. 74 | 75 | ```sh 76 | yarn serve 77 | yarn build 78 | ``` 79 | 80 | ## Plugin options 81 | 82 | Plugin options can be set inside your `vue.config.js`: 83 | 84 | ```js 85 | // vue.config.js 86 | module.exports = { 87 | pluginOptions: { 88 | browserExtension: { 89 | // options... 90 | }, 91 | }, 92 | }; 93 | ``` 94 | 95 | - **components** 96 | 97 | - Type: `Object.` 98 | 99 | The browser extension components that will be managed by this plugin. 100 | 101 | Valid components are: 102 | 103 | - background 104 | - popup 105 | - options 106 | - contentScripts 107 | - override 108 | - standalone 109 | - devtools 110 | 111 | ```js 112 | components: { 113 | background: true, 114 | contentScripts: true 115 | } 116 | ``` 117 | 118 | - **componentOptions** 119 | 120 | - Type: `Object.` 121 | 122 | See [Component options](#component-options). 123 | 124 | - **extensionReloaderOptions** 125 | 126 | - Type: `Object.` 127 | 128 | See available options in [webpack-extension-reloader](https://github.com/rubenspgcavalcante/webpack-extension-reloader#how-to-use). 129 | 130 | - **manifestSync** 131 | 132 | - Type: `Array` 133 | - Default: `['version']` 134 | 135 | Array containing names of `manifest.json` keys that will be automatically synced with `package.json` on build. 136 | 137 | Currently, the only supported keys are `version` and `description`. 138 | 139 | - **manifestTransformer** 140 | 141 | - Type: `Function` 142 | 143 | Function to modify the manifest JSON outputted by this plugin. 144 | 145 | An example use case is adding or removing permissions depending on which browser is being targeted. 146 | 147 | ```js 148 | manifestTransformer: (manifest) => { 149 | if (process.env.BROWSER === 'chrome') { 150 | manifest.permissions.push('pageCapture'); 151 | } 152 | return manifest; 153 | }; 154 | ``` 155 | 156 | - **modesToZip** 157 | 158 | Deprecated. Any mode will be zipped to the artifacts dir, when `NODE_ENV=production` (the default in the normal `yarn build`). For more information on how to set `NODE_ENV=production` in other modes see [Vue CLI docs – Example Staging Mode](https://cli.vuejs.org/guide/mode-and-env.html#example-staging-mode) 159 | 160 | - **artifactsDir** 161 | 162 | - Type: `string` 163 | - Default: `'./artifacts'` 164 | 165 | Directory where the zipped browser extension should get created. 166 | 167 | - **artifactFilename** 168 | 169 | - Type: `Function` 170 | - Default: ``({name, version, mode}) => `${name}-v${version}-${mode}.zip` `` 171 | 172 | Optional function to generate a custom artifact filename. Useful for naming builds for different browsers. 173 | 174 | The function takes a single object parameter containing: 175 | - `name` - Name from `package.json` 176 | - `version` - Version from `package.json` 177 | - `mode` - Vue CLI mode such as 'production' 178 | 179 | For example, 180 | 181 | ```js 182 | // vue.config.js 183 | module.exports = { 184 | pluginOptions: { 185 | browserExtension: { 186 | artifactFilename: ({ name, version, mode }) => { 187 | if (mode === 'production') { 188 | return `${name}-v${version}-${process.env.BROWSER}.zip`; 189 | } 190 | return `${name}-v${version}-${process.env.BROWSER}-${mode}.zip`; 191 | }, 192 | }, 193 | }, 194 | }; 195 | ``` 196 | 197 | ### Component options 198 | 199 | Some browser extension components have additional options which can be set as follows: 200 | 201 | ```js 202 | // vue.config.js 203 | module.exports = { 204 | pluginOptions: { 205 | browserExtension: { 206 | componentOptions: { 207 | // : 208 | // e.g. 209 | contentScripts: { 210 | entries: { 211 | content1: 'src/content-script1.js', 212 | content2: 'src/content-script2.js', 213 | }, 214 | }, 215 | }, 216 | }, 217 | }, 218 | }; 219 | ``` 220 | 221 | #### background 222 | 223 | - **entry** 224 | 225 | - Type: `string|Array` 226 | 227 | Background script as webpack entry using the [single entry shorthand syntax](https://webpack.js.org/concepts/entry-points/#single-entry-shorthand-syntax). 228 | 229 | ```js 230 | background: { 231 | entry: 'src/my-background-script.js'; 232 | } 233 | ``` 234 | 235 | #### contentScripts 236 | 237 | - **entries** 238 | 239 | - Type: `{[entryChunkName: string]: string|Array}` 240 | 241 | Content scripts as webpack entries using using the [object syntax](https://webpack.js.org/concepts/entry-points/#object-syntax). 242 | 243 | ```js 244 | contentScripts: { 245 | entries: { 246 | 'my-first-content-script': 'src/content-script.js', 247 | 'my-second-content-script': 'src/my-second-script.js' 248 | } 249 | } 250 | ``` 251 | 252 | ## Internationalization 253 | 254 | Some boilerplate for internationalization has been added. This follows the i18n ([chrome](https://developer.chrome.com/extensions/i18n)|[WebExtention](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/i18n)) spec. 255 | Provided for you is the `default_locale` option in the manifest, and a `_locales` directory. 256 | There is some basic usage of it in the manifest, as well as in some of the boilerplate files. 257 | Since this is largely an out of the box solution provided by the browsers, it is heavily encouraged to utilize it. 258 | If you do not want to translate your app, simply delete the `public/_locales` directory, and no longer use the `browser.i18n` methods. 259 | 260 | ## Browser Polyfills 261 | 262 | This plugin by default adds in the official [mozilla webextension polyfill](https://github.com/mozilla/webextension-polyfill) to the build. 263 | The opinion of this plugin is that developers should be building cross platform, and should have reasonable tooling to do so. 264 | By emphasizing cross platform first, your application will be adhering to the community standards, be ready for distribution to other extension stores, and avoid developing against browser APIs that may have no equivalent. 265 | The polyfill is a no-op on firefox, and only takes up 20.5kb unminified. 266 | 267 | If you still feel strongly to not include the polyfill, then this is what you need to add to your webpack chain to do so. 268 | 269 | `vue.config.js` 270 | 271 | ```js 272 | module.exports = { 273 | chainWebpack(config) { 274 | config.plugins.delete('provide-webextension-polyfill'); 275 | config.module.rules.delete('provide-webextension-polyfill'); 276 | }, 277 | }; 278 | ``` 279 | 280 | ## Testing 281 | 282 | This library is following the standard styling of vue projects, and those are really the only tests to perform. 283 | 284 | ```sh 285 | yarn test 286 | ``` 287 | 288 | ## Roadmap 289 | 290 | - A preset 291 | - Cleanup the dist-zip directory 292 | 293 | ## Credits 294 | 295 | - [https://github.com/Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) For inspiration on app and build structure 296 | - [https://github.com/YuraDev/vue-chrome-extension-template](https://github.com/YuraDev/vue-chrome-extension-template) For the logo crop and app/scaffold structure 297 | - [@YuraDev](https://github.com/YuraDev) for the wonderful WCER plugin for livereloading extensions 298 | -------------------------------------------------------------------------------- /generator/index.js: -------------------------------------------------------------------------------- 1 | const { generateKey } = require('../lib/signing-key') 2 | const { renderDomain, renderGitignore, renderTs } = require('../lib/render') 3 | 4 | module.exports = (api, _options) => { 5 | const browserExtension = Object.assign({}, _options) 6 | delete browserExtension.registry 7 | delete browserExtension.components 8 | delete browserExtension.generateSigningKey 9 | 10 | const hasRouter = api.hasPlugin('router') 11 | const hasVuex = api.hasPlugin('vuex') 12 | const hasTs = api.hasPlugin('typescript') 13 | const hasLint = api.hasPlugin('eslint') 14 | const fileExt = hasTs ? 'ts' : 'js' 15 | 16 | browserExtension.componentOptions = {} 17 | if (_options.components.background) { 18 | browserExtension.componentOptions.background = { 19 | entry: `src/background.${fileExt}` 20 | } 21 | } 22 | if (_options.components.contentScripts) { 23 | browserExtension.componentOptions.contentScripts = { 24 | entries: { 25 | 'content-script': [`src/content-scripts/content-script.${fileExt}`] 26 | } 27 | } 28 | } 29 | 30 | const pkg = { 31 | private: true, 32 | scripts: { 33 | serve: 'vue-cli-service build --mode development --watch' 34 | }, 35 | devDependencies: {}, 36 | vue: { 37 | pages: {}, 38 | pluginOptions: { browserExtension } 39 | } 40 | } 41 | if (hasLint) { 42 | pkg.eslintConfig = { env: { webextensions: true } } 43 | } 44 | if (hasTs) { 45 | pkg.devDependencies['@types/firefox-webext-browser'] = '^67.0.2' 46 | } 47 | api.extendPackage(pkg) 48 | 49 | const { name, description } = require(api.resolve('package.json')) 50 | const options = Object.assign({}, _options) 51 | options.name = name 52 | options.description = description 53 | options.hasRouter = hasRouter 54 | options.hasVuex = hasVuex 55 | options.hasTs = hasTs 56 | options.hasLint = hasLint 57 | options.fileExt = fileExt 58 | 59 | api.render('./template/base-app', options) 60 | const additionalFiles = { './src/components/HelloWorld.vue': `./template/HelloWorld.${fileExt}.vue` } 61 | 62 | if (options.components.background) { 63 | additionalFiles[`./src/background.${fileExt}`] = './template/background/src/background.js' 64 | } 65 | 66 | if (options.components.contentScripts) { 67 | additionalFiles[`./src/content-scripts/content-script.${fileExt}`] = 68 | './template/content-scripts/src/content-scripts/content-script.js' 69 | } 70 | 71 | api.render(additionalFiles, options) 72 | 73 | if (options.components.popup) { 74 | renderDomain({ title: 'Popup', fileExt, options, api, hasMinimumSize: true }) 75 | } 76 | 77 | if (options.components.options) { 78 | renderDomain({ title: 'Options', fileExt, options, api, hasMinimumSize: true }) 79 | } 80 | 81 | if (options.components.override) { 82 | renderDomain({ title: 'Override', fileExt, options, api }) 83 | } 84 | 85 | if (options.components.standalone) { 86 | renderDomain({ title: 'Standalone', filename: 'index.html', fileExt, options, api }) 87 | } 88 | 89 | if (options.components.devtools) { 90 | renderDomain({ title: 'Devtools', fileExt, options, api }) 91 | } 92 | 93 | if (options.generateSigningKey === true) { 94 | api.render((files) => { 95 | files['key.pem'] = generateKey() 96 | }) 97 | } 98 | 99 | api.onCreateComplete(() => { 100 | renderGitignore(api) 101 | 102 | if (hasTs) { 103 | renderTs(api) 104 | } 105 | }) 106 | } 107 | -------------------------------------------------------------------------------- /generator/template/App.js.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 13 | <%_ if (hasMinimumSize === true) { -%> 14 | 15 | 21 | <%_ } -%> 22 | -------------------------------------------------------------------------------- /generator/template/App.ts.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 14 | <%_ if (hasMinimumSize === true) { -%> 15 | 16 | 22 | <%_ } -%> 23 | -------------------------------------------------------------------------------- /generator/template/HelloWorld.js.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 20 | 21 | 26 | -------------------------------------------------------------------------------- /generator/template/HelloWorld.ts.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 22 | 23 | 28 | -------------------------------------------------------------------------------- /generator/template/background/src/background.js: -------------------------------------------------------------------------------- 1 | <%_ if (options.components.popup) { -%> 2 | browser.runtime.onMessage.addListener(function (request, sender, sendResponse) { 3 | <%_ } else { -%> 4 | browser.browserAction.onClicked.addListener(function (tab) { 5 | <%_ } -%> 6 | console.log('Hello from the background') 7 | <%_ if (options.components.contentScripts) { -%> 8 | 9 | browser.tabs.executeScript({ 10 | file: 'content-script.js', 11 | }); 12 | <%_ } -%> 13 | }) 14 | -------------------------------------------------------------------------------- /generator/template/base-app/public/__locales/en/messages.json: -------------------------------------------------------------------------------- 1 | { 2 | "extName": { 3 | "message": "<%- name %>", 4 | "description": "<%- description %>" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /generator/template/base-app/public/browser-extension.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | <%- '\<\%= htmlWebpackPlugin.options.title \%\>' %> 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /generator/template/base-app/public/icons/128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambullmer/vue-cli-plugin-browser-extension/45bd47236e37247d7c67ca38f70693c72627d89e/generator/template/base-app/public/icons/128.png -------------------------------------------------------------------------------- /generator/template/base-app/public/icons/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambullmer/vue-cli-plugin-browser-extension/45bd47236e37247d7c67ca38f70693c72627d89e/generator/template/base-app/public/icons/16.png -------------------------------------------------------------------------------- /generator/template/base-app/public/icons/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambullmer/vue-cli-plugin-browser-extension/45bd47236e37247d7c67ca38f70693c72627d89e/generator/template/base-app/public/icons/19.png -------------------------------------------------------------------------------- /generator/template/base-app/public/icons/38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambullmer/vue-cli-plugin-browser-extension/45bd47236e37247d7c67ca38f70693c72627d89e/generator/template/base-app/public/icons/38.png -------------------------------------------------------------------------------- /generator/template/base-app/public/icons/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambullmer/vue-cli-plugin-browser-extension/45bd47236e37247d7c67ca38f70693c72627d89e/generator/template/base-app/public/icons/48.png -------------------------------------------------------------------------------- /generator/template/base-app/src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 2, 3 | "name": "__MSG_extName__", 4 | "homepage_url": "http://localhost:8080/", 5 | "description": "A Vue Browser Extension", 6 | "default_locale": "en", 7 | "permissions": [ 8 | <%_ if (options.components.contentScripts) { -%> 9 | "activeTab", 10 | <%_ } -%> 11 | "", 12 | "*://*/*" 13 | ], 14 | "icons": { 15 | "16": "icons/16.png", 16 | "48": "icons/48.png", 17 | "128": "icons/128.png" 18 | <%_ if (options.components.background) { -%> 19 | }, 20 | "background": { 21 | "scripts": [ 22 | "js/background.js" 23 | ], 24 | "persistent": false 25 | <%_ } -%> 26 | }, 27 | <%_ if (options.components.devtools) { -%> 28 | "devtools_page": "devtools.html", 29 | <%_ } -%> 30 | "browser_action": { 31 | <%_ if (options.components.popup) { -%> 32 | "default_popup": "popup.html", 33 | <%_ } -%> 34 | "default_title": "__MSG_extName__", 35 | "default_icon": { 36 | "19": "icons/19.png", 37 | "38": "icons/38.png" 38 | } 39 | <%_ if (options.components.options) { -%> 40 | }, 41 | "options_ui": { 42 | "page": "options.html", 43 | "browser_style": true 44 | <%_ } -%> 45 | <%_ if (options.components.override) { -%> 46 | }, 47 | "chrome_url_overrides": { 48 | "<%- options.components.overrideOption || 'newtab' %>": "override.html" 49 | <%_ } -%> 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /generator/template/content-scripts/src/content-scripts/content-script.js: -------------------------------------------------------------------------------- 1 | console.log('Hello from the content-script') 2 | -------------------------------------------------------------------------------- /generator/template/devtools/src/devtools/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | browser.devtools.panels.create(browser.i18n.getMessage('extName'), '/assets/logo.png', 'devtools.html') 5 | 6 | /* eslint-disable no-new */ 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /generator/template/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | /* eslint-disable no-new */ 5 | new Vue({ 6 | el: '#app', 7 | render: h => h(App) 8 | }) 9 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | const logger = require('@vue/cli-shared-utils') 2 | const webpack = require('webpack') 3 | const CopyWebpackPlugin = require('copy-webpack-plugin') 4 | const ExtensionReloader = require('webpack-extension-reloader') 5 | const ZipPlugin = require('zip-webpack-plugin') 6 | const { keyExists } = require('./lib/signing-key') 7 | const manifestTransformer = require('./lib/manifest') 8 | const defaultOptions = { 9 | components: {}, 10 | componentOptions: {}, 11 | extensionReloaderOptions: {}, 12 | manifestSync: ['version'], 13 | manifestTransformer: null 14 | } 15 | const performanceAssetFilterList = [ 16 | (file) => !/\.map$/.test(file), 17 | (file) => !file.endsWith('.zip'), 18 | (file) => !/^icons\//.test(file) 19 | ] 20 | 21 | module.exports = (api, options) => { 22 | const appRootPath = api.getCwd() 23 | const pluginOptions = options.pluginOptions.browserExtension 24 | ? Object.assign(defaultOptions, options.pluginOptions.browserExtension) 25 | : defaultOptions 26 | const componentOptions = pluginOptions.componentOptions 27 | const extensionReloaderOptions = pluginOptions.extensionReloaderOptions 28 | const packageJson = require(api.resolve('package.json')) 29 | const isProduction = process.env.NODE_ENV === 'production' 30 | const keyFile = api.resolve('key.pem') 31 | const hasKeyFile = keyExists(keyFile) 32 | const contentScriptEntries = Object.keys((componentOptions.contentScripts || {}).entries || {}) 33 | 34 | if (pluginOptions.modesToZip !== undefined) { 35 | logger.warn('Deprecation Notice: setting NODE_ENV should be used in favored of options.modesToZip') 36 | } 37 | 38 | const entry = {} 39 | const entries = {} 40 | if (componentOptions.background) { 41 | entries.background = 'background' 42 | if (Array.isArray(componentOptions.background.entry)) { 43 | entry.background = componentOptions.background.entry.map((entry) => api.resolve(entry)) 44 | } else { 45 | entry.background = [api.resolve(componentOptions.background.entry)] 46 | } 47 | } 48 | if (componentOptions.contentScripts) { 49 | entries.contentScript = contentScriptEntries 50 | for (const name of contentScriptEntries) { 51 | let paths = componentOptions.contentScripts.entries[name] 52 | if (!Array.isArray(paths)) { 53 | paths = [paths] 54 | } 55 | 56 | entry[name] = paths.map((path) => api.resolve(path)) 57 | } 58 | } 59 | const userScripts = Object.keys(entry) 60 | 61 | api.chainWebpack((webpackConfig) => { 62 | const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD 63 | // Ignore rewriting names for background and content scripts 64 | webpackConfig.output.filename((file) => 65 | `js/[name]${isLegacyBundle ? `-legacy` : ``}${isProduction && options.filenameHashing && !userScripts.includes(file.chunk.name) ? '.[contenthash:8]' : ''}.js` 66 | ) 67 | webpackConfig.merge({ entry }) 68 | 69 | webpackConfig.plugin('copy-manifest').use(CopyWebpackPlugin, [ 70 | [ 71 | { 72 | from: './src/manifest.json', 73 | to: 'manifest.json', 74 | transform: manifestTransformer(api, pluginOptions, packageJson) 75 | } 76 | ] 77 | ]) 78 | 79 | webpackConfig.plugin('provide-webextension-polyfill').use(webpack.ProvidePlugin, [ 80 | { 81 | browser: 'webextension-polyfill' 82 | } 83 | ]) 84 | 85 | // Workaround for https://github.com/mozilla/webextension-polyfill/issues/68 86 | webpackConfig.module 87 | .rule('provide-webextension-polyfill') 88 | .test(require.resolve('webextension-polyfill', { paths: [appRootPath] })) 89 | .use('imports') 90 | .loader('imports-loader') 91 | .options({ browser: '>undefined' }) 92 | 93 | if (isProduction) { 94 | // Silence warnings of known large files, like images, sourcemaps, and the zip artifact 95 | webpackConfig.performance.assetFilter((assetFilename) => 96 | performanceAssetFilterList.every((filter) => filter(assetFilename)) 97 | ) 98 | 99 | if (hasKeyFile) { 100 | webpackConfig.plugin('copy-signing-key').use(CopyWebpackPlugin, [[{ from: keyFile, to: 'key.pem' }]]) 101 | } else { 102 | logger.warn('No `key.pem` file detected. This is problematic only if you are publishing an existing extension') 103 | } 104 | } 105 | 106 | if (isProduction) { 107 | let filename 108 | if (pluginOptions.artifactFilename) { 109 | filename = pluginOptions.artifactFilename({ 110 | name: packageJson.name, 111 | version: packageJson.version, 112 | mode: api.service.mode 113 | }) 114 | } else { 115 | filename = `${packageJson.name}-v${packageJson.version}-${api.service.mode}.zip` 116 | } 117 | webpackConfig.plugin('zip-browser-extension').use(ZipPlugin, [ 118 | { 119 | path: api.resolve(pluginOptions.artifactsDir || 'artifacts'), 120 | filename: filename 121 | } 122 | ]) 123 | } 124 | 125 | // configure webpack-extension-reloader for automatic reloading of extension when content and background scripts change (not HMR) 126 | // enabled only when webpack mode === 'development' 127 | if (!isProduction) { 128 | webpackConfig.plugin('extension-reloader').use(ExtensionReloader, [{ entries, ...extensionReloaderOptions }]) 129 | } 130 | 131 | if (webpackConfig.plugins.has('copy')) { 132 | webpackConfig.plugin('copy').tap(args => { 133 | if (Array.isArray(args[0]) === true) { 134 | args[0][0].ignore.push('browser-extension.html') 135 | } else if ('patterns' in args[0]) { 136 | args[0].patterns[0].globOptions.ignore.push('browser-extension.html') 137 | } 138 | 139 | return args 140 | }) 141 | } 142 | 143 | webpackConfig.plugin('define').tap(args => [ 144 | { 145 | ...args[0], 146 | global: 'window' 147 | }, 148 | ]) 149 | }) 150 | 151 | api.configureWebpack((webpackConfig) => { 152 | const omitUserScripts = ({ name }) => !userScripts.includes(name) 153 | if (webpackConfig.optimization && webpackConfig.optimization.splitChunks && webpackConfig.optimization.splitChunks.cacheGroups) { 154 | if (webpackConfig.optimization.splitChunks.cacheGroups.defaultVendors) { 155 | webpackConfig.optimization.splitChunks.cacheGroups.defaultVendors.chunks = omitUserScripts 156 | } 157 | if (webpackConfig.optimization.splitChunks.cacheGroups.vendors) { 158 | webpackConfig.optimization.splitChunks.cacheGroups.vendors.chunks = omitUserScripts 159 | } 160 | if (webpackConfig.optimization.splitChunks.cacheGroups.common) { 161 | webpackConfig.optimization.splitChunks.cacheGroups.common.chunks = omitUserScripts 162 | } 163 | } 164 | }) 165 | } 166 | -------------------------------------------------------------------------------- /lib/manifest.js: -------------------------------------------------------------------------------- 1 | const logger = require('@vue/cli-shared-utils') 2 | const { keyExists, hashKey } = require('./signing-key') 3 | const validPackageSync = ['version', 'description'] 4 | 5 | function getManifestJsonString ({ manifestTransformer }, manifest) { 6 | if (manifestTransformer && typeof manifestTransformer === 'function') { 7 | const manifestCopy = JSON.parse(JSON.stringify(manifest)) 8 | manifest = manifestTransformer(manifestCopy) 9 | } 10 | return JSON.stringify(manifest, null, 2) 11 | } 12 | 13 | function syncManifestWithPackageJson ({ manifestSync }, packageJson, manifest) { 14 | validPackageSync.forEach((property) => { 15 | if (manifestSync.includes(property)) { 16 | manifest[property] = packageJson[property] 17 | } 18 | }) 19 | } 20 | 21 | module.exports = (api, pluginOptions, packageJson) => async (content) => { 22 | const manifest = JSON.parse(content) 23 | const keyFile = api.resolve('key.pem') 24 | const hasKeyFile = keyExists(keyFile) 25 | const isProduction = api.service.mode === 'production' 26 | 27 | syncManifestWithPackageJson(pluginOptions, packageJson, manifest) 28 | 29 | if (manifest.manifest_version < 3) { 30 | manifest.content_security_policy = 31 | manifest.content_security_policy || "script-src 'self' 'unsafe-eval'; object-src 'self'" 32 | } 33 | 34 | // validate manifest 35 | 36 | // If building for production (going to web store) abort early. 37 | // The browser extension store will hash your signing key and apply CSP policies. 38 | if (isProduction) { 39 | if (manifest.manifest_version < 3) { 40 | manifest.content_security_policy = manifest.content_security_policy.replace(/'unsafe-eval'/, '') 41 | } 42 | 43 | // validate minimum options 44 | 45 | return getManifestJsonString(pluginOptions, manifest) 46 | } 47 | 48 | if (hasKeyFile) { 49 | try { 50 | manifest.key = await hashKey(keyFile) 51 | } catch (error) { 52 | logger.error('Unexpected error hashing keyfile:', error) 53 | } 54 | } 55 | 56 | // It's possible to specify the hashed key property manually without a keyfile local in the repo 57 | if (!manifest.key) { 58 | logger.warn('No key.pem file found. This is fine for dev, however you may have problems publishing without one') 59 | } 60 | 61 | return getManifestJsonString(pluginOptions, manifest) 62 | } 63 | -------------------------------------------------------------------------------- /lib/render.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs') 2 | const gitignoreRules = ['# Vue Browser Extension Output', '*.pem', '*.pub', '*.zip', '/artifacts'] 3 | const regexEscape = (rule) => rule.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') 4 | 5 | exports.renderTs = (api) => { 6 | const tsconfigFile = api.resolve('./tsconfig.json') 7 | const tsconfig = require(tsconfigFile) 8 | 9 | if (!tsconfig.compilerOptions.types.includes('firefox-webext-browser')) { 10 | tsconfig.compilerOptions.types.push('firefox-webext-browser') 11 | } 12 | 13 | fs.writeFileSync(tsconfigFile, JSON.stringify(tsconfig, null, 2)) 14 | } 15 | 16 | exports.renderGitignore = (api) => { 17 | const gitignoreFile = api.resolve('./.gitignore') 18 | const gitignore = fs.readFileSync(gitignoreFile, 'utf8') 19 | 20 | const gitignoreSnippet = gitignoreRules 21 | .filter((rule) => !new RegExp(`^${regexEscape(rule)}$`, 'gm').test(gitignore)) 22 | .join('\n') 23 | if (gitignoreSnippet !== '' && gitignoreSnippet !== gitignoreRules[0]) { 24 | fs.writeFileSync(gitignoreFile, gitignore + '\n' + gitignoreSnippet + '\n') 25 | } 26 | } 27 | 28 | function getDomainFile (api, domain, filename) { 29 | const baseFile = `../generator/template/${filename}` 30 | const relativeDomainFile = `../generator/template/${domain}/src/${domain}/${filename}` 31 | const domainFile = api.resolve(relativeDomainFile) 32 | 33 | return fs.existsSync(domainFile) ? relativeDomainFile : baseFile 34 | } 35 | 36 | exports.renderDomain = ({ api, title, fileExt, filename, options, hasMinimumSize = false }) => { 37 | const domain = title.toLowerCase() 38 | const app = `./src/${domain}/App.vue` 39 | const entry = `./src/${domain}/main.${fileExt}` 40 | const template = 'public/browser-extension.html' 41 | const domainApp = getDomainFile(api, domain, `App.${fileExt}.vue`) 42 | const domainEntry = getDomainFile(api, domain, 'main.js') 43 | 44 | api.render( 45 | { 46 | [app]: domainApp, 47 | [entry]: domainEntry 48 | }, 49 | { ...options, hasMinimumSize } 50 | ) 51 | 52 | const page = { template, entry, title } 53 | if (filename !== undefined) { 54 | page.filename = filename 55 | } 56 | 57 | api.extendPackage({ vue: { pages: { [domain]: page } } }) 58 | } 59 | -------------------------------------------------------------------------------- /lib/signing-key.js: -------------------------------------------------------------------------------- 1 | const { existsSync } = require('fs') 2 | const { exec, execSync } = require('child_process') 3 | 4 | exports.keyExists = (keyFile) => existsSync(keyFile) 5 | 6 | exports.generateKey = () => execSync('openssl genrsa 2048 | openssl pkcs8 -topk8 -nocrypt') 7 | 8 | exports.hashKey = (keyFile) => 9 | new Promise((resolve, reject) => { 10 | exec(`openssl rsa -in "${keyFile}" -pubout -outform DER | openssl base64 -A`, (error, stdout) => { 11 | if (error) { 12 | // node couldn't execute the command 13 | return reject(error) 14 | } 15 | resolve(stdout) 16 | }) 17 | }) 18 | -------------------------------------------------------------------------------- /locales/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "com": { 3 | "adambullmer": { 4 | "browserExt": { 5 | "tasks": { 6 | "extServe": { 7 | "description": "Builds and watches the project, writing the files to the output directory" 8 | } 9 | } 10 | } 11 | } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adambullmer/vue-cli-plugin-browser-extension/45bd47236e37247d7c67ca38f70693c72627d89e/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cli-plugin-browser-extension", 3 | "version": "0.26.1", 4 | "description": "Browser extension development plugin for vue-cli 3.0", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "eslint ." 8 | }, 9 | "keywords": [ 10 | "chrome", 11 | "extension", 12 | "browser", 13 | "plugin", 14 | "vue", 15 | "cli", 16 | "3" 17 | ], 18 | "license": "LGPL-3.0-or-later", 19 | "repository": "git@github.com:adambullmer/vue-cli-plugin-browser-extension.git", 20 | "author": "Adam Bullmer ", 21 | "devDependencies": { 22 | "@vue/eslint-config-standard": "^3.0.0", 23 | "eslint": "^5.1.0", 24 | "eslint-plugin-vue": "^4.5.0" 25 | }, 26 | "dependencies": { 27 | "@vue/cli-shared-utils": "^3.0.0-rc.3", 28 | "copy-webpack-plugin": "^5.1.2", 29 | "imports-loader": "^0.8.0", 30 | "webextension-polyfill": "^0.4.0", 31 | "webpack": "^4.16.0", 32 | "webpack-extension-reloader": "^1.1.0", 33 | "zip-webpack-plugin": "^3.0.0" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /prompts.js: -------------------------------------------------------------------------------- 1 | module.exports = [ 2 | { 3 | name: 'components', 4 | type: 'checkbox', 5 | default: ['popup', 'background'], 6 | message: 'Which browser extension components do you wish to generate?', 7 | choices: [ 8 | { 9 | name: 'Background script', 10 | value: 'background', 11 | short: 'background', 12 | checked: true 13 | }, 14 | { 15 | name: 'Browser Action Popup', 16 | value: 'popup', 17 | short: 'popup', 18 | checked: true 19 | }, 20 | { 21 | name: 'Options Page', 22 | value: 'options', 23 | short: 'options' 24 | }, 25 | { 26 | name: 'Content Scripts', 27 | value: 'contentScripts', 28 | short: 'content scripts' 29 | }, 30 | { 31 | name: 'Override Page', 32 | value: 'override', 33 | short: 'override' 34 | }, 35 | { 36 | name: 'Standalone Tab', 37 | value: 'standalone', 38 | short: 'standalone' 39 | }, 40 | { 41 | name: 'Dev Tools Tab', 42 | value: 'devtools', 43 | short: 'dev tools' 44 | } 45 | ], 46 | filter: async (input) => { 47 | const componentMap = {} 48 | 49 | input.forEach((component) => { 50 | componentMap[component] = true 51 | }) 52 | 53 | return componentMap 54 | } 55 | }, 56 | { 57 | name: 'generateSigningKey', 58 | type: 'confirm', 59 | message: 'Generate a new signing key (danger)?', 60 | default: false 61 | } 62 | ] 63 | -------------------------------------------------------------------------------- /ui.js: -------------------------------------------------------------------------------- 1 | module.exports = (api) => { 2 | api.describeTask({ 3 | match: /vue-cli-service ext-serve/, 4 | description: 'com.adambullmer.browserExt.tasks.extServe.description', 5 | link: 'https://github.com/adambullmer/vue-cli-browser-extension' 6 | }) 7 | } 8 | --------------------------------------------------------------------------------