# 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

```sh
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

<dl>
  <dt>Write once and deploy to Chrome, Opera & Firefox</dt>
  <dd>
    Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.
  </dd>
</dl>

<dl>
  <dt>Live-reload</dt>
  <dd>
    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.
  </dd>
</dl>

<dl>
  <dt>Sensible starting point</dt>
  <dd>
    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.
  </dd>
</dl>

<dl>
  <dt>Sketch (.sketch) assets for icons and promo images</dt>
  <dd>
    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.
  </dd>
</dl>

<dl>
  <dt>Easily configurable and extendable</dt>
  <dd>
    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.
  </dd>
</dl>

<dl>
  <dt>Platform specific & Environment specific variables.</dt>
  <dd>
    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).

  </dd>
</dl>

## :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.