126 lines
4.2 KiB

# ReadLater WebExtension ![language](https://img.shields.io/badge/language-webextension-blue.svg)
> ReadLaterByEmail webextension generator
## :books: Table of Contents
- [Installation](#package-installation)
- [Usage](#rocket-usage)
- [Features](#sparkles-features)
- [Support](#hammer_and_wrench-support)
- [Contributing](#memo-contributing)
- [License](#scroll-license)
## :package: Installation
### First check if you have composer installed
Before installing this, you need to check if you have `NPM` installed on your computer.
### Then install this script
git clone ssh://gogs@git.shikiryu.com:2200/ReadLaterByEmail/webextensions.git
cd webextensions
npm install
npm run build
## :rocket: Usage
### Load the extension in Chrome & Opera
1. Open Chrome/Opera browser and navigate to chrome://extensions
2. Select "Developer Mode" and then click "Load unpacked extension..."
3. From the file browser, choose to `extension-boilerplate/build/chrome` or (`extension-boilerplate/build/opera`)
### Load the extension in Firefox
1. Open Firefox browser and navigate to about:debugging
2. Click "Load Temporary Add-on" and from the file browser, choose `extension-boilerplate/build/firefox`
### Developing
The following tasks can be used when you want to start developing the extension and want to enable live reload -
- `npm run chrome-watch`
- `npm run opera-watch`
- `npm run firefox-watch`
### Packaging
Run `npm run dist` to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.
#### Firefox
Run `npm run sourcezip` for firefox submission
Update <https://addons.mozilla.org/fr/developers/addon/shikiryu-readlater/versions/submit/>
#### Opera
Update <https://addons.opera.com/developer/package/250537/?tab=versions>
## :sparkles: Features
<dt>Write once and deploy to Chrome, Opera & Firefox</dt>
Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.
Your changes to CSS, HTML & JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience.
<dt>Sensible starting point</dt>
This comes with a gulp based workflow that converts modern <strong>ES6</strong> JavaScript and <strong>SCSS</strong> to JS/CSS.
Scripts are transpiled using Babel and bundled using Browserify.
Sourcemaps are available for both JS and SCSS.
<dt>Sketch (.sketch) assets for icons and promo images</dt>
A .sketch file is included in the resources directory. This has all the icons and promo images that will be needed while uploading the extensions to the app stores.
<dt>Easily configurable and extendable</dt>
The gulpfile is easily understandable and configurable. If you want to add additional tasks or remove un-used ones, you can easily tweak that file to suit your needs.
<dt>Platform specific & Environment specific variables.</dt>
You might need to specify different data variables based on your environment. For example, you might want to use a localhost API endpoint during development and a production API endpoint once the extension is submitted to the appstore. You can specify such data in the json files inside `config` directory.
You can also set custom data variables based on the platform (different variable for Chrome, FF, Opera).
## :hammer_and_wrench: Support
Please [open an issue](https://git.shikiryu.com/ReadLaterByEmail/webextensions/issues/new) for support.
## :memo: Contributing
Please contribute using [Github Flow](https://guides.github.com/introduction/flow/). Create a branch, add commits, and [open a pull request](https://git.shikiryu.com/ReadLaterByEmail/webextensions/compare/master...master).
## :scroll: License
[Creative Commons Attribution NonCommercial (CC-BY-NC)](<https://tldrlegal.com/license/creative-commons-attribution-noncommercial-(cc-nc)>) © [Chouchen](https://github.com/Chouchen/)
Based on [Email This](https://www.emailthis.me) which is licensed under the MIT license.