{"id":16202274,"url":"https://github.com/mathiscode/es6-webextension-boilerplate","last_synced_at":"2025-10-19T04:57:08.871Z","repository":{"id":42345126,"uuid":"192794066","full_name":"mathiscode/es6-webextension-boilerplate","owner":"mathiscode","description":"A boilerplate for writing WebExtensions in ES6 with Webpack and support for localization","archived":false,"fork":false,"pushed_at":"2023-10-10T15:08:29.000Z","size":696,"stargazers_count":4,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-02T23:51:18.071Z","etag":null,"topics":["boilerplate","chrome-extension","es6-javascript","firefox-addon","i18n","webextension","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mathiscode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["mathiscode"]}},"created_at":"2019-06-19T19:41:42.000Z","updated_at":"2024-10-25T13:16:57.000Z","dependencies_parsed_at":"2024-10-27T20:19:22.028Z","dependency_job_id":"d1c618cb-f56d-45f1-9607-40b7387936c6","html_url":"https://github.com/mathiscode/es6-webextension-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/mathiscode/es6-webextension-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiscode%2Fes6-webextension-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiscode%2Fes6-webextension-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiscode%2Fes6-webextension-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiscode%2Fes6-webextension-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mathiscode","download_url":"https://codeload.github.com/mathiscode/es6-webextension-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mathiscode%2Fes6-webextension-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262889126,"owners_count":23380168,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","chrome-extension","es6-javascript","firefox-addon","i18n","webextension","webpack"],"created_at":"2024-10-10T09:46:45.923Z","updated_at":"2025-10-19T04:57:08.809Z","avatar_url":"https://github.com/mathiscode.png","language":"JavaScript","funding_links":["https://github.com/sponsors/mathiscode"],"categories":[],"sub_categories":[],"readme":"# ES6 WebExtension Boilerplate \u003c!-- omit in toc --\u003e\n\n\u003c!-- Change the badges below to suit your project --\u003e\n\n\u003c!--\n[![Mozilla Add-on](https://img.shields.io/amo/v/es6-webextension-boilerplate.svg)](https://addons.mozilla.org/en-US/firefox/addon/es6-webextension-boilerplate)\n[![Mozilla Add-on](https://img.shields.io/amo/users/es6-webextension-boilerplate.svg)](https://addons.mozilla.org/en-US/firefox/addon/es6-webextension-boilerplate)\n[![Mozilla Add-on](https://img.shields.io/amo/dw/es6-webextension-boilerplate.svg)](https://addons.mozilla.org/en-US/firefox/addon/es6-webextension-boilerplate)\n[![Mozilla Add-on](https://img.shields.io/amo/stars/es6-webextension-boilerplate)](https://addons.mozilla.org/en-US/firefox/addon/es6-webextension-boilerplate)\n--\u003e\n[![Beerpay](https://beerpay.io/mathiscode/es6-webextension-boilerplate/badge.svg?style=beer-square)](https://beerpay.io/mathiscode/es6-webextension-boilerplate)  [![Beerpay](https://beerpay.io/mathiscode/es6-webextension-boilerplate/make-wish.svg?style=flat-square)](https://beerpay.io/mathiscode/es6-webextension-boilerplate?focus=wish)\n[![Build Status](https://travis-ci.org/mathiscode/es6-webextension-boilerplate.svg?branch=master)](https://travis-ci.org/mathiscode/es6-webextension-boilerplate)\n[![GitHub license](https://img.shields.io/github/license/mathiscode/es6-webextension-boilerplate.svg?color=blue)](https://github.com/mathiscode/es6-webextension-boilerplate/blob/master/LICENSE)\n[![Standardjs](https://img.shields.io/badge/code_style-standard-blue.svg)](https://standardjs.com)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-blue.svg)](https://github.com/mathiscode/es6-webextension-boilerplate/compare)\n[![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?url=https://github.com/mathiscode/es6-webextension-boilerplate#readme\u0026hashtags=firefox,chrome,addon,extension,boilerplate)\n\n---\n\n- [Introduction](#introduction)\n- [Getting Started](#getting-started)\n- [Development](#development)\n- [Modifying](#modifying)\n- [Building](#building)\n- [Version Sync](#version-sync)\n- [Internationalization](#internationalization)\n\n---\n\n## Introduction\n\nES6 WebExtension Boilerplate is designed to get a new browser addon started quickly.\n\n- Ready-to-use development workflow from live-reload to publishing\n- Manifest version is automatically kept in sync with package.json version\n- Internationalization Utilities\n\n## Getting Started\n\n*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.\n\n```sh\ngit clone https://github.com/mathiscode/es6-webextension-boilerplate.git\ncd es6-webextension-boilerplate\nnpm install # or yarn\n```\n\n## Development\n\n```sh\nnpm run develop # or yarn develop\n```\n\nThis 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).\n\nYou can tweak the web-ext config in [web-ext-config.js](web-ext-config.js).\n\nIf you prefer to only start webpack in watch mode: `npm start`\n\n## Modifying\n\nYou will want to look at the following files and directories:\n\n- [extension/manifest.json](extension/manifest.json) - Your extension's manifest\n- [extension/_locales/en/messages.json](extension/_locales/en/messages.json) - English (default) localized messages\n- [src/background.js](src/background.js) - Background script\n- [src/content.js](src/content.js) - Content script\n- [src/views/popup](src/views/popup) - Files related to the extension's toolbar popup (browser action)\n- [src/views/options](src/views/options) - Files related to the extension's options page\n\n## Building\n\n```sh\nnpm run build # or yarn build\n```\n\nThis 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).\n\nAMO 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.\n\n**Note:** If your operating system doesn't provide a `zip` command, you will see a warning, but your source will still be zipped properly.\n\n## Version Sync\n\nThere is a utility to automatically keep your manifest version synced with your package.json version.\n\nWhen incrementing your version, use the following commands:\n\n- `npm run version:patch`\n  - to increment patch number\n- `npm run version:minor`\n  - to increment minor number\n- `npm run version:major`\n  - to increment major number\n\n## Internationalization\n\n[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).\n\nThere 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.\n\nIn the HTML, use the `data-localize` attribute to specify the message key to use; eg:\n\n`\u003ch1 data-localize=\"__MSG_extensionName__\"\u003e\u003c/h1\u003e`\n\nTo see this in action, refer to [src/views/options](src/views/options) and [src/views/popup](src/views/popup).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiscode%2Fes6-webextension-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmathiscode%2Fes6-webextension-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmathiscode%2Fes6-webextension-boilerplate/lists"}