From 04637705f00e254429301dcb3c50064f86f779f1 Mon Sep 17 00:00:00 2001 From: Florian Sommerfeld Date: Sat, 29 Sep 2018 13:44:25 +0200 Subject: [PATCH 1/5] Add border color for wrong inputs --- ui/js/functions/settings-functions.js | 73 +++++++++++++++++++++------ 1 file changed, 57 insertions(+), 16 deletions(-) diff --git a/ui/js/functions/settings-functions.js b/ui/js/functions/settings-functions.js index e393b21..3b21774 100644 --- a/ui/js/functions/settings-functions.js +++ b/ui/js/functions/settings-functions.js @@ -39,6 +39,25 @@ function encodeImageFileAsURL(element) { +/* Name der Funktion: + * isUrlValid + * + * Beschreibung: + * Validiert eine URL + * + * Parameter: + * url: Die url, welche validiert werden soll + */ +function isUrlValid(url) { + var res = url.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g); + if(res == null) + return false; + else + return true; +} + + + /* * Name der Funktion: * visualizeFavourites @@ -325,23 +344,45 @@ function masterEventHandler(e) { * */ document.getElementById("add-favourite").onclick = function() { - var image = document.getElementById("image"); - - /* Überprüfe, ob der Benutzer kein Bild hochgeladen hat */ - if (image.files.length == 0) { - /* Setze default Bild */ - favouriteImage = "img/noImage.png"; - } else { - /* Hochgeladenes Bild zu Base64 encoden */ - encodeImageFileAsURL(image); - } + let imageElement = document.getElementById("image"); + let titleElement = document.getElementById("name"); + let urlElement = document.getElementById("url"); + + /* Überprüfe, ob die Benutzereingaben korrekt sind und füge dann den favourite hinzu */ + if (isUrlValid(urlElement.value) && titleElement.value.length > 0) { + favouriteName = titleElement.value; + favouriteURL = urlElement.value; + + /* Entferne die border-color die vorher möglicherweise durch falsche Eingaben gesetzt wurde */ + url.style.removeProperty('border-color'); + titleElement.style.removeProperty('border-color'); + + + /* Überprüfe, ob der Benutzer KEIN Bild hochgeladen hat */ + if (image.files.length == 0) { + /* Setze default Bild */ + favouriteImage = "img/noImage.png"; + } else { + /* Hochgeladenes Bild zu Base64 encoden */ //TODO vorher noch Dateityp überprüfen? + encodeImageFileAsURL(image); + } + + /* Funktion aufrufen, die die input Daten zu einem Favourite macht und ihn hinzufügt */ + let tabs1 = browser.storage.local.get("tabs"); //get the JSON object + tabs1.then(addFavourite, onError); //promise - favouriteName = document.getElementById("name").value; - favouriteURL = document.getElementById("url").value; + } else {/* Wenn eine der Angaben nicht korrekt war, überprüfe welche und färbe die Border des Elements ein */ + if (!isUrlValid(urlElement.value)) { + url.style.setProperty('border-color', '#D32F2F'); + } else { + url.style.removeProperty('border-color'); + } + if (titleElement.value.length == 0) { + titleElement.style.setProperty('border-color', '#D32F2F'); + } else { + titleElement.style.removeProperty('border-color'); + } + } - /* Funktion aufrufen, die die input Daten zu einem Favourite macht und ihn hinzufügt */ - let tabs1 = browser.storage.local.get("tabs"); //get the JSON object - tabs1.then(addFavourite, onError); //promise } - /***********************************************************/ From 15faf2dd77b7b60329a3b35fba0f35017da69c29 Mon Sep 17 00:00:00 2001 From: Florian Sommerfeld Date: Sat, 29 Sep 2018 14:30:34 +0200 Subject: [PATCH 2/5] Fix image validation --- ui/js/functions/settings-functions.js | 93 +++++++++++++++++++-------- ui/settings.html | 2 +- 2 files changed, 67 insertions(+), 28 deletions(-) diff --git a/ui/js/functions/settings-functions.js b/ui/js/functions/settings-functions.js index 3b21774..3afec38 100644 --- a/ui/js/functions/settings-functions.js +++ b/ui/js/functions/settings-functions.js @@ -49,11 +49,34 @@ function encodeImageFileAsURL(element) { * url: Die url, welche validiert werden soll */ function isUrlValid(url) { - var res = url.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g); - if(res == null) - return false; - else - return true; + var res = url.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g); + if (res == null) + return false; + else + return true; +} + + + +/* Name der Funktion: + * isImageValid + * + * Beschreibung: + * Validiert die hochgeladenen Datei, welche ein Bild sein sollte -> .png, .jpg, .jpeg + * + * Parameter: + * element: Das Bild (als element), welches validiert werden soll + */ +function isImageValid(element) { + var supportedTypes = ["image/png", "image/jpg", "image/jpeg"]; + + for (var i = 0; i < supportedTypes.length; i++) { + if (supportedTypes[i] == element.files[0].type) { + return true; + } + } + + return false; } @@ -275,7 +298,7 @@ function masterEventHandler(e) { let inputImg = document.createElement("input"); inputImg.type = "file"; inputImg.name = "favouriteImage"; - inputImg.accept = "image/*"; + inputImg.accept = ".png, .jpg, .jpeg"; aElement.replaceChild(inputImg, aElement.childNodes[2]); //Das img Element ist immer das 3 child von a im DOM let inputName = document.createElement("input"); @@ -322,8 +345,16 @@ function masterEventHandler(e) { }, onError); //promise } else { /* Wenn ein neues Bild beim Editieren hochgeladen wurde */ - /* Hochgeladenes Bild zu Base64 encoden */ - encodeImageFileAsURL(aElement.childNodes[2]); + + /* Überprüfen, ob das hochgeladene Bild valid ist */ + if (isImageValid(aElement.childNodes[2])) { + /* Hochgeladenes Bild zu Base64 encoden */ + encodeImageFileAsURL(aElement.childNodes[2]); + } else { + /* Setze default Bild */ + favouriteImage = "img/noImage.png"; + } + } /* -> changeFavourite: Ändere die Werte, speicher den Array und refreshe den DOM */ @@ -344,34 +375,42 @@ function masterEventHandler(e) { * */ document.getElementById("add-favourite").onclick = function() { - let imageElement = document.getElementById("image"); - let titleElement = document.getElementById("name"); - let urlElement = document.getElementById("url"); + let imageElement = document.getElementById("image"); + let titleElement = document.getElementById("name"); + let urlElement = document.getElementById("url"); - /* Überprüfe, ob die Benutzereingaben korrekt sind und füge dann den favourite hinzu */ - if (isUrlValid(urlElement.value) && titleElement.value.length > 0) { - favouriteName = titleElement.value; - favouriteURL = urlElement.value; + /* Überprüfe, ob die Benutzereingaben korrekt sind und füge dann den favourite hinzu */ + if (isUrlValid(urlElement.value) && titleElement.value.length > 0) { + favouriteName = titleElement.value; + favouriteURL = urlElement.value; - /* Entferne die border-color die vorher möglicherweise durch falsche Eingaben gesetzt wurde */ - url.style.removeProperty('border-color'); - titleElement.style.removeProperty('border-color'); + /* Entferne die border-color die vorher möglicherweise durch falsche Eingaben gesetzt wurde */ + url.style.removeProperty('border-color'); + titleElement.style.removeProperty('border-color'); - /* Überprüfe, ob der Benutzer KEIN Bild hochgeladen hat */ - if (image.files.length == 0) { + /* Überprüfe, ob der Benutzer KEIN Bild hochgeladen hat */ + if (imageElement.files.length == 0) { + /* Setze default Bild */ + favouriteImage = "img/noImage.png"; + } else { + + //Überprüfe, ob das Bild valid ist + if (isImageValid(imageElement)) { + /* Hochgeladenes Bild zu Base64 encoden */ + encodeImageFileAsURL(imageElement); + } else { /* Setze default Bild */ favouriteImage = "img/noImage.png"; - } else { - /* Hochgeladenes Bild zu Base64 encoden */ //TODO vorher noch Dateityp überprüfen? - encodeImageFileAsURL(image); } - /* Funktion aufrufen, die die input Daten zu einem Favourite macht und ihn hinzufügt */ - let tabs1 = browser.storage.local.get("tabs"); //get the JSON object - tabs1.then(addFavourite, onError); //promise + } + + /* Funktion aufrufen, die die input Daten zu einem Favourite macht und ihn hinzufügt */ + let tabs1 = browser.storage.local.get("tabs"); //get the JSON object + tabs1.then(addFavourite, onError); //promise - } else {/* Wenn eine der Angaben nicht korrekt war, überprüfe welche und färbe die Border des Elements ein */ + } else { /* Wenn eine der Angaben nicht korrekt war, überprüfe welche und färbe die Border des Elements ein */ if (!isUrlValid(urlElement.value)) { url.style.setProperty('border-color', '#D32F2F'); } else { diff --git a/ui/settings.html b/ui/settings.html index 23004d2..5d0d9cb 100644 --- a/ui/settings.html +++ b/ui/settings.html @@ -60,7 +60,7 @@
- +
From 791f837d0f1735870f4b25d4a1d07ec15128b0c8 Mon Sep 17 00:00:00 2001 From: Florian Sommerfeld Date: Sat, 29 Sep 2018 15:41:06 +0200 Subject: [PATCH 3/5] Update README with new info --- README.md | 42 +++++++++++++++++++++++++++++------------- 1 file changed, 29 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 3875d0a..1d57d92 100644 --- a/README.md +++ b/README.md @@ -1,51 +1,67 @@ -# Favourites +# Favourites [![Mozilla Add-on](https://img.shields.io/badge/Version-1.2.1-green.svg)](https://github.com/flosommerfeld/Favourites/releases/tag/v1.2.1) Favourites is a Mozilla Firefox WebExtension which can be used as an alternative to the common Firefox bookmarks. Favourites adds an icon to your browsers toolbar from which you can access all of your saved pages. The user can manage his favourite pages inside the WebExtensions settings page. -[![Mozilla Add-on](https://img.shields.io/badge/Version-1.2.0-green.svg)](https://github.com/flosommerfeld/Favourites/releases/tag/v1.2.0) + ![picture alt](https://i.imgur.com/5cmaXY5.png "Demo screenshot") -![picture alt](https://i.imgur.com/9t5fsag.gif "Context menu demo") -![picture alt](https://i.imgur.com/fIgy4mk.png "Settings demo") +
+Click here to view more demo screenshots +
+#### Settings page + +![picture alt](https://i.imgur.com/fIgy4mk.png "Settings page") + +#### Context menu feature + +![picture alt](https://i.imgur.com/9t5fsag.gif "Context menu feature") + +
+ + +## Getting Started +To install the WebExtension please click the big "Add to Firefox" button below which takes you to [addons.mozilla.org](http://addons.mozilla.org). Alternatively you can also install it manually by downloading the installables from the projects [releases page](https://github.com/flosommerfeld/Favourites/releases). If you want to install the extension manually, you have to drag&drop the installable (.xpi file) into your browser window and click the 'add' button. + +After installing you can click on the icon in the toolbar, then click the cogwheel to open settings and finally setup your favourite websites by typing in the details and clicking the add button. Note that new websites can also be added via `Rightclick` -> `Add website to favourites`. + +[![Add to Firefox](https://i.imgur.com/t68JfGQ.png)](https://addons.mozilla.org/en-US/firefox/addon/favourites/) ## Core Technical Concepts Favourites uses the [WebExtension Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) which enables the WebExtension to locally save all of the users favourite websites. The WebExtension only uses a [popup page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Popups) and an [options page](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface/Options_pages), no [background scripts](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_pages) or [content scripts](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts). The popup page is used to show the user his favourite websites and the options page is used to manage these websites. -The project has two folders in the root directory: icons (where all the icons are saved) and ui (where all files are located which allow user interaction and from where the extension accesses the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) to store websites). Another important file which is located in the root directory is the [manifest.json](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json). Like in any other WebExtension it stores metadata about the extension such as its name, version and permissions. The file also gives Favourites the permission to use the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) in order to use a popup in the toolbar and a options page for extension preferences. +The project has two folders in the root directory: icons (where all the icons are saved) and ui (where all files are located which allow user interaction and from where the extension accesses the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) to store websites). Another important file which is located in the root directory is the [manifest.json](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json). Like in any other WebExtension it stores metadata about the extension such as its name, version and permissions. The file also gives Favourites the permission to use the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) in order to use a popup in the toolbar and a options page for extension preferences. Since version [1.2.0](https://github.com/flosommerfeld/Favourites/releases/tag/v1.2.0) Favourites has a [background script](https://github.com/flosommerfeld/Favourites/blob/master/background-script.js) which was added in order to add new websites via the context menu. The script is always running in the background and waits for the user to open the context menu and to click the "Add website [..]" button. If the button is clicked the background script gets information about the active tab (via the [activeTab](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions#activeTab_permission) permission) and accesses the [Storage API](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage) to save the new website. Visualized project structure: -![picture alt](https://i.imgur.com/tML1eDV.png "Project structure") +![picture alt](https://i.imgur.com/DBqPu1a.png "Project structure") For additional information on Mozilla Firefox WebExtensions please visit [developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension). -## Getting Started -To install the WebExtension please visit [addons.mozilla.org](http://addons.mozilla.org) and click the "add to Firefox" button. Alternatively you can also install it manually by downloading the installables from the projects [releases page](https://github.com/flosommerfeld/Favourites/releases). If you want to install the extension manually, you have to drag&drop the installable (.xpi file) into your browser window and click the 'add' button. - -After installing you can click on the icon in the toolbar, then click the cogwheel to open settings and finally setup your favourite websites by typing in the details and clicking the add button. ## Contributing #### Contributor Guidelines: TBA #### Code Style/Requirements: TBA #### Format for commit messages: TBA + ## TODO #### Next steps: -* See the projects [development board](https://github.com/flosommerfeld/Favourites/projects/1). +* See the [development board](https://github.com/flosommerfeld/Favourites/projects/1). #### Features planned: * Loading images for favourites from online resources etc. * Sorting the websites via the options page. -* Validation for website details (image, name, url). + #### Known bugs: -* See the [issues board](https://github.com/flosommerfeld/Favourites/issues) +* See [issues board](https://github.com/flosommerfeld/Favourites/issues) ## Contact Email address: [flosommerfeld@pm.me](mailto:flosommerfeld@pm.me) + ## License The contents of this repository are covered under the [GNU General Public License v2.0](LICENSE). From e3ca3986ea38d8b33f90bf29014ff414a338ea44 Mon Sep 17 00:00:00 2001 From: Florian Sommerfeld Date: Sat, 29 Sep 2018 15:43:36 +0200 Subject: [PATCH 4/5] Update version to 1.2.1 --- manifest.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/manifest.json b/manifest.json index 1b13a6d..a403dce 100644 --- a/manifest.json +++ b/manifest.json @@ -2,10 +2,10 @@ "manifest_version": 2, "name": "Favourites", - "version": "1.2.0", + "version": "1.2.1", "permissions": ["storage", "contextMenus", "activeTab"], - "description": "Simple alternative to Firefox-bookmarks.", + "description": "Simple alternative to Firefox's bookmarks.", "homepage_url": "https://flosommerfeld.github.io", "author": "flosommerfeld", From 811f39f9a9f474b4808ec57cd6c53372ca7070d5 Mon Sep 17 00:00:00 2001 From: Florian Sommerfeld Date: Sat, 29 Sep 2018 18:07:52 +0200 Subject: [PATCH 5/5] Translate every comment to English --- background-script.js | 44 ++-- ui/css/settings.css | 8 +- ui/css/style.css | 19 +- ui/js/functions/popup-functions.js | 47 +++-- ui/js/functions/redirect-functions.js | 32 +-- ui/js/functions/settings-functions.js | 276 ++++++++++++++------------ ui/js/popup.js | 6 +- ui/js/redirect.js | 5 +- ui/js/settings.js | 6 +- ui/popup.html | 14 +- ui/settings.html | 16 +- 11 files changed, 257 insertions(+), 216 deletions(-) diff --git a/background-script.js b/background-script.js index aa15f57..5dc54e8 100644 --- a/background-script.js +++ b/background-script.js @@ -1,9 +1,9 @@ /* - * Name der Funktion: + * Name of the function: * onError * - * Beschreibung: - * Gibt Fehler aus, wenn bei einem 'Versprechen'/'Promise' ein Fehler auftritt + * Description: + * Promise - Logs errors in case something goes wrong * */ function onError(error) { //log errors @@ -12,60 +12,66 @@ function onError(error) { //log errors -/* -Called when the item has been created, or when creation failed due to an error. -We'll just log success/failure here. -*/ +/* Name of the function: + * onCreated + * + * Description: + * Is called when the context menu item has been created, or when creation failed due to an error. + * I'll just log success/failure here. + */ function onCreated() { if (browser.runtime.lastError) { - console.log(`Error: ${browser.runtime.lastError}`); + console.log("Error: ${browser.runtime.lastError}"); } else { console.log("Item created successfully"); } } -/* Erstelle 'contextMenu' item/button */ +/* Create 'contextMenu' item/button */ browser.contextMenus.create({ id: "add-to-favourites", title: "Add website to favourites", contexts: ["all"] -}, onCreated); +}, onCreated);//promise -/* Eventhandler für die buttons aus dem 'contextMenu' */ +/* Eventhandler for item/button from the 'contextMenu' */ browser.contextMenus.onClicked.addListener(function(info, tab) { switch (info.menuItemId) { case "add-to-favourites": - /* Dank der 'activeTab' Permission gibt es hier mehr Infos über 'tab' */ + /* Thanks to the 'activeTab' permission i can get more information about 'tab' (see parameter) */ - /* Lade die Tabs aus dem lokalen Speicher */ + /* Load the JSON object array in which all the favourites are saved */ let tabs = browser.storage.local.get("tabs"); tabs.then(function(item) { + /* Give the new favourite the data of this active tab */ let image = tab.favIconUrl; let url = tab.url let title = tab.title; - //Sorge dafür, dass wenn das faviconbild nicht exisitert für standardbild - //TODO Allg. Funktion fürs Hinzufügen von fvourites, die alles überprüft + + //TODO General function for adding new favourites which checks everything + + /* If the website/active tab doesn't have a favicon then set the default image */ if (image == null) { image = "img/noImage.png"; } - /* Füge die aktuelle Seite zu den Favourite hinzu */ + /* Add the website of the active tab to the JSON object array */ item.tabs.push({ "image": image, "url": url, "title": title }); - /* Speicher alle Änderungen, die dem Item zugefügt wurden */ - browser.storage.local.set({ //JSON object initialization + /* Save alls changes that were made to the JSON object array */ + browser.storage.local.set({ tabs: item.tabs }); - }, onError); + }, onError);//promise break; diff --git a/ui/css/settings.css b/ui/css/settings.css index 1e6a4fa..5289fe7 100644 --- a/ui/css/settings.css +++ b/ui/css/settings.css @@ -18,7 +18,7 @@ } -/* Style für die Buttons mit welchen man Tabs erstellen kann usw. */ +/* Style for the buttons with which favourties can be edited */ .button{ display:block; background-color: #f5f5f5; @@ -55,11 +55,11 @@ } .button-edit{ - /* Braucht nichts da nur beim delete button ein Rand sein soll */ + /* Styles were removed */ } .button-change{ - /* Braucht nichts da nur beim delete button ein Rand sein soll */ + /* Styles were removed */ } @@ -67,7 +67,7 @@ -/*Basiert auf https://www.w3schools.com/howto/howto_css_responsive_form.asp */ +/* Based on https://www.w3schools.com/howto/howto_css_responsive_form.asp */ * { box-sizing: border-box; } diff --git a/ui/css/style.css b/ui/css/style.css index ed19da3..592a7dc 100644 --- a/ui/css/style.css +++ b/ui/css/style.css @@ -17,7 +17,7 @@ html { .container{ align-items: center; justify-content: column; - background-color: #673ab7;/* Das ist die Farbe über den abgerundeten Ecken vom ersten Favourite */ + background-color: #673ab7;/* Allows us to create the rounded corners which have this color */ text-decoration: none !important; } @@ -25,8 +25,7 @@ html { .container>div, .container>a { font-size: 13px; - - height: 45px; /* Höhe der einzelnen Tabs */ + height: 45px; /* Height of each favourite/entry */ color: black; background-color: white; padding: 2px; @@ -41,7 +40,7 @@ html { -/* Gilt nur für alle Elemente, die innerhalb des tab-containers sind -> alle Tabs */ +/* These rules apply for all elements which are inside the tab-container */ .container>a, .container>a:active, .container>a:focus { @@ -53,7 +52,7 @@ html { -/* Gilt nur für Bilder, die innerhalb von einem Element sind */ +/* Only applies for images which are inside an element */ a>img{ height:30px; width: 30px; @@ -61,7 +60,7 @@ a>img{ border-radius: 1000px; } -/* Verstecke dir url von jedem Favourite */ +/* Hide url of each favourite */ a>.url{ display: none; } @@ -71,7 +70,7 @@ a>.url{ margin-left: 6px; } -/* Entferne die "komischen" Farben vom Zahnrad-Icon usw. */ +/* Remove weird colors from the cogwheel */ .text>a{ color: white; outline: none; @@ -80,7 +79,7 @@ a>.url{ -/* Navigationsleiste */ +/* Navigation bar */ .navbar { font-size: 16px; background-color: #673ab7; @@ -110,7 +109,7 @@ a{ -/* Der erste tab soll einen abgerundeten Rahmen haben */ +/* First child of tab-container should have rounded corners */ #tab-container > *:first-child{ border-radius: 4px 4px 0px 0px; } @@ -127,7 +126,7 @@ a{ } -/* Style für den container der Nachricht die sagt, dass keine Favoriten gefunden werden konnten */ +/* Style for the container which tells the user that no favourites are saved */ #no-favourites-message{ display: none; /* Hide on default -> visualizeFavourites() shows message if no favourites are saved */ background-color: white; diff --git a/ui/js/functions/popup-functions.js b/ui/js/functions/popup-functions.js index c6ff649..92010cf 100644 --- a/ui/js/functions/popup-functions.js +++ b/ui/js/functions/popup-functions.js @@ -1,77 +1,80 @@ /* - * Name der Funktion: + * Name of the function: * onError * - * Beschreibung: - * Gibt Fehler aus, wenn bei einem 'Versprechen'/'Promise' ein Fehler auftritt + * Description: + * Promise - Logs errors in case something goes wrong * */ -function onError(error) { //log errors +function onError(error) { console.log("Error: ${error}"); } /* - * Name der Funktion: + * Name of the function: * visualizeFavourites * - * Beschreibung: - * Wird ausgeführt, wenn bei einem 'Versprechen'/'Promise' KEIN Fehler auftritt + * Description: + * Promise - Visualizes the favourites by creating certain elements and adding them to the DOM + * + * Parameters: + * - item: The current favourites list from the storage - received via promise * */ function visualizeFavourites(item) { - var tabs = item.tabs; + var tabs = item.tabs;//JSON object array where all the favourites are saved var tabContainer = document.getElementById("tab-container"); tabContainer.innerHTML = ""; - /* Überprüfe, ob der JSON Objektarray, der die Favourites beinhaltet scon initalisiert ist */ + /* Check if the JSON object array was initialized */ if (tabs == undefined || tabs == null || tabs.length == 0) { - browser.storage.local.set({ //JSON-Objektinitialisierung - Wird gemacht wenn vorher noch nicht initialisiert + browser.storage.local.set({ //Initialize if it is currently uninitialized tabs: [] }); /* Show message: Add favourites via settings page... */ - document.getElementById("no-favourites-message").style.display = "flex"; /* vorher block */ + document.getElementById("no-favourites-message").style.display = "flex"; /* change from block to flex */ } - /* Iterriere jeden Tab und füge ihn zur HTML-Seite hinzu */ + /* Go through each favourite and add it to the DOM */ for (i in tabs) { - /* Sicherstellen, dass die url eine url ist und, dass das Bild auch wirklich ein Bild ist */ + /* Assure that the url is really a url and that the image is really an image */ if (tabs[i].url.startsWith("http") && (tabs[i].image.startsWith("data:image/jpeg;base64,") || tabs[i].image.startsWith("data:image/png;base64,") || tabs[i].image.startsWith("http") || tabs[i].image == "img/noImage.png")) { - /* Aufbau eines Tabs: + /* Example strucure of a favourite/tab in HTML: * - * - * - *
Aulis
+ * + * + *
Firefox
* * */ - /* Erstelle Element und weise dem Element die url zu */ + /* Create element and set the url */ let a = document.createElement("a"); a.href = tabs[i].url; - /* Erstelle Element und weise dem Element das Bild zu */ + /* Create element and set the image */ let img = document.createElement("img"); img.src = tabs[i].image; - /* Erstelle div Element und setze die Klasse des Elements */ + /* Create
element and set the classes&innerHTML */ let div = document.createElement("div"); div.className = "text"; div.innerHTML = tabs[i].title; - /* Hänge das und
Element an das Element */ + /* Append the and
element to the element */ a.appendChild(img); a.appendChild(div); - /* Hänge den fertigen Tab an den Tab-Container */ + /* Append the favourite/tab/ element to the tabContainer */ tabContainer.appendChild(a); } } diff --git a/ui/js/functions/redirect-functions.js b/ui/js/functions/redirect-functions.js index ec3b228..4b3fcae 100644 --- a/ui/js/functions/redirect-functions.js +++ b/ui/js/functions/redirect-functions.js @@ -1,41 +1,41 @@ /* - * Name der Funktion: + * Name of the function: * onError * - * Beschreibung: - * Gibt Fehler aus, wenn bei einem 'Versprechen'/'Promise' ein Fehler auftritt + * Description: + * Logs errors in case something goes wrong * */ function onError(error) { - console.log(`Error: ${error}`); + console.log("Error: ${error}"); } /* - * Name der Funktion: + * Name of the function: * onOpened * - * Beschreibung: - * Promise/Versprechen - Wird ausgeführt wenn die Options page geöffnet wurde + * Description: + * Promise - Logs that the options page was opened * */ function onOpened() { - console.log(`Options page opened`); + console.log("Options page opened"); } /* - * Name der Funktion: + * Name of the function: * onGotTab * - * Beschreibung: - * Promise/Versprechen - Wird ausgeführt wenn die aktuelle Tab ID erfragt wird und soll dann den Tab schließen + * Description: + * Promise - Gets the current tab ID and closes it * */ function onGotTab(tabInfo) { console.log(tabInfo); - /* Schließe den Tab */ + /* Close the tab */ var removing = browser.tabs.remove(tabInfo.id); removing.then(onClosed, onError); @@ -43,13 +43,13 @@ function onGotTab(tabInfo) { /* - * Name der Funktion: + * Name of the function: * onClosed * - * Beschreibung: - * Promise/Versprechen - Wird ausgeführt wenn der Tab geschlossen wurde + * Description: + * Promise - Logs that the tab was closed * */ function onClosed() { - console.log(`Tab geschlossen`); + console.log("Tab successfully closed"); } diff --git a/ui/js/functions/settings-functions.js b/ui/js/functions/settings-functions.js index 3afec38..32150db 100644 --- a/ui/js/functions/settings-functions.js +++ b/ui/js/functions/settings-functions.js @@ -1,52 +1,59 @@ -/********************* Globale Variablen *********************/ -var favouriteImage; /* Das Bild von dem Favourite */ -var favouriteName; /* Der Name von dem Favourite */ -var favouriteURL; /* Die URL von dem Favourite */ +/********************* Global variables *********************/ +var favouriteImage; /* image of the favourite */ +var favouriteName; /* Name/title of the favourite */ +var favouriteURL; /* URL of the favourite */ -var arrayIndex; /* Der Index vom JSON Objektarray in welchem sich der Favourite befindet */ +var arrayIndex; /* Index of favourite inside the JSON object array */ /*************************************************************/ -/* Name der Funktion: +/* Name of the function: * onError * - * Beschreibung: - * Gibt Fehler aus, wenn bei einem 'Versprechen'/'Promise' ein Fehler auftritt + * Description: + * Promise - Logs errors in case something goes wrong * */ -function onError(error) { //log errors +function onError(error) { console.log("Error: ${error}"); } -/* Name der Funktion: +/* Name of the function: * encodeImageFileAsURL * - * Beschreibung: - * Konvertiert ein Bild zu einem Base64 String, sodass man diesen in lokalen Speicher sichern kann + * Description: + * Encode an image to an Base64 string which makes it possible to save images via the Storage API + * + * Parameterss: + * - element: image which will be encoded, as an element * */ function encodeImageFileAsURL(element) { var file = element.files[0]; var reader = new FileReader(); reader.onloadend = function() { - favouriteImage = reader.result; + favouriteImage = reader.result;//set the global variable } reader.readAsDataURL(file); } -/* Name der Funktion: +/* Name of the function: * isUrlValid * - * Beschreibung: - * Validiert eine URL + * Description: + * Validates an URL + * + * Parameters: + * - url: URL which should be validated + * + * Return type: + * Boolean -> (true/flase) * - * Parameter: - * url: Die url, welche validiert werden soll */ function isUrlValid(url) { var res = url.match(/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g); @@ -58,14 +65,18 @@ function isUrlValid(url) { -/* Name der Funktion: +/* Name of the function: * isImageValid * - * Beschreibung: - * Validiert die hochgeladenen Datei, welche ein Bild sein sollte -> .png, .jpg, .jpeg + * Description: + * Checks if the image type is one of the following: .png, .jpg, .jpeg + * + * Parameters: + * - element: image which will be checked, as an element + * + * Return type: + * Boolean -> (true/flase) * - * Parameter: - * element: Das Bild (als element), welches validiert werden soll */ function isImageValid(element) { var supportedTypes = ["image/png", "image/jpg", "image/jpeg"]; @@ -82,84 +93,93 @@ function isImageValid(element) { /* - * Name der Funktion: + * Name of the function: * visualizeFavourites * - * Beschreibung: - * Wird ausgeführt, wenn bei einem 'Versprechen'/'Promise' KEIN Fehler auftritt + * Description: + * Promise - Visualizes the favourites by creating certain elements and adding them to the DOM. This function also + * adds buttons next to each favourite so that favourites can be edited/deleted + * + * Parameters: + * - item: The current favourites list from the storage - received via promise * */ function visualizeFavourites(item) { - var tabs = item.tabs; + var tabs = item.tabs;//JSON object array where all the favourites are saved var tabContainer = document.getElementById("tab-container"); tabContainer.innerHTML = ""; - /* Überprüfe, ob der JSON Objektarray, der die Favourites beinhaltet scon initalisiert ist */ + /* Check if the JSON object array was initialized */ if (tabs == undefined || tabs == null || tabs.length == 0) { - browser.storage.local.set({ //JSON-Objektinitialisierung - Wird gemacht wenn vorher noch nicht initialisiert + browser.storage.local.set({ //Initialize if it is currently uninitialized tabs: [] }); } - /* Iterriere jeden Tab und füge ihn zur HTML-Seite hinzu */ + /* Go through each favourite and add it to the DOM */ for (i in tabs) { - /* Sicherstellen, dass die url eine url ist und, dass das Bild auch wirklich ein Bild ist */ + /* Assure that the url is really a url and that the image is really an image */ if (tabs[i].url.startsWith("http") && (tabs[i].image.startsWith("data:image/jpeg;base64,") || tabs[i].image.startsWith("data:image/png;base64,") || tabs[i].image.startsWith("http") || tabs[i].image == "img/noImage.png")) { - /* Aufbau eines Tabs in der Settings-Seite: + /* Example strucure of a favourite/tab in the settings page in HTML: * * - *
- *
- * - *
Office 365
+ *
+ *
+ * + *
Firefox
+ *
http://firefox.com
* * */ - /* Erstelle Element und setze die ID auf den Index der for-Loop */ + /* Create element und set the id of the tab to the index of the loop */ let a = document.createElement("a"); a.id = "" + i; - /* Erstelle div Element und setze die Klasse des Elements */ + /* Create
element and set the classes&innerHTML + * Also add an event listener for click handling + */ let divBtnDelete = document.createElement("div"); divBtnDelete.className = "button button-delete"; divBtnDelete.innerHTML = ""; divBtnDelete.addEventListener('click', masterEventHandler, false); - /* Erstelle div Element und setze die Klasse des Elements */ + /* Create
element and set the classes&innerHTML + * Also add an event listener for click handling + */ let divBtnEdit = document.createElement("div"); divBtnEdit.className = "button button-edit"; divBtnEdit.innerHTML = ""; divBtnEdit.addEventListener('click', masterEventHandler, false); - /* Erstelle Element und weise dem Element das Bild zu */ + /* Create element and set the image */ let img = document.createElement("img"); img.src = tabs[i].image; - /* Erstelle div Element und setze die Klasse des Elements */ + /* Create
element and set the classes&innerHTML */ let divText = document.createElement("div"); divText.className = "text"; divText.innerHTML = tabs[i].title; - /* Speichere die url im Tab damit sie später verarbeitet werden kann */ - let divURL = document.createElement("div"); + /* Create
element and set the classes&innerHTML */ + let divURL = document.createElement("div");//This element will be hidden divURL.className = "url"; - divURL.innerHTML = tabs[i].url; + divURL.innerHTML = tabs[i].url;//The url is saved here - /* Hänge das und alle
Element an das Element */ + /* Append all the
and elements to the element */ a.appendChild(divBtnDelete); a.appendChild(divBtnEdit); a.appendChild(img); a.appendChild(divText); a.appendChild(divURL); - /* Hänge den fertigen Tab an den Tab-Container */ + /* Append the favourite/tab/ element to the tabContainer */ tabContainer.appendChild(a); } } @@ -168,27 +188,27 @@ function visualizeFavourites(item) { /* - * Name der Funktion: + * Name of the function: * removeFavourite * - * Beschreibung: - * Löscht einen Favourite aus dem JSON Object Array mit Hilfe der vorher - * definierten globalen Variable 'arrayIndex', die die Stelle angibt + * Description: + * Promise - Deletes a favourite from the JSON object array with the help of the global variables + * 'arrayIndex' which knows the index of the favourite * - * Parameter: - * item: Das JSON Objekt in welchem sich der zu löschende Index befindet + * Parameters: + * - item: The JSON object array in which the favourite is saved which will get deleted * */ function removeFavourite(item) { - /* Lösche an der Stelle 'arrayIndex' : https://www.w3schools.com/jsref/jsref_splice.asp*/ + /* Delete content at 'arrayIndex' : https://www.w3schools.com/jsref/jsref_splice.asp*/ item.tabs.splice(arrayIndex, 1); - /* Speicher alle Änderungen, die dem Item zugefügt wurden */ - browser.storage.local.set({ //JSON object initialization + /* Save all changes that were made to the JSON object array */ + browser.storage.local.set({ tabs: item.tabs }); - /* Aktualisiere die Änderungen im DOM */ + /* Visualize the favourites again (the delete favourite should now be gone) */ let tabs = browser.storage.local.get("tabs"); tabs.then(visualizeFavourites, onError); } @@ -196,15 +216,15 @@ function removeFavourite(item) { /* - * Name der Funktion: + * Name of the function: * changeFavourite * - * Beschreibung: - * Ändert die Werte im Array und speichert ihn - * Danach wird visualizeFavourites() aufgerufen, damit der DOM refreshed wird + * Description: + * Changes a favourite with the help of the global variables and saves the changes + * After the changes were saved, the favourites get visualized again -> visualizeFavourites() * - * Parameter: - * item: Das JSON Objekt bzw. der zu ändernde Array + * Parameters: + * - item: The JSON object array in which the favourite is which will be changed * */ function changeFavourite(item) { @@ -212,7 +232,8 @@ function changeFavourite(item) { item.tabs[arrayIndex].image = favouriteImage; item.tabs[arrayIndex].title = favouriteName; - browser.storage.local.set({ //Speichern + /* Save all changes that were made to the JSON object array */ + browser.storage.local.set({ tabs: item.tabs }); @@ -223,14 +244,14 @@ function changeFavourite(item) { /* - * Name der Funktion: + * Name of the function: * addFavourite * - * Beschreibung: - * Fügt ein vorher definierten Favoriten der Favoritenliste hinzu + * Description: + * Adds a favourite with the help of the global variables to the JSON object array and saves it * - * Parameter: - * item: Das JSON Objekt in welchem der vorher definierte Favorit gespeichert werden soll + * Parameters: + * - item: The JSON object array in which the favourite will be saved * */ function addFavourite(item) { @@ -240,40 +261,41 @@ function addFavourite(item) { "title": favouriteName }); - /* Speicher alle Änderungen, die dem Item zugefügt wurden */ - browser.storage.local.set({ //JSON object initialization + /* Save all changes that were made to the JSON object array */ + browser.storage.local.set({ tabs: item.tabs }); - let tabs = browser.storage.local.get("tabs"); //get the JSON object - tabs.then(visualizeFavourites, onError); //promise + let tabs = browser.storage.local.get("tabs"); + tabs.then(visualizeFavourites, onError); } -/********************* Event Handler Funktionen *********************/ +/********************* Event handler functions *********************/ -/* Name der Funktion: +/* Name of the function: * masterEventHandler * - * Beschreibung: - * Ist ein Eventhandler für alle Buttons eines 'Favourites' und findet heraus welche ID bzw. welchen Index der Favourite hat + * Description: + * Event handler for the buttons of a favourite. (This functions can also find out at which index a specific favourite is inside + * the JSON object array * - * - * <------------------------------------------------ Diese ID möchte ich herausbekommen (ID = e.target.parentElement.parentElement.id) - *
<---------------------- Dieser Button wird geklickt (div = e.target.parentElement) + * Little explanation of what's what: + * <------------------------------------------------ I want to find out this ID (ID = e.target.parentElement.parentElement.id) + *
<---------------------- This button gets clicked (div = e.target.parentElement) * *
- *
<------------------------ Oder dieser Button wird geklickt (div = e.target.parentElement) + *
<------------------------ OR this button gets clicked (div = e.target.parentElement) * *
- * - *
Beispiel
- *
http://beispiel.de
+ * + *
Firefox
+ *
http://firefox.com
* * */ @@ -283,83 +305,92 @@ function masterEventHandler(e) { let buttonElement = e.target.parentElement; let aElement = e.target.parentElement.parentElement; - /* Finde durch den Klassenname heraus, ob der Edit oder ein anderer Button der den masterEventHandler benutzt geklickt wurde --->(Remove Button)*/ + /* Find out if an edit button or else was clicked by looking at the class name */ if (buttonElement.className.indexOf("edit") !== -1) { /* Nachden der Change Button geklickt wurde soll man die Werte ändern können -> Erstelle Elemente (bzw. input Elemente) und ersetze die alten Elemente */ - + /* After the edit button was clicked it will update the favourites innerHTML so that there are input fields. + * These input fields get created and added to the DOM here + */ let applyButton = document.createElement("div"); applyButton.className = "button button-change" applyButton.innerHTML = "" applyButton.addEventListener('click', masterEventHandler, false); - aElement.replaceChild(applyButton, aElement.childNodes[1]); + aElement.replaceChild(applyButton, aElement.childNodes[1]);//The element which gets replaced always has the index 1 inside element let inputImg = document.createElement("input"); inputImg.type = "file"; inputImg.name = "favouriteImage"; inputImg.accept = ".png, .jpg, .jpeg"; - aElement.replaceChild(inputImg, aElement.childNodes[2]); //Das img Element ist immer das 3 child von a im DOM + aElement.replaceChild(inputImg, aElement.childNodes[2]);//The element which gets replaced always has the index 2 inside element let inputName = document.createElement("input"); inputName.type = "text"; inputName.name = "favouriteName"; inputName.value = aElement.childNodes[3].innerHTML; - aElement.replaceChild(inputName, aElement.childNodes[3]); //Das div Element ist immer das 4 child von a im DOM + aElement.replaceChild(inputName, aElement.childNodes[3]);//The element which gets replaced always has the index 3 inside element let inputURL = document.createElement("input"); inputURL.type = "text"; inputURL.name = "favouriteURL"; inputURL.value = aElement.childNodes[4].innerHTML; - aElement.replaceChild(inputURL, aElement.childNodes[4]); //Das div Element ist immer das 5 child von a im DOM + aElement.replaceChild(inputURL, aElement.childNodes[4]);//The element which gets replaced always has the index 4 inside element + + + /* The user will now type in any changes and should be clicking the apply button. + * Once the apply button is clicked, this masterEventHandler function gets called again and handles the click of the apply button + */ - } else if (buttonElement.className.indexOf("delete") !== -1) { - /* Funktion aufrufen, die den Favourite löscht */ - let tabs1 = browser.storage.local.get("tabs"); //get the JSON object - tabs1.then(removeFavourite, onError); //promise - } else { //Change button wurde geklcikt! TODO auf switch case wechseln?! default: fehler konnte nicht klick zuordnen + } else if (buttonElement.className.indexOf("delete") !== -1) {//If the delete button was clicked - /* Bekomme die URL und den Namen aus den Input Elementen, welche in a sind */ + /* Call function which deletes the favourite */ + let tabs1 = browser.storage.local.get("tabs"); + tabs1.then(removeFavourite, onError); + + } else { //Apply button was clicked //TODO improve code.. + + /* Get the URL and the title/name from the input fields (childs of )*/ favouriteURL = aElement.childNodes[4].value favouriteName = aElement.childNodes[3].value; - /* Wenn kein neues Bild beim Editieren hochgeladen wird */ + /* If no new image was uploaded after editing */ if (aElement.childNodes[2].files.length == 0) { - let tabs1 = browser.storage.local.get("tabs"); //get the JSON object + let tabs1 = browser.storage.local.get("tabs"); //get the JSON object array tabs1.then(function(item) { - //TODO if abfrage entfernen... /* Überprüfe, ob bereits ein Bild vor dem editieren existierte (wenn nicht dann nimm standardbild) */ + /* Check if there was an image before editing - if not then set the default image */ if (item.tabs[arrayIndex].image.startsWith("data:image") == false) { favouriteImage = "img/noImage.png"; } - /* Wenn das Bild über url geholt wird */ + /* If there was an image before editing (but this image is from a website) save this image again */ if (item.tabs[arrayIndex].image.startsWith("http") == true || item.tabs[arrayIndex].image.startsWith("data:image") == true) { - favouriteImage = item.tabs[arrayIndex].image + ""; //TODO herausfinden weshalb hier favouriteImage geändert werden muss + favouriteImage = item.tabs[arrayIndex].image + ""; //TODO check if all of this is really necessary - is there another way? } }, onError); //promise - } else { /* Wenn ein neues Bild beim Editieren hochgeladen wurde */ + } else { /* If a new image was uploaded after editing */ - /* Überprüfen, ob das hochgeladene Bild valid ist */ + /* Check if the image is a .png/.jpeg/.jpg */ if (isImageValid(aElement.childNodes[2])) { - /* Hochgeladenes Bild zu Base64 encoden */ + /* Encode image to Base64 string */ encodeImageFileAsURL(aElement.childNodes[2]); } else { - /* Setze default Bild */ + /* Set default image */ favouriteImage = "img/noImage.png"; } } - /* -> changeFavourite: Ändere die Werte, speicher den Array und refreshe den DOM */ - let tabs1 = browser.storage.local.get("tabs"); //get the JSON object - tabs1.then(changeFavourite, onError); //promise + /* -> changeFavourite: Save changes, and reload favourites to DOM */ + let tabs1 = browser.storage.local.get("tabs"); + tabs1.then(changeFavourite, onError); } } @@ -369,48 +400,49 @@ function masterEventHandler(e) { /* * Eventhandler - onclick * - * Beschreibung: - * Erfasst wann der Benutzer den 'Add' Button klickt und verarbeitet die vom Nutzer eingegebenen Daten. - * Die Daten werden dann in der Funktion addFavorite weiterbenutzt + * Description: + * Event handler for the button which adds new favourites. This function gets the data from the input fields and + * creates a new favourite with this data (the favourite is actually create inside addFavourite()) * */ document.getElementById("add-favourite").onclick = function() { + /* Get input fields (image, title/name, url/address) */ let imageElement = document.getElementById("image"); let titleElement = document.getElementById("name"); let urlElement = document.getElementById("url"); - /* Überprüfe, ob die Benutzereingaben korrekt sind und füge dann den favourite hinzu */ + /* Check if the URL is valid and if the user gave the favourite a title */ if (isUrlValid(urlElement.value) && titleElement.value.length > 0) { favouriteName = titleElement.value; favouriteURL = urlElement.value; - /* Entferne die border-color die vorher möglicherweise durch falsche Eingaben gesetzt wurde */ + /* Remove the border-color which might have been added if the previous inputs were not valid */ url.style.removeProperty('border-color'); titleElement.style.removeProperty('border-color'); - /* Überprüfe, ob der Benutzer KEIN Bild hochgeladen hat */ + /* If the user DID NOT upload an image */ if (imageElement.files.length == 0) { - /* Setze default Bild */ + /* Set default image */ favouriteImage = "img/noImage.png"; - } else { + } else { //if the user actually DID upload an image - //Überprüfe, ob das Bild valid ist + /* Check if the image is a .png/.jpeg/.jpg */ if (isImageValid(imageElement)) { - /* Hochgeladenes Bild zu Base64 encoden */ + /* Encode image to Base64 string */ encodeImageFileAsURL(imageElement); } else { - /* Setze default Bild */ + /* Set default image */ favouriteImage = "img/noImage.png"; } } - /* Funktion aufrufen, die die input Daten zu einem Favourite macht und ihn hinzufügt */ - let tabs1 = browser.storage.local.get("tabs"); //get the JSON object - tabs1.then(addFavourite, onError); //promise + /* Call function which adds the new favourite via global variables */ + let tabs1 = browser.storage.local.get("tabs"); + tabs1.then(addFavourite, onError); - } else { /* Wenn eine der Angaben nicht korrekt war, überprüfe welche und färbe die Border des Elements ein */ + } else { /*If one of the inputs were not valid, then find out which one is not valid and highlight it by changing the border-color to red */ if (!isUrlValid(urlElement.value)) { url.style.setProperty('border-color', '#D32F2F'); } else { diff --git a/ui/js/popup.js b/ui/js/popup.js index 2078a7b..ace2d71 100644 --- a/ui/js/popup.js +++ b/ui/js/popup.js @@ -1,3 +1,3 @@ -/* Lade die Tabs aus dem lokalen Speicher und füge sie dem DOM hinzu (-> Funktion visualizeFavourites) */ -let tabs = browser.storage.local.get("tabs"); -tabs.then(visualizeFavourites, onError); +/* Load the tabs via the Storage API and add them to the DOM -> function: visualizeFavourites() */ +let tabs = browser.storage.local.get("tabs");//get the JSON object array +tabs.then(visualizeFavourites, onError);//promise diff --git a/ui/js/redirect.js b/ui/js/redirect.js index 080b317..4664635 100644 --- a/ui/js/redirect.js +++ b/ui/js/redirect.js @@ -1,7 +1,8 @@ -/* Öffne die Optionsseite vom Addon */ +/* Open the options/settings page of the WebExtension */ var opening = browser.runtime.openOptionsPage(); opening.then(onOpened, onError); -/* Bekomme die ID vom Tab, in welchem dieses Script läuft sodass der Tab danach geschlossen werden kann */ +/* Get the ID of the tab in which redirect.html and thus this script were loaded +in order to close the tab after opening the options page */ var gettingCurrent = browser.tabs.getCurrent(); gettingCurrent.then(onGotTab, onError); diff --git a/ui/js/settings.js b/ui/js/settings.js index 6236878..ace2d71 100644 --- a/ui/js/settings.js +++ b/ui/js/settings.js @@ -1,3 +1,3 @@ -/* Lade die Tabs aus dem lokalen Speicher und füge sie dem DOM hinzu (-> Funktion visualizeFavourites) */ -let tabs = browser.storage.local.get("tabs"); //get the JSON object -tabs.then(visualizeFavourites, onError); //promise +/* Load the tabs via the Storage API and add them to the DOM -> function: visualizeFavourites() */ +let tabs = browser.storage.local.get("tabs");//get the JSON object array +tabs.then(visualizeFavourites, onError);//promise diff --git a/ui/popup.html b/ui/popup.html index 20f45e9..0af76f9 100644 --- a/ui/popup.html +++ b/ui/popup.html @@ -6,32 +6,32 @@ - + - + - +
Favourites
- +
- +
- +
@@ -43,7 +43,7 @@
- + diff --git a/ui/settings.html b/ui/settings.html index 5d0d9cb..7c09af8 100644 --- a/ui/settings.html +++ b/ui/settings.html @@ -6,16 +6,16 @@ - + - + - + @@ -24,19 +24,19 @@ - +
Settings
- +
- +
- +