GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → ALiangLiang → vue-webpack-chrome-extension-template

ALiangLiang / vue-webpack-chrome-extension-template

Licence: MIT license
Template for quick creation of Chrome extension on Vuejs hot reloading when developing.

Programming Languages

javascript
184084 projects - #8 most used programming language
Vue
7211 projects
HTML
75241 projects

Labels

chrome-extensiontemplatewebpackvuewebpack-boilerplatevuejs2

Projects that are alternatives of or similar to vue-webpack-chrome-extension-template

webpack-boilerplate
Minimal webpack boilerplate
Stars: ✭ 42 (-60.75%)
Mutual labels:  webpack-boilerplate
webpack-starter
🗽 Webpack + Babel + Sass
Stars: ✭ 11 (-89.72%)
Mutual labels:  webpack-boilerplate
babel-webpack-package-boilerplate
boilerplate for building an npm package using webpack, with next-gen javascript transpilation through babel
Stars: ✭ 23 (-78.5%)
Mutual labels:  webpack-boilerplate
webpack-boilerplate
Webpack 4 boilerplate with Babel, Bootstrap 4, jQuery and SCSS on board
Stars: ✭ 24 (-77.57%)
Mutual labels:  webpack-boilerplate
vue-webpack-boilerplate
A webpack boilerplate with vue-loader, axios, vue-router and vuex
Stars: ✭ 51 (-52.34%)
Mutual labels:  webpack-boilerplate
multi-vue-webpack
A multi entry vue project template
Stars: ✭ 18 (-83.18%)
Mutual labels:  webpack-boilerplate
react-ts-webpack-boilerplate
This is the ultimate lightweight boilerplate needed for a React application using typescript with webpack
Stars: ✭ 17 (-84.11%)
Mutual labels:  webpack-boilerplate
webpack-boilerplate
Webpack 4 boilerplate (babel, eslint, prettier, jest, sass, postcss, hmr, browsersync)
Stars: ✭ 33 (-69.16%)
Mutual labels:  webpack-boilerplate
Webpack Boilerplate
📦 ‎ A sensible webpack 5 boilerplate.
Stars: ✭ 1,949 (+1721.5%)
Mutual labels:  webpack-boilerplate
react-boilerplate
minimalize modern react boilerplate created using webpack 4 include technology pwa and include popular tools for react developer
Stars: ✭ 18 (-83.18%)
Mutual labels:  webpack-boilerplate
webpack-es6-sass-boilerplate
A minimalistic webpack 4 based boilerplate for building web apps
Stars: ✭ 38 (-64.49%)
Mutual labels:  webpack-boilerplate
webpack-typescript-react
Webpack 5 boilerplate with support of most common loaders and modules (see tags and description)
Stars: ✭ 185 (+72.9%)
Mutual labels:  webpack-boilerplate
python-webpack-boilerplate
Django Webpack boilerplate & Flask Webpack boilerplate
Stars: ✭ 87 (-18.69%)
Mutual labels:  webpack-boilerplate

Vue.js Webpack Chrome Extension Template

npm

Template for quick creation of Chrome extension on Vuejs hot reloading when developing.

Installation:

This boilerplate was built as a template for vue-cli and includes options to customize your final scaffolded app.

# install vue-cli
$ npm install -g vue-cli
# create a new project using the template
$ vue init ALiangLiang/vue-webpack-chrome-extension-template my-project
# install dependencies and go!
$ cd my-project
$ npm install # or yarn
$ npm run dev # or yarn dev

Structure

.
├── build                             # core scripts
│   ├── page.ejs                      # html page boilerplate of background, options, etc.
│   ├── tools.js                      # util scripts
│   ├── webpack.base.js               # base webpack configure file
│   ├── webpack.dev.js                # configure file on developing, would merge into base
│   └── webpack.prod.js               # configure file on build, would merge into base
├── plugins                           # special webpack plugins for Chrome extension
│   ├── GenerateLocaleJsonPlugin.js   # Transform locale message."js" to "json"
│   └── GenerateManifestJsonPlugin.js # Transform your manifest."js" to "json"
├── dist                              # your runtime code. generate by program.
├── src                               # your source code
│   ├── _locales                      # Implement internationalization across your whole extension (https://developer.chrome.com/extensions/i18n)
│   ├── background                    # Background work of your extension (https://developer.chrome.com/extensions/background_pages)
│   ├── content                       # Run in the context of web pages (https://developer.chrome.com/extensions/content_scripts)
│   ├── devtools                      # It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more. (https://developer.chrome.com/extensions/devtools)
│   ├── ext                           # Shared scripts
│   ├── options                       # To allow users to customize the behavior of your extension, you may wish to provide an options page. (https://developer.chrome.com/extensions/options)
│   ├── popup                         # The page (window) that will be displayed when the icon is clicked
│   ├── tab                           # Your application will work in a separate tab
│   └── manifest.js                   # Descriptions of the application, its rights and possibilities (https://developer.chrome.com/extensions/manifest)
├── static                            # static assets, would copy into dist directly.
│   └── icons                         # icons
├── extension.zip                     # extension package. used to upload to web store.
├── package.json                      # build scripts and dependencies
├── package-lock.json                 # npm lockfile, should be commit into git
└── yarn.lock                         # yarn lockfile, should be commit into git

Pre-install

  • vue
  • vue-router
  • lodash - Javascript util library
  • element-ui - Style Framework for Vue.js

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].