Browse Source

add option page

master
Tjiho 8 months ago
parent
commit
27c83e41d7
  1. 31
      main.js
  2. 13
      manifest.json
  3. 69
      options.html
  4. 25
      options.js

31
main.js

@ -1,18 +1,23 @@
const fields_to_autocomplete = ['famount-once','email','civility','firstname','lastname','address1','address2','postcode','city','reserved_telephone','reserved_birthdate','cardnumber']
const fields_to_autocomplete = ['famount-once','email','civility','firstname','lastname','address1','postcode','city','reserved_telephone','reserved_birthdate','cardnumber']
const values_to_put_in_fields = ['19','**.**@laposte.net','1','Tom','Darboux','***','', 31000, 'toulouse','****','****-**-**','****************']
const binding = {address1: 'address', reserved_birthdate:'birthdate',reserved_telephone:'telephone'}
for (field_index in fields_to_autocomplete) {
const field = document.getElementById(fields_to_autocomplete[field_index])
switch (field.nodeName) {
case "SELECT":
console.log('select not supported yet')
break;
case "INPUT":
field.value=values_to_put_in_fields[field_index]
break;
default:
for (let field of fields_to_autocomplete) {
let field_dom_element = document.getElementById(field)
field = binding[field] || field
var storageItem = browser.storage.local.get(field);
storageItem.then((res) => {
const value = res[field]
switch (field_dom_element.nodeName) {
case "SELECT":
console.log('select not supported yet')
break;
case "INPUT":
field_dom_element.value=value
break;
default:
}
});
}
}

13
manifest.json

@ -1,11 +1,11 @@
{
"manifest_version": 2,
"name": "Borderify",
"name": "croix-rouge",
"version": "1.0",
"description": "Adds a red border to all webpages matching mozilla.org.",
"description": "autocomplete field in croix-rouge donation page",
"permissions": ["storage"],
"icons": {
"48": "icons/red-cross.png"
},
@ -15,6 +15,9 @@
"matches": ["*://donner.croix-rouge.fr/*"],
"js": ["main.js"]
}
]
],
"options_ui": {
"page": "options.html",
"browser_style": true
}
}

69
options.html

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>storage.managed colour: <b id="managed-colour">no value found</b></p>
<form>
<h2>Infos personelles</h2>
<div class="input-line">
<label for="firstname"> Prénom: </label>
<input type="text" id="firstname" placeholder="Henri">
</div>
<div class="input-line">
<label for="lastname"> Nom: </label>
<input type="text" id="lastname" placeholder="De Bourbon">
</div>
<div class="input-line">
<label for="email"> Email: </label>
<input type="text" id="email" placeholder="henri@couronne.fr">
</div>
<div class="input-line">
<label for="birthdate"> Date de naissance: </label>
<input type="date" id="birthdate" placeholder="">
</div>
<h2>Adresse</h2>
<div class="input-line">
<label for="address"> Adresse: </label>
<input type="text" id="address" placeholder="1 rue du château">
</div>
<div class="input-line">
<label for="firstname"> Code postal: </label>
<input type="text" id="postcode" placeholder="64000">
</div>
<div class="input-line">
<label for="email"> Ville: </label>
<input type="text" id="city" placeholder="Pau">
</div>
<div class="input-line">
<label for="birthdate"> Téléphone: </label>
<input type="text" id="telephone" placeholder="06...">
</div>
<h2>Moyens de payement</h2>
<div class="input-line">
<label for="firstname"> numero de carte bancaire: </label>
<input type="number" id="cardnumber" placeholder="5314....">
</div>
<button type="submit">Save</button>
</form>
<script src="options.js"></script>
<style>
.input-line
{
margin-bottom: 0.5em;
}
label
{
min-width: 200px;
display: inline-block;
}
</style>
</body>
</html>

25
options.js

@ -0,0 +1,25 @@
const options_fields = ['firstname','lastname','email','birthdate','address','postcode','city','telephone','cardnumber']
function saveOptions(e) {
for (let field of options_fields)
{
browser.storage.local.set({
[field]: document.getElementById(field).value
});
}
e.preventDefault();
}
function restoreOptions() {
for (let field of options_fields)
{
var storageItem = browser.storage.local.get(field);
storageItem.then((res) => {
document.getElementById(field).value = res[field];
});
}
}
document.addEventListener('DOMContentLoaded', restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);
Loading…
Cancel
Save