Allows to add the page content into the email, server-side

Fix #4
This commit is contained in:
Clement 2020-07-02 13:05:21 +02:00
parent 8723154371
commit 19aa864579
7 changed files with 120 additions and 70 deletions

View File

@ -23,6 +23,10 @@
"message": "Token:",
"description": "Token label"
},
"optionsExtract": {
"message": "Send page content into the email:",
"description": "Extract label"
},
"URLChanged": {
"message": "URL changed!",
"description": "Message when URL is changed."
@ -31,6 +35,10 @@
"message": "Token saved!",
"description": "Message when token is changed."
},
"optionSaved": {
"message": "Option saved!",
"description": "Message when option is changed."
},
"cantExtractTitle": {
"message": "Sorry, could not extract this page's title and URL",
"description": "Message when we could not extract the page's title and URL"
@ -46,5 +54,9 @@
"defaultURL": {
"message": "https://app.readlater.shikiryu.com",
"description": "Default URL"
},
"excerpt": {
"message": "Add content",
"description": "Option to add the webpage content into the email"
}
}

View File

@ -23,14 +23,22 @@
"message": "Jeton :",
"description": "Token label"
},
"optionsExtract": {
"message": "Envoyer le contenu de la page dans le mail:",
"description": "Extract label"
},
"URLChanged": {
"message": "URL changed!",
"message": "URL enregistrée !",
"description": "Message when URL is changed."
},
"tokenSaved": {
"message": "Token saved!",
"message": "Jeton enregistré !",
"description": "Message when token is changed."
},
"optionSaved": {
"message": "Option enregistrée !",
"description": "Message when option is changed."
},
"cantExtractTitle": {
"message": "Sorry, could not extract this page's title and URL",
"description": "Message when we could not extract the page's title and URL"
@ -46,5 +54,9 @@
"defaultURL": {
"message": "https://app.readlater.shikiryu.com",
"description": "Default URL"
},
"excerpt": {
"message": "Ajouter le contenu",
"description": "Option to add the webpage content into the email"
}
}

View File

@ -1,57 +1,63 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles/options.css" rel="stylesheet">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title data-message="optionsAndSettings"></title>
</head>
<body class="wrap">
<div class="grid">
<div class="unit whole center-on-mobiles">
<div class="heading">
<h1 data-message="extensionName"></h1>
<p class="lead" data-message="optionsPageSubtitle"></p>
</div>
</div>
</div>
<section>
<div class="grid">
<div class="unit whole center-on-mobiles">
<div id="msg"></div>
</div>
</div>
</section>
<section class="content">
<head>
<meta charset="utf-8" />
<link href="styles/options.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title data-message="optionsAndSettings"></title>
</head>
<body class="wrap">
<div class="grid">
<div class="unit whole center-on-mobiles">
<div class="option">
<h5 data-message="optionsURL"></h5>
<input type="text" name="url" value="https://app.readlater.shikiryu.com" />
<div class="heading">
<h1 data-message="extensionName"></h1>
<p class="lead" data-message="optionsPageSubtitle"></p>
</div>
</div>
</div>
<div class="option">
<section>
<div class="grid">
<div class="unit whole center-on-mobiles">
<div id="msg"></div>
</div>
</div>
</section>
<section class="content">
<div class="grid">
<div class="unit whole center-on-mobiles">
<div class="option">
<h5 data-message="optionsURL"></h5>
<input
type="text"
name="url"
value="https://app.readlater.shikiryu.com"
/>
</div>
<div class="option">
<h5 data-message="optionsToken"></h5>
<input type="text" name="token" value="" />
</div>
<div class="option">
<h5 data-message="optionsExtract"></h5>
<input type="checkbox" name="extract" value="1" />
</div>
</div>
</div>
</div>
</section>
</section>
<footer class="main-footer">
<div class="grid">
<div class="unit whole center-on-mobiles">
<p class="text-center text-muted">
&copy; <a href="https://readlater.shikiryu.com">Shikiryu</a>
</p>
<footer class="main-footer">
<div class="grid">
<div class="unit whole center-on-mobiles">
<p class="text-center text-muted">
&copy; <a href="https://readlater.shikiryu.com">Shikiryu</a>
</p>
</div>
</div>
</div>
</footer>
<script src="scripts/options.js"></script>
</body>
</footer>
<script src="scripts/options.js"></script>
</body>
</html>

View File

@ -1,28 +1,30 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles/popup.css" rel="stylesheet">
<meta charset="utf-8" />
<link href="styles/popup.css" rel="stylesheet" />
</head>
<body>
<div id="app" class="popup-content">
<h1 data-message="extensionName"></h1>
<div id="display-container">
<div class="site-description">
<h3 class="title" data-template="title"></h3>
<p class="description" data-template="description"></p>
<p class="image" data-template="image"></p>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment"></textarea>
</div>
<a href="" target="_blank" class="url" data-template="url"></a>
</div>
<div class="action-container">
<button id="save-btn" class="btn btn-primary">Save</button>
</div>
</div>
<div class="site-description">
<h3 class="title" data-template="title"></h3>
<p class="description" data-template="description"></p>
<p class="image" data-template="image"></p>
<div>
<label for="comment">Comment:</label>
<textarea id="comment" name="comment"></textarea>
</div>
<a href="" target="_blank" class="url" data-template="url"></a>
</div>
<div class="action-container">
<label for="save-content" data-message="excerpt"></label>
<input type="checkbox" id="save-content" name="save-content" />
<button id="save-btn" class="btn btn-primary">Save</button>
</div>
</div>
<footer class="main-footer">
<div class="grid">
@ -35,7 +37,7 @@
</div>
</footer>
</div>
<script src="scripts/popup.js"></script>
</body>
</html>

View File

@ -18,6 +18,9 @@ ext.runtime.onMessage.addListener(function(request, sender, sendResponse) {
i: encodeURIComponent(data.image),
c: encodeURIComponent(data.comment)
};
if (data.extract) {
params["e"] = true;
}
var queryString = Object.keys(params)
.map(key => {
return key + "=" + params[key];

View File

@ -3,6 +3,7 @@ import storage from "./utils/storage";
var urlInput = document.querySelector("[name=url]");
var tokenInput = document.querySelector("[name=token]");
var extractInput = document.querySelector("[name=extract]");
var message = document.getElementById("msg");
storage.get("url", function(resp) {
@ -13,6 +14,10 @@ storage.get("token", function(resp) {
tokenInput.value = resp.token;
});
storage.get("extract", function(resp) {
extractInput.value = resp.extract;
});
urlInput.addEventListener("blur", function(e) {
var value = this.value;
storage.set({ url: value }, function() {
@ -27,6 +32,13 @@ tokenInput.addEventListener("blur", function(e) {
});
});
extractInput.addEventListener("change", function(e) {
var value = this.value;
storage.set({ extract: value }, function() {
message.textContent = ext.i18n.getMessage("optionSaved");
});
});
document.querySelectorAll("[data-message]").forEach(function(elt) {
elt.textContent = ext.i18n.getMessage(elt.dataset.message);
});

View File

@ -10,10 +10,12 @@ var page_data = {
};
var popup = document.getElementById("app");
storage.get("color", function(resp) {
var color = resp.color;
if (color) {
popup.style.backgroundColor = color;
storage.get("extract", function(resp) {
var extract = resp.extract;
if (extract) {
document.getElementById("save-content").checked = extract
? "checked"
: false;
}
});
@ -45,7 +47,7 @@ var renderBookmark = data => {
ext.tabs.query({ active: true, currentWindow: true }, function(tabs) {
var activeTab = tabs[0];
chrome.tabs.sendMessage(
ext.tabs.sendMessage(
activeTab.id,
{ action: "process-page" },
renderBookmark
@ -56,6 +58,7 @@ popup.addEventListener("click", function(e) {
if (e.target && e.target.matches("#save-btn")) {
e.preventDefault();
page_data.comment = document.getElementById("comment").value;
page_data.extract = document.getElementById("save-content").checked;
ext.runtime.sendMessage(
{ action: "perform-save", data: page_data },
function(response) {