mubaidr / vue-chrome-extension-boilerplate

Deprecated! Boilerplate for Chrome extension using Vue.js and Webpack with auto-reload enabled.

Deprecated! Please consider: vite-vue3-chrome-extension-v3

vue-chrome-extension-boilerplate

Boilerplate for Chrome extension using Vue.js and Webpack with hot-reload enabled.

Scripts

Install dependencies:

npm install

Build extension and watch for changes:

npm run dev

Build extension zip:

npm run build

Lint all source files:

npm run lint

Contributors ✨

Thanks goes to these wonderful people (emoji key):

stealthleads 🚇 💻

linkerGitHub 💻

Andrew Mackie 📖

Hank X 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

vue-chrome-extension-boilerplate's Issues

webpack4 Support

HMR vs Live Reloading

Is this boilerplate based on webpack-extension-reloader ?

If so I believe HMR is not yet supported. Only live reload - automatic page reload, not individual module reload.
You might want to update the description to avoid confusion.

CVE-2018-3721 Medium Severity Vulnerability detected by WhiteSource

CVE-2018-3721 - Medium Severity Vulnerability

Vulnerable Libraries - lodash-2.4.2.tgz, lodash-4.17.4.tgz

lodash-2.4.2.tgz

A utility library delivering consistency, customization, performance, & extras.

path: /tmp/git/vue-chrome-extension-boilerplate/node_modules/archiver/node_modules/lodash/package.json

Library home page: http://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz

Dependency Hierarchy:

• zip-folder-1.0.0.tgz (Root Library)
  • archiver-0.11.0.tgz
    • ❌ lodash-2.4.2.tgz (Vulnerable Library)

lodash-4.17.4.tgz

Lodash modular utilities.

path: /tmp/git/vue-chrome-extension-boilerplate/node_modules/lodash/package.json

Library home page: https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz

Dependency Hierarchy:

• babel-core-6.26.3.tgz (Root Library)
  • ❌ lodash-4.17.4.tgz (Vulnerable Library)

Vulnerability Details

lodash node module before 4.17.5 suffers from a Modification of Assumed-Immutable Data (MAID) vulnerability via defaultsDeep, merge, and mergeWith functions, which allows a malicious user to modify the prototype of "Object" via proto, causing the addition or modification of an existing property that will exist on all objects.

Publish Date: 2018-06-07

URL: CVE-2018-3721

CVSS 3 Score Details (6.5)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: Low
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: High
  • Availability Impact: None

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://bugzilla.redhat.com/show_bug.cgi?id=CVE-2018-3721

Fix Resolution: Upgrade to version lodash 4.17.5 or greater

---

Step up your Open Source Security Game with WhiteSource here

Manifest v3 support

Do you know how to use Vue in popup with Manifest v3 extensions?

CVE-2016-10540 High Severity Vulnerability detected by WhiteSource

CVE-2016-10540 - High Severity Vulnerability

Vulnerable Library - minimatch-0.3.0.tgz

a glob matcher in javascript

path: /tmp/git/vue-chrome-extension-boilerplate/node_modules/archiver/node_modules/minimatch/package.json

Library home page: http://registry.npmjs.org/minimatch/-/minimatch-0.3.0.tgz

Dependency Hierarchy:

• zip-folder-1.0.0.tgz (Root Library)
  • archiver-0.11.0.tgz
    • glob-3.2.11.tgz
      • ❌ minimatch-0.3.0.tgz (Vulnerable Library)

Vulnerability Details

Minimatch is a minimal matching utility that works by converting glob expressions into JavaScript RegExp objects. The primary function, minimatch(path, pattern) in Minimatch 3.0.1 and earlier is vulnerable to ReDoS in the pattern parameter.

Publish Date: 2018-05-31

URL: CVE-2016-10540

CVSS 3 Score Details (7.5)

Base Score Metrics:

• Exploitability Metrics:
  • Attack Vector: Network
  • Attack Complexity: Low
  • Privileges Required: None
  • User Interaction: None
  • Scope: Unchanged
• Impact Metrics:
  • Confidentiality Impact: None
  • Integrity Impact: None
  • Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://nodesecurity.io/advisories/118

Release Date: 2016-06-20

Fix Resolution: Update to version 3.0.2 or later.

---

Step up your Open Source Security Game with WhiteSource here

TypeError: CleanWebpackPlugin is not a constructor

NOT A DEVELOPER
I cloned the repo and kept running into 'TypeError: CleanWebpackPlugin is not a constructor'. I checked and you were using the correct version of https://www.npmjs.com/package/clean-webpack-plugin as well as the correct way to instantiate:

plugins: [
new VueLoaderPlugin(),
new CleanWebpackPlugin(),
new CopyWebpackPlugin([
{ from: 'assets', to: 'assets' },
{ from: 'manifest.json', to: 'manifest.json', flatten: true },
]),

But the way you were including the module has to be updated:
/Users/..../vue-chrome-extension-boilerplate/webpack.config.js

// const CleanWebpackPlugin = require('clean-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

Once I made that change it all worked :)

Again sorry if this is a bad write-up/incorrect -> im not a developer!

使用input的时候输入很卡

使用input的时候输入很卡

Bug of webpack-extension-reloader

This package will import webextension-polyfill into all entry files
Like a injectd js by content-script, it call not call browser and cause an error

Changes are not being auto-reloaded

When files are modified it should auto-reload extension.

Getting Can't resolve 'buefy/lib/buefy.css'

Getting this error on npm run dev

dist files incomplete

First of all thanks @mubaidr for this amazing boilerplate. I love it!

I have updated icons and I feel like since then following problem started. Upon changing source files, sometimes dist/icons folder becomes empty, or dist/manifest.json is not created. Restarting yarn dev solves the issue but its slowing down the development. Can you think of a solution ?

process.env.NODE_ENV is undefined, caused 'isDevMode' useless

hi, @mubaidr , thanks for your work, I am using it for days, it works fine.
and I found that process.env.NODE_ENV is undefined when I use npm run [] command, and I solved it. maybe you can fix it if it happend at your enviroment too.

hree is my enviroment:

npm -v
6.13.4
node -v
v13.6.0
webpack -v
4.41.6

I dont sure is here anybody else encounter this.
solution: according to webpack.js.org/api/cli/#environment-options, export your webpack config as a function will solve it.

like this:

function exportCfgFunction (env, argv) {
  const isDevMode = env.NODE_ENV === 'development'
  const config = {
    devtool: isDevMode ? 'eval-source-map' : false,
    context: path.resolve(__dirname, './src'),
    entry: {
    },
    output: {
    }
  }
  return config
}
module.exports = exportCfgFunction

WS-2018-0210 Low Severity Vulnerability detected by WhiteSource

WS-2018-0210 - Low Severity Vulnerability

Vulnerable Libraries - lodash-2.4.2.tgz, lodash-4.17.4.tgz

lodash-2.4.2.tgz

A utility library delivering consistency, customization, performance, & extras.

path: /tmp/git/vue-chrome-extension-boilerplate/node_modules/archiver/node_modules/lodash/package.json

Library home page: http://registry.npmjs.org/lodash/-/lodash-2.4.2.tgz

Dependency Hierarchy:

• zip-folder-1.0.0.tgz (Root Library)
  • archiver-0.11.0.tgz
    • ❌ lodash-2.4.2.tgz (Vulnerable Library)

lodash-4.17.4.tgz

Lodash modular utilities.

path: /tmp/git/vue-chrome-extension-boilerplate/node_modules/lodash/package.json

Library home page: https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz

Dependency Hierarchy:

• babel-core-6.26.3.tgz (Root Library)
  • ❌ lodash-4.17.4.tgz (Vulnerable Library)

Vulnerability Details

In the node_module "lodash" before version 4.17.11 the functions merge, mergeWith, and defaultsDeep can be tricked into adding or modifying properties of the Object prototype. These properties will be present on all objects.

Publish Date: 2018-11-25

URL: WS-2018-0210

CVSS 2 Score Details (3.5)

Base Score Metrics not available

Suggested Fix

Type: Change files

Origin: lodash/lodash@90e6199

Release Date: 2018-08-31

Fix Resolution: Replace or update the following files: lodash.js, test.js

---

Step up your Open Source Security Game with WhiteSource here

Action required: Greenkeeper could not be activated 🚨

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

npm vulnerabilities because of zip-folder

this package seems outdated. You could use zip-a-folder otherwise.

zip-folder specify 0.3 for the version of minimatch and not ^0.3.0.

Logo Proporsal

Hi @mubaidr ,

My name is Ulises or TJ if you like,
i'm a graphic designer and I contribute to cool projects (open source) like this one!
if this is something that you're looking forward to, I'll gladly upload some logo proposals

I'll look forward for your reply, cheers!

TJ.

Unable to build stylus code in App.vue <style>

Thanks for this boilerplate!

I'm having trouble using stylus (instead of vanilla CSS) in the style element of App.vue:

<style lang="stylus">
    div
      background-color green
</style>

On build I receive the following error:

ERROR in ./popup/App.vue?vue&type=style&index=0&lang=stylus& (../node_modules/vue-loader/lib??vue-loader-options!./popup/App.vue?vue&type=style&index=0&lang=stylus&) 19:18
Module parse failed: Unexpected token (19:18)
File was processed with these loaders:
 * ../node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| div
>   background-color green
|
 @ ./popup/App.vue?vue&type=style&index=0&lang=stylus& 1:0-129 1:145-148 1:150-276 1:150-276
 @ ./popup/App.vue
 @ ./popup/index.js

I've taken a look at webpack.config.js but I'm not enough of an expert to fix it and do a pull request, sorry.

Invalid babel-loader

Babel loader 8 need @babel-core and not babel-core. This is a major change and you need to change multiple packages & .babelrc

Hot reload is broken

Hot reload is not working for pages (options/popup).

PurgeCSS plugin breaks Vuetify CSS

Thanks for creating and maintaining this repo.

FYI when using Vuetify with this repo, the PurgeCSS plugin removes Vuetify's CSS.

The discussion at FullHuman/purgecss#67 suggests that a loader might fix this - I tried https://github.com/americanexpress/purgecss-loader with the standard settings but it also stripped Vuetify's CSS. This loader may, of course, work with different settings.

I won't be pursuing it further at this stage (I'm happy to have my code working without CSS purging) but am passing this on in case it's useful.

ElementUI CSS / fonts issue

I installed ElementUI and vue-awesome. To get them to work I needed to change some files. This is how my popup/index.js looks like:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/sync'
import 'vue-awesome/icons/plus-square'
import 'vue-awesome/icons/copy'

import App from './App.vue'

Vue.use(ElementUI)
Vue.component('icon', Icon)

// eslint-disable-next-line
new Vue({
  el: '#app',
  render: h => h(App),
})

and I did following changes in webpack.config.js:

      {
        test: /\.css$/,
        use: [
          //isDevMode ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          'vue-style-loader',
          'css-loader',
        ],
      },
      {
        test: /\.(png|jpg|gif|svg|ttf|woff)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]',
        },
      }

mini-css-extract-plugin doesn't output element-ui/lib/theme-chalk/index.css completely inside popup.css for some reason, but vue-style-loader works though, I can see complete imported CSS as an inline CSS inside popup DOM.

Since ElementUI makes use of fonts for icons, I had to add new loader for ttf/woff. Even though webpack doesn't throw any error, ElementUI icons are not showing up:

Failed to load resource: net::ERR_FILE_NOT_FOUND .element-icons.woff:1
Failed to load resource: net::ERR_FILE_NOT_FOUND .element-icons.ttf:1

vue-awesome icons work fine though.