Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mathiscode/es6-webextension-boilerplate
A boilerplate for writing WebExtensions in ES6 with Webpack and support for localization
https://github.com/mathiscode/es6-webextension-boilerplate
boilerplate chrome-extension es6-javascript firefox-addon i18n webextension webpack
Last synced: 19 days ago
JSON representation
A boilerplate for writing WebExtensions in ES6 with Webpack and support for localization
- Host: GitHub
- URL: https://github.com/mathiscode/es6-webextension-boilerplate
- Owner: mathiscode
- License: mit
- Created: 2019-06-19T19:41:42.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-10-10T15:08:29.000Z (about 1 year ago)
- Last Synced: 2024-10-11T09:46:28.593Z (about 1 month ago)
- Topics: boilerplate, chrome-extension, es6-javascript, firefox-addon, i18n, webextension, webpack
- Language: JavaScript
- Homepage:
- Size: 680 KB
- Stars: 4
- Watchers: 0
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# ES6 WebExtension Boilerplate
[](https://beerpay.io/mathiscode/es6-webextension-boilerplate) [](https://beerpay.io/mathiscode/es6-webextension-boilerplate?focus=wish)
[](https://travis-ci.org/mathiscode/es6-webextension-boilerplate)
[](https://github.com/mathiscode/es6-webextension-boilerplate/blob/master/LICENSE)
[](https://standardjs.com)
[](https://github.com/mathiscode/es6-webextension-boilerplate/compare)
[](https://twitter.com/intent/tweet?url=https://github.com/mathiscode/es6-webextension-boilerplate#readme&hashtags=firefox,chrome,addon,extension,boilerplate)
---
- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Development](#development)
- [Modifying](#modifying)
- [Building](#building)
- [Version Sync](#version-sync)
- [Internationalization](#internationalization)
---
## Introduction
ES6 WebExtension Boilerplate is designed to get a new browser addon started quickly.
- Ready-to-use development workflow from live-reload to publishing
- Manifest version is automatically kept in sync with package.json version
- Internationalization Utilities
## Getting Started
*Optional:* You'll probably want to [use this repository as a template](https://github.com/mathiscode/es6-webextension-boilerplate/generate), then replace the clone URL and directory name below.
```sh
git clone https://github.com/mathiscode/es6-webextension-boilerplate.git
cd es6-webextension-boilerplate
npm install # or yarn
```
## Development
```sh
npm run develop # or yarn develop
```
This will cause webpack to watch for changes and automatically compile the extension, as well as automatically load your extension into Firefox using [web-ext](https://github.com/mozilla/web-ext).
You can tweak the web-ext config in [web-ext-config.js](web-ext-config.js).
If you prefer to only start webpack in watch mode: `npm start`
## Modifying
You will want to look at the following files and directories:
- [extension/manifest.json](extension/manifest.json) - Your extension's manifest
- [extension/_locales/en/messages.json](extension/_locales/en/messages.json) - English (default) localized messages
- [src/background.js](src/background.js) - Background script
- [src/content.js](src/content.js) - Content script
- [src/views/popup](src/views/popup) - Files related to the extension's toolbar popup (browser action)
- [src/views/options](src/views/options) - Files related to the extension's options page
## Building
```sh
npm run build # or yarn build
```
This will compile your code and create a ZIP file in the `web-ext-artifacts` directory that is ready to be uploaded to [AMO](https://addons.mozilla.org) or [Chrome Web Store](https://chrome.google.com/webstore).
AMO requires that you submit the full source to be listed publicly, so the build command also zips the entire source into `web-ext-artifacts/source.zip` to be submitted with your extension.
**Note:** If your operating system doesn't provide a `zip` command, you will see a warning, but your source will still be zipped properly.
## Version Sync
There is a utility to automatically keep your manifest version synced with your package.json version.
When incrementing your version, use the following commands:
- `npm run version:patch`
- to increment patch number
- `npm run version:minor`
- to increment minor number
- `npm run version:major`
- to increment major number
## Internationalization
[Internationalization](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization) is supported, and locale definitions are found in [extension/_locales](extension/_locales).
There is also a helper utility in [src/utils/i18n.js](src/utils/i18n.js) that will allow you to localize your extension's HTML pages. This is done by default in the options and popup pages.
In the HTML, use the `data-localize` attribute to specify the message key to use; eg:
`
`
To see this in action, refer to [src/views/options](src/views/options) and [src/views/popup](src/views/popup).