Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/williankeller/browser-extension-boilerplate
A boilerplate template for building cross browser extensions (Chrome and Firefox).
https://github.com/williankeller/browser-extension-boilerplate
boilerplate boilerplate-template chrome chrome-extension chrome-plugin cross-browser es6 extension firefox firefox-addon firefox-extension template
Last synced: 2 months ago
JSON representation
A boilerplate template for building cross browser extensions (Chrome and Firefox).
- Host: GitHub
- URL: https://github.com/williankeller/browser-extension-boilerplate
- Owner: williankeller
- License: mit
- Created: 2017-10-10T13:55:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2024-04-08T21:50:58.000Z (9 months ago)
- Last Synced: 2024-10-13T23:41:29.937Z (2 months ago)
- Topics: boilerplate, boilerplate-template, chrome, chrome-extension, chrome-plugin, cross-browser, es6, extension, firefox, firefox-addon, firefox-extension, template
- Language: JavaScript
- Homepage:
- Size: 89.8 KB
- Stars: 47
- Watchers: 2
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Cross-browser Extension Boilerplate
[![Travis status][travis-card]][travis-link] [![Licence][licence-card]][licence-link] [](https://standardjs.com)
[travis-card]: https://travis-ci.org/williankeller/browser-extension-boilerplate.svg?branch=master
[travis-link]: https://travis-ci.org/williankeller/browser-extension-boilerplate "Trevis status"
[licence-card]: https://img.shields.io/badge/License-MIT-blue.svg
[licence-link]: http://opensource.org/licenses/MIT "MIT License"
A boilerplate template for building cross-browser extensions for Chrome and Firefox.
The idea here is make easier to start a great extension for Chrome and Firefox.
This template allow you start your cross-browser extension fast and also work with a organized code structure.
### Starting:
* Open the `manifest.json` file and change the `matches` URL to match exactly with the URL you want your script load.
* You can add more than one URL at the same time, or add a Regex rule, like:
```javascript
"matches": ["https://any-url.com/*"],
```
* Install [Yarn](https://yarnpkg.com) in scope global.
* `$ npm install -g yarn`
* Install dependencies.
* `$ cd browser-extension-boilerplate/ && yarn`
* Start project - Watch files in project and rebuild if any file changed.
* `yarn start`
* Build for production
* `yarn build`
### Installing (Chrome)
1. Visit `chrome://extensions/` in Chrome;
2. Enable the **Developer mode**;
3. Click on **Load unpacked extension**;
4. Select the folder `browser-extension-boilerplate/extension` or the folder name you changed.
### Handler:
* Your script that will handle the page or tab should be inserted inside the `src/app/main.js` file.
### Locales:
* You are able to translate your extension, just go to the `_locales` folder and create the respective language folder.
* This boilerplate starts with two folder examples, like `en` to English (as default language) and `pt` to Portuguese.
* After create the new language folder, you must create a `messages.json` file and insert inside:
```javascript
{
"keyName": {
"message": "Value translatable",
"description": "Description of translatable value"
}
}
```