Initial commit of a vue-cli plugin

Author: adambullmer

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+indent_size = 2

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+}

README.md

@@ -1,2 +1,71 @@
 # vue-cli-plugin-browser-extension
-Browser extension development plugin for vue-cli 3.0
+Browser extension development plugin for vue-cli 3.x
+
+## What does it do?
+This is intended to be a [email protected] replacement for [https://github.com/Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension).
+This plugin adds a new command `ext-serve` to your vue applications.
+This new command is only for running a livereload server while testing out your browser extension.
+This removes the entrypoint of `main.js`, and as such will not scaffold a general vue app.
+That behavior might change when support for a standalone tab application exists, but for now it is gone.
+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.
+It makes some assumptions about your project setup.
+I hope to be able to scaffold an app so that itentifying the below in unnecessary.
+
+```
+|- src/
+   |- assets/
+      |- Static assets in use in your app, like logo.png
+   |- icons/
+      |- Icons for your extension. Should include a 16, 19, 38, 48, 128 px square image
+   |- popup/
+      |- router/
+         |- pages/
+            |- Index.vue
+         |- index.js
+         |- routes.js
+      |- App.vue
+      |- popup.html
+      |- popup.js
+   |- store/
+      |- actions.js
+      |- getters.js
+      |- index.js
+      |- mutation-types.js
+      |- mutations.js
+   |- background.js
+   |- manifest.json
+```
+
+## Usage
+Running the Livereload server.
+This will build and write to the local `dist` directory.
+You can then add this as an unpacked plugin to your browser, and will continue to update as you make changes.
+**NOTE:** you cannot get HMR support in the popup window, however, closing and reopening will refresh your content.
+
+```sh
+yarn ext-serve
+```
+
+
+## Testing
+This library is following the standard styling of vue projects, and those are really the only tests to perform.
+
+```sh
+yarn test
+```
+
+## Roadmap
+- Add generators for background.js, popup, vuex, and vue-router stuff. (Make startup a breeze)
+- Add some generator options for other pieces of browser extensions. This includes scaffolding the components/dirs, and registering the build options into the build time hooks.
+  - Dev Tools
+  - Dedicated extension pages
+  - Options Pages
+  - Content scripts
+- Add zipping to the bundle for production builds
+- More configurability in scaffolding, like Kocal/vue-web-extension does
+- A preset
+
+## Credits
+- [https://github.com/Kocal/vue-web-extension](https://github.com/Kocal/vue-web-extension) For inspiration on app and build structure
+- [https://github.com/YuraDev/vue-chrome-extension-template](https://github.com/YuraDev/vue-chrome-extension-template) For the logo crop and app/scaffold structure
+- [@YuraDev](https://github.com/YuraDev) for the wonderful WCER plugin for livereloading extensions

generator.js

@@ -0,0 +1,12 @@
+module.exports = (api, { config }) => {
+  const pkg = {
+    scripts: {
+      'ext-serve': 'vue-cli-service ext-serve'
+    },
+    devDependencies: {
+      'vue-cli-plugin-build-watch': '^1.0.0'
+    }
+  }
+
+  api.extendPackage(pkg)
+}

index.js

@@ -0,0 +1,47 @@
+const { log } = require('@vue/cli-shared-utils')
+const CopyWebpackPlugin = require('copy-webpack-plugin')
+const ChromeExtensionReloader = require('webpack-chrome-extension-reloader')
+const { version } = require('./package.json')
+
+module.exports = (api) => {
+  api.configureWebpack(webpackConfig => {
+    delete webpackConfig.entry.app
+    webpackConfig.entry.background = './src/background.js'
+    webpackConfig.entry['popup/popup'] = './src/popup/popup.js'
+
+    webpackConfig.plugins.push(new CopyWebpackPlugin([
+      { from: './src/icons', to: 'icons', ignore: ['icon.xcf'] },
+      { from: './src/popup/popup.html', to: 'popup/popup.html' },
+      {
+        from: './src/manifest.json',
+        to: 'manifest.json',
+        transform: (content) => {
+          const jsonContent = JSON.parse(content)
+          jsonContent.version = version
+
+          if (process.env.NODE_ENV === 'development') {
+            jsonContent['content_security_policy'] = "script-src 'self' 'unsafe-eval'; object-src 'self'"
+          }
+
+          return JSON.stringify(jsonContent, null, 2)
+        }
+      }
+    ]))
+
+    if (process.env.HMR === 'true') {
+      webpackConfig.plugins = (webpackConfig.plugins || []).concat([
+        new ChromeExtensionReloader()
+      ])
+    }
+  })
+
+  api.registerCommand('ext-serve', (...args) => {
+    log('Starting webpack in watch mode...')
+
+    api.configureWebpack((webpackConfig) => {
+      webpackConfig.watch = true
+    })
+
+    api.service.run('build', ...args)
+  })
+}

locales/en.json

@@ -0,0 +1,13 @@
+{
+    "com": {
+        "rewardstyle": {
+            "browserExt": {
+                "tasks": {
+                    "extServe": {
+                        "description": "Builds and watches the project, writing the files to the output directory"
+                    }
+                }
+            }
+        }
+    }
+}

logo.png

@@ -0,0 +1,31 @@
+{
+  "name": "vue-cli-plugin-browser-extension",
+  "version": "0.0.1",
+  "description": "Browser extension development plugin for vue-cli 3.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "eslint ."
+  },
+  "keywords": [
+    "chrome",
+    "extension",
+    "browser",
+    "plugin",
+    "vue",
+    "cli",
+    "3"
+  ],
+  "license": "GPL-3.0",
+  "repository": "[email protected]:adambullmer/vue-cli-plugin-browser-extension.git",
+  "author": "Adam Bullmer <[email protected]>",
+  "devDependencies": {
+    "@vue/eslint-config-standard": "^3.0.0-rc.3",
+    "eslint": "^5.1.0",
+    "eslint-plugin-vue": "^4.5.0"
+  },
+  "dependencies": {
+    "@vue/cli-shared-utils": "^3.0.0-rc.3",
+    "copy-webpack-plugin": "^4.5.2",
+    "webpack-chrome-extension-reloader": "^0.8.3"
+  }
+}

package.json

@@ -0,0 +1,7 @@
+module.exports = (api) => {
+  api.describeTask({
+    match: /vue-cli-service ext-serve/,
+    description: 'com.rewardstyle.browserExt.tasks.extServe.description',
+    link: 'https://github.com/rewardstyle/linkninjax-ext'
+  })
+}