https://github.com/cmroanirgo/webextension-template

A template/boilerplate for generating a cross-platform webextension plugin (Chrome, Firefox and more), using webpack for packaging
https://github.com/cmroanirgo/webextension-template

boilerplate chrome-extension chrome-plugin firefox-addon firefox-extension webextensions

Last synced: 11 days ago
JSON representation

A template/boilerplate for generating a cross-platform webextension plugin (Chrome, Firefox and more), using webpack for packaging

• Host: GitHub
• URL: https://github.com/cmroanirgo/webextension-template
• Owner: cmroanirgo
• Created: 2017-12-09T09:41:21.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-12-09T10:20:52.000Z (about 7 years ago)
• Last Synced: 2024-11-12T12:23:09.007Z (2 months ago)
• Topics: boilerplate, chrome-extension, chrome-plugin, firefox-addon, firefox-extension, webextensions
• Language: JavaScript
• Homepage:
• Size: 71.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# WebExtension Boilerplate/Template

This is a simple project to give a basic skeleton of a WebExtension that is ready to go for Firefox and Chrome. Other platforms are exceedingly easy to add (details below).

## Installation

Either download or clone this repo and `cd` to it.

```

npm install

```

This will install around 50MB of webpack and related modules in order to develop.

1. Edit `package.json` and change the 'TODO' entries, and version number

2. Edit `src/manifest.firefox.json` and change the 'id'

3. Update the icons. (A modified sketch file, originally by [Bharani, & Email This](https://www.emailthis.me) is provided in resources)

You are ready to build.

## Usage

Building

```

npm run build

```

Debug (non-minified) builds are available using:

```

npm run build:debug

```

Watching

```

npm run watch

```

Note: It is important that you run `npm run build` to generate a final minified version, rather than relying on the last watch output.

### Adding New Target Platforms

If you wish to develop for Edge or Opera then:

1. Edit `webpack.config.js` and add an appropriate target.

2. If necessary, add a platform specific manifest (like manifest.firefox.json) in `src/`

## Testing

### Chrome

1. Go to chrome://extensions/

2. Click `Load Unpacked Extension` and select the `build/chrome` folder

Note: Chrome will keep this extension loaded after shutting down Chrome.

### Firefox

1. Go to about:debugging#addons

2. Click 'Load Temporary add-on' and select any file in the 'build/firefox' folder

Note: Firefox will always unload this extension after shutting down Firefox.

## Credits

Thanks to the inspirational work by Bharani, and his [Email This](https://www.emailthis.me) boilerplate. Some of his code has been used (and credited) in this project, but will be morphed and removed over time.

The primary differences between the two projects:

1. Removal of language support. Ironic, no?.

2. Removal of Opera support. It's basically the same as Chrome, but trivial to add back in, if need be.

3. Changed grunt to use webpack. This allows the code to better minified & controlled.

4. Addition of a jquery-like module (notjquery.js) which allows for most common jquery functions, without the seperate (& large) download. See the source files for a demo.