https://github.com/ctechhindi/extension-webpack-cli

Create Google Browser Extension with NPM Webpack CLI
https://github.com/ctechhindi/extension-webpack-cli

extension-chrome javascript npm webpack-cli webpack4

Last synced: 11 months ago
JSON representation

Create Google Browser Extension with NPM Webpack CLI

• Host: GitHub
• URL: https://github.com/ctechhindi/extension-webpack-cli
• Owner: ctechhindi
• Created: 2020-08-10T15:15:31.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2020-08-11T13:34:22.000Z (over 5 years ago)
• Last Synced: 2025-01-07T06:37:56.431Z (about 1 year ago)
• Topics: extension-chrome, javascript, npm, webpack-cli, webpack4
• Language: JavaScript
• Homepage:
• Size: 63.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# [Chrome Extension With NPM Webpack CLI](https://github.com/ctechhindi/extension-webpack-cli)

Create Google Browser Extension with NPM Webpack CLI

## Structure

```

├─ src

   ├─ icons

   ├─ content // content scripts

   ├─ locales

   |  └─ en

   |     └─ messages.json

   ├─ options

   |  ├─ options.html

   |  ├─ options.css

   |  └─ options.js

   ├─ popup

   |  ├─ popup.html

   |  ├─ popup.css

   |  └─ popup.js

   |

   ├─ # Add More Pages

   |

   ├─ background.js

   └─ manifest.json

```

## Usage

```

# Clone this repository

$ git clone https://github.com/ctechhindi/extension-webpack-cli

# Go into the repository

$ cd extension-webpack-cli

# Install dependencies

$ npm install

# Start server

$ npm run watch

```

## Webpack Command

* `npm run watch`

  Build the extension into `dist` folder for `development` mode.

* `npm run build`

  Build the extension into `dist` folder for `production` mode.

* `npm run build-zip`

  After the extension is created, you can use the extension folder as zip format in the `build-zip` Folder.

## Adding extension to Chrome Browser

Before publishing to Chrome Web Store, it is always good to test locally.

All you need to do is to run `npm run build` to put everything required into `dist` folder, then launch `chrome://extensions/` in Google Chrome.

## Credits

* https://github.com/Kocal/vue-web-extension For inspiration on app and build structure