https://github.com/celyes/chrome-extension-boilerplate-vue

Build a Chrome extension with Vue.js 3 and Webpack
https://github.com/celyes/chrome-extension-boilerplate-vue

chrome chrome-extension javascript vue webpack

Last synced: 3 months ago
JSON representation

Build a Chrome extension with Vue.js 3 and Webpack

• Host: GitHub
• URL: https://github.com/celyes/chrome-extension-boilerplate-vue
• Owner: celyes
• Created: 2022-05-07T17:38:44.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-05-05T19:29:52.000Z (almost 2 years ago)
• Last Synced: 2023-05-05T20:45:10.874Z (almost 2 years ago)
• Topics: chrome, chrome-extension, javascript, vue, webpack
• Language: JavaScript
• Homepage:
• Size: 158 KB
• Stars: 8
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Chrome extension boilerplate Vue

Build a Chrome extension with Vue.js and Webpack (via Laravel mix)

## Compiling project files

```sh

# install dependencies

npm install

# compile javascript files

npm run dev

```

You'll get a `dist` folder which is the actual extension.

## Watching for changes

When developing the extension, We need a way to compile `.vue` and ES6 JavaScript files immediately with hot reloading and without any interference from us. Therefore, we're using Laravel mix (don't get fooled by the name. It has nothing to do with PHP) which is built on top of Webpack module bundler and has a much more simple config file syntax.

To watch for changes, run this command:

```sh

npm run watch

```

## Loading the extension to Chrome

Open Google Chrome browser and visit the URL: `chrome://extensions`. Activate developer mode and click on `Load unpacked`. Select the newly generated `dist` folder. 

The extension should be loaded and working perfectly.