feat: add « options » page

[Kocal]

Hey! Thanks for creating this vue-cli plugin, I wanted to make one but I was too lazy and busy for it. :sweat_smile: This is my first PR here, and it won't be the last :stuck_out_tongue_closed_eyes:

Some days ago I added this feature on https://github.com/Kocal/vue-web-extension/pull/263, and I thought it would be a good idea to add it there.

By the way, how can I test what I did? :thinking:

Thanks for your time

---

EDIT: Screenshot of actual options page

[adambullmer]

Thanks for the contribution! This was probably an important one to get done sooner rather than later. Just didn't need it in my immediate use case.

So far testing has been me testing with vue invoke browser-extension with this repo linked globally, and making sure that it at least runs out of the box without issue.

[adambullmer]

I need to set aside some time to hack around with the vue.config.js file's pages key a little more to see if just templating out that file would work out better than the current system of overriding the build, and make for a simpler build script

[adambullmer]

In the meantime I'll get this merged and packaged as soon as that conflict gets resolved

[Kocal]

Did some tests, the generator is working pretty well:

➜  app git:(master) ✗ vue invoke browser-extension
? Generate an options page? (https://developer.chrome.com/extensions/options) Yes
Adding eslint config stuffs

🚀  Invoking generator for vue-cli-plugin-browser-extension...
📦  Installing additional dependencies...
yarn install v1.7.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 6.34s.
⚓  Running completion hooks...

   Successfully invoked generator for plugin: vue-cli-plugin-browser-extension
hasProjectGit /home/kocal/Dev/app true
   The following files have been updated / added:

     README.md
     src/background.js
     src/manifest.json
     src/options/App.vue
     src/options/options.html
     src/options/options.js
     src/popup/App.vue
     src/popup/popup.html
     src/popup/popup.js
     src/popup/router/index.js
     src/popup/router/pages/Index.vue
     src/popup/router/routes.js
     src/store/actions.js
     src/store/getters.js
     src/store/index.js
     src/store/mutation-types.js
     src/store/mutations.js
     .gitignore
     package.json
     yarn.lock

   You should review these changes with git diff and commit them.

Output of vue inspect

However, I was not able to build the extension because of three errors:

• key.pem seems to be required
• icons folder is not found (#9)
• Can not execute dist-zip script

➜  app git:(master) ✗ yarn build
yarn run v1.7.0
$ vue-cli-service build

⠹  Building for production...[copy-webpack-plugin] WARNING - unable to locate './key.pem' at '/home/kocal/Dev/app/key.pem'
[copy-webpack-plugin] WARNING - unable to locate './src/icons' at '/home/kocal/Dev/app/src/icons'
⠸  Building for production...

 ERROR  Failed to compile with 2 errors                                                                                                          23:58:23

[copy-webpack-plugin] unable to locate './key.pem' at '/home/kocal/Dev/app/key.pem'
[copy-webpack-plugin] unable to locate './src/icons' at '/home/kocal/Dev/app/src/icons'
Executing additional scripts before exit
fs.js:902
  return binding.mkdir(pathModule.toNamespacedPath(path),
                 ^

Error: ENOENT: no such file or directory, mkdir '/home/kocal/Dev/app/home/kocal/Dev/app/dist-zip'
    at Object.fs.mkdirSync (fs.js:902:18)
    at makeDestZipDirIfNotExists (/home/kocal/Dev/app/node_modules/vue-cli-plugin-browser-extension/scripts/build-zip.js:14:8)
    at main (/home/kocal/Dev/app/node_modules/vue-cli-plugin-browser-extension/scripts/build-zip.js:35:3)
    at Object.<anonymous> (/home/kocal/Dev/app/node_modules/vue-cli-plugin-browser-extension/scripts/build-zip.js:42:1)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
 ERROR  Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I'm resolving conflicts and it will be ready to merge

[adambullmer]

The latest master should have the icons dir. The intent was for a warning to show on a missing key.pem file, but the build to still succeed. I think I might have goofed and the build command won't work without that keyfile

[Kocal]

Oh right, since I updated template's structure, I will move icons folder to another place. It should be okay after that

[adambullmer]

Thanks again for the contributions!

[Kocal]

Well, it wasn't done yet :rofl:

I rebased but didn't push because I wanted to try if options page was working correctly