Compare commits
No commits in common. "master" and "0.0.3" have entirely different histories.
127
README.md
127
README.md
@ -1,67 +1,28 @@
|
|||||||
# ReadLater WebExtension ![language](https://img.shields.io/badge/language-webextension-blue.svg)
|
<div align="center">
|
||||||
|
<h1>
|
||||||
|
Extension Boilerplate
|
||||||
|
</h1>
|
||||||
|
|
||||||
> ReadLaterByEmail webextension generator
|
<p>
|
||||||
|
<strong>A foundation for creating browser extensions for Chrome, Opera & Firefox.</strong>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
## :books: Table of Contents
|
Now that Firefox supports WebExtensions, it has become a lot easier to build browser extensions/addons for multiple browsers without duplicating the codebase. This project serves as a sensible starting point to help you get started.
|
||||||
|
|
||||||
- [Installation](#package-installation)
|
<div align="center">
|
||||||
- [Usage](#rocket-usage)
|
<a href="https://www.emailthis.me/open-source/extension-boilerplate">
|
||||||
- [Features](#sparkles-features)
|
<img src="./resources/chrome-promo/large.png" alt="Extension Boilerplate">
|
||||||
- [Support](#hammer_and_wrench-support)
|
</a>
|
||||||
- [Contributing](#memo-contributing)
|
</div>
|
||||||
- [License](#scroll-license)
|
|
||||||
|
|
||||||
## :package: Installation
|
I have extracted this from the browser extensions that I built for my side-project, [Email This](https://www.emailthis.me).
|
||||||
|
|
||||||
### First check if you have composer installed
|
> Side note: Do check out [**Email This**](https://www.emailthis.me). It is a simpler alternative to bookmarking tools like Pocket, Readability & Instapaper. Email This will remove ads & distractions from an article and send you a nice email with just the text/images. No need to install any additional applications or login to another app just to access your bookmarks.
|
||||||
|
The Chrome Extensions is available [on the Chrome Web Store](https://chrome.google.com/webstore/detail/email-this/lgblkllcjgihfnlefhnnpppndbbjallh).
|
||||||
|
|
||||||
Before installing this, you need to check if you have `NPM` installed on your computer.
|
|
||||||
|
|
||||||
### Then install this script
|
## Features
|
||||||
|
|
||||||
```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>
|
<dl>
|
||||||
<dt>Write once and deploy to Chrome, Opera & Firefox</dt>
|
<dt>Write once and deploy to Chrome, Opera & Firefox</dt>
|
||||||
@ -106,20 +67,56 @@ Update <https://addons.opera.com/developer/package/250537/?tab=versions>
|
|||||||
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 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).
|
You can also set custom data variables based on the platform (different variable for Chrome, FF, Opera).
|
||||||
|
|
||||||
</dd>
|
</dd>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
## :hammer_and_wrench: Support
|
|
||||||
|
|
||||||
Please [open an issue](https://git.shikiryu.com/ReadLaterByEmail/webextensions/issues/new) for support.
|
|
||||||
|
|
||||||
## :memo: Contributing
|
## Installation
|
||||||
|
1. Clone the repository `git clone https://github.com/EmailThis/extension-boilerplate.git`
|
||||||
|
2. Run `npm install`
|
||||||
|
3. Run `npm run build`
|
||||||
|
|
||||||
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).
|
Alternately, if you want to try out the sample extension, here are the download links. After you download it, unzip the file and load it in your browser using the steps mentioned below.
|
||||||
|
- [**Download Chrome Extension**](https://github.com/EmailThis/extension-boilerplate/releases/download/v1.0/chrome.zip)
|
||||||
|
- [**Download Opera Extension**](https://github.com/EmailThis/extension-boilerplate/releases/download/v1.0/opera.zip)
|
||||||
|
- [**Download Firefox Extension**](https://github.com/EmailThis/extension-boilerplate/releases/download/v1.0/firefox.zip)
|
||||||
|
|
||||||
## :scroll: License
|
|
||||||
|
|
||||||
[Creative Commons Attribution NonCommercial (CC-BY-NC)](<https://tldrlegal.com/license/creative-commons-attribution-noncommercial-(cc-nc)>) © [Chouchen](https://github.com/Chouchen/)
|
##### 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`)
|
||||||
|
|
||||||
Based on [Email This](https://www.emailthis.me) which is licensed under the MIT license.
|
|
||||||
|
##### 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.
|
||||||
|
|
||||||
|
|
||||||
|
## TODO
|
||||||
|
- [ ] Add support for Safari
|
||||||
|
- [x] Add Firefox & Opera Promo images
|
||||||
|
- [x] Add sample screenshot templates
|
||||||
|
- [ ] Write a guide for using config variables & JS preprocessor
|
||||||
|
|
||||||
|
|
||||||
|
-----------
|
||||||
|
This project is licensed under the MIT license.
|
||||||
|
|
||||||
|
If you have any questions or comments, please create a new issue. I'd be happy to hear your thoughts.
|
||||||
|
|
||||||
|
|
||||||
|
Bharani, [Email This](https://www.emailthis.me)
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Read Later by Email",
|
"name": "Shikiryu Read Later",
|
||||||
"version": "0.0.3",
|
"version": "0.0.2.2",
|
||||||
"manifest_version": 2,
|
"manifest_version": 2,
|
||||||
"description": "__MSG_extensionDescription__",
|
"description": "__MSG_extensionDescription__",
|
||||||
"icons": {
|
"icons": {
|
||||||
@ -9,16 +9,26 @@
|
|||||||
},
|
},
|
||||||
"default_locale": "en",
|
"default_locale": "en",
|
||||||
"background": {
|
"background": {
|
||||||
"scripts": ["scripts/background.js"]
|
"scripts": [
|
||||||
|
"scripts/background.js"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
"permissions": ["activeTab", "storage"],
|
"permissions": [
|
||||||
|
"activeTab",
|
||||||
|
"storage"
|
||||||
|
],
|
||||||
"options_ui": {
|
"options_ui": {
|
||||||
"page": "options.html"
|
"page": "options.html"
|
||||||
},
|
},
|
||||||
"content_scripts": [
|
"content_scripts": [
|
||||||
{
|
{
|
||||||
"matches": ["http://*/*", "https://*/*"],
|
"matches": [
|
||||||
"js": ["scripts/contentscript.js"],
|
"http://*/*",
|
||||||
|
"https://*/*"
|
||||||
|
],
|
||||||
|
"js": [
|
||||||
|
"scripts/contentscript.js"
|
||||||
|
],
|
||||||
"run_at": "document_end",
|
"run_at": "document_end",
|
||||||
"all_frames": false
|
"all_frames": false
|
||||||
}
|
}
|
||||||
@ -29,7 +39,7 @@
|
|||||||
"32": "icons/favicon-32x32.png",
|
"32": "icons/favicon-32x32.png",
|
||||||
"96": "icons/favicon-96x96.png"
|
"96": "icons/favicon-96x96.png"
|
||||||
},
|
},
|
||||||
"default_title": "Read Later by Email",
|
"default_title": "Shikiryu Bookmarklet",
|
||||||
"default_popup": "popup.html"
|
"default_popup": "popup.html"
|
||||||
},
|
},
|
||||||
"applications": {
|
"applications": {
|
||||||
|
@ -1,27 +0,0 @@
|
|||||||
#English
|
|
||||||
This extension collect the instance URL you'll be sending your page to and the token used to identify yourself on this instance.
|
|
||||||
This will be saved on your browser local storage.
|
|
||||||
|
|
||||||
The following elements are sent to the instance:
|
|
||||||
|
|
||||||
- title
|
|
||||||
- description
|
|
||||||
- image
|
|
||||||
|
|
||||||
They are automatically generated with the current tab content. With your current token, you can also send a comment which will reach the instance.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# French
|
|
||||||
|
|
||||||
Cette extension collecte l'URL de l'instance vers laquelle vous allez envoyer les informations and le jeton vous permettant de vous identifier sur cette instance.
|
|
||||||
Ces deux données sont enregistrées localement dans le local storage de votre navigateur.
|
|
||||||
|
|
||||||
Les éléments suivant seront envoyés à l'instance :
|
|
||||||
|
|
||||||
- titre
|
|
||||||
- description
|
|
||||||
- image
|
|
||||||
|
|
||||||
Ils seront générés automatiquement à partir des mêmes informations utilisées sur l'onglet actuellement ouvert.
|
|
||||||
Avec votre jeton en cours, vous pourrez aussi envoyer un commentaire de cet onglet vers l'instance.
|
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"extensionName": {
|
"extensionName": {
|
||||||
"message": "Read Later by Email",
|
"message": "Shikiryu Read Later",
|
||||||
"description": "The name of the extension."
|
"description": "The name of the extension."
|
||||||
},
|
},
|
||||||
"extensionDescription": {
|
"extensionDescription": {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"extensionName": {
|
"extensionName": {
|
||||||
"message": "Read Later by Email",
|
"message": "Shikiryu Read Later",
|
||||||
"description": "The name of the extension."
|
"description": "The name of the extension."
|
||||||
},
|
},
|
||||||
"extensionDescription": {
|
"extensionDescription": {
|
||||||
|
@ -53,7 +53,7 @@
|
|||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="unit whole center-on-mobiles">
|
<div class="unit whole center-on-mobiles">
|
||||||
<p class="text-center text-muted">
|
<p class="text-center text-muted">
|
||||||
© <a href="https://readlater.shikiryu.com">ReadLaterByEmail</a>
|
© <a href="https://readlater.shikiryu.com">Shikiryu</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -30,8 +30,7 @@
|
|||||||
<div class="grid">
|
<div class="grid">
|
||||||
<div class="unit whole center-on-mobiles">
|
<div class="unit whole center-on-mobiles">
|
||||||
<p class="text-center text-muted">
|
<p class="text-center text-muted">
|
||||||
©
|
© <a href="https://readlater.shikiryu.com">Shikiryu</a>
|
||||||
<a href="https://readlater.shikiryu.com">ReadLaterByEmail</a>
|
|
||||||
</p>
|
</p>
|
||||||
<p class="js-options" data-message="optionsAndSettings"></p>
|
<p class="js-options" data-message="optionsAndSettings"></p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,9 +19,6 @@ storage.get("extract", function(resp) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
urlInput.addEventListener("blur", function(e) {
|
urlInput.addEventListener("blur", function(e) {
|
||||||
if (this.value.endsWith("/")) {
|
|
||||||
this.value = this.value.substring(0, this.value.length - 1);
|
|
||||||
}
|
|
||||||
var value = this.value;
|
var value = this.value;
|
||||||
storage.set({ url: value }, function() {
|
storage.set({ url: value }, function() {
|
||||||
message.textContent = ext.i18n.getMessage("URLChanged");
|
message.textContent = ext.i18n.getMessage("URLChanged");
|
||||||
|
Loading…
Reference in New Issue
Block a user