Import export custom styles

web-extension/_locales/en/messages.json

@@ -62,6 +62,15 @@
     },
     "invalidRegex": {
         "message": "Invalid regular expression"
+    },
+	"invalidCustomStyleJson": {
+		"message": "Invalid custom styles JSON"
+	},
+	"stylesImported": {
+		"message": "Custom styles imported correctly"
+	},
+    "errorOnReadingFile": {
+        "message": "Error on reading file"
     },
     "styleSaved": {
         "message": "Style saved!"
@@ -78,6 +87,12 @@
     "createNewStyle": {
         "message": "Create New Style"
     },
+    "importCustomStyles": {
+        "message": "Import custom Styles"
+    },
+    "exportCustomStyles": {
+        "message": "Export custom Styles"
+    },
     "styleNameLabel": {
         "message": "Name"
     },

web-extension/background.js

@@ -177,7 +177,7 @@ function executeCommand(command) {
 
     isBusy = true
 
-    // 
+    //
     busyResetTimer = setTimeout(() => {
         resetBusy()
     }, 20000)
@@ -264,7 +264,7 @@ function prepareStyles(tab, includeStyle, appliedStyles, callback) {
             callback(appliedStyles)
             return
         }
-    
+
         allMatchingStyles.sort((a, b) => b.length - a.length);
         let selStyle = allMatchingStyles[0];
 
@@ -337,7 +337,7 @@ function resetBusy() {
         clearTimeout(busyResetTimer)
         busyResetTimer = null
     }
-    
+
     chrome.browserAction.setBadgeText({text: ""})
 
     let popups = chrome.extension.getViews({type: "popup"});
@@ -425,5 +425,25 @@ function _execRequest(request, sender, sendResponse) {
     if (request.type === 'done') {
         resetBusy()
     }
+    if (request.type === 'ExportCustomStyles') {
+        chrome.storage.local.get(null, function (data) {
+            chrome.downloads.download({
+                'saveAs': true,
+                'url': URL.createObjectURL(
+                    new Blob([JSON.stringify({styles: data.styles})], {
+                        type: "application/json",
+                    })
+                ),
+                'filename': 'customStyles.json'
+            });
+        });
+
+    }
+    if (request.type === 'ImportCustomStyles') {
+        chrome.storage.local.set(
+			{'styles': request.customStyles.styles},
+			sendResponse
+		);
+    }
     return true;
 }

web-extension/cssEditor.css

@@ -23,11 +23,24 @@
     font-size: 15px;
     font-family: sans-serif;
 }
-#cssEditor-createNewStyle {
+#cssEditor-createNewStyle,
+#cssEditor-exportCustomStyles,
+#cssEditor-importCustomStyles
+{
     padding: 3px;
     cursor: pointer;
     font-size: 15px;
     font-family: sans-serif;
+	margin: 0 3px;
+    border-radius: 5px;
+    border: 1px solid;
+    border-color: #8F8F9D;
+    background-color: #E9E9ED;
+    cursor: pointer;
+    display: inline-block;
+}
+input[type="file"] {
+    display: none;
 }
 .cssEditor-field-label-holder {
     margin-top: 10px;

web-extension/cssEditor.js

@@ -76,6 +76,22 @@ function showEditor() {
     createNewStyleButton.onclick = createNewStyle;
     titleHolder.appendChild(createNewStyleButton);
 
+	var exportCustomStylesButton = document.createElement('button');
+	exportCustomStylesButton.id = 'cssEditor-exportCustomStyles';
+    exportCustomStylesButton.innerText = chrome.i18n.getMessage('exportCustomStyles');
+    exportCustomStylesButton.onclick = exportCustomStyles;
+    titleHolder.appendChild(exportCustomStylesButton);
+
+	var importCustomStylesInput = document.createElement('input');
+	var importCustomStylesButton = document.createElement('label');
+    importCustomStylesButton.id = 'cssEditor-importCustomStyles';
+    importCustomStylesInput.type = 'file';
+    importCustomStylesInput.accept = 'application/json';
+    importCustomStylesButton.innerText = chrome.i18n.getMessage('importCustomStyles');
+    importCustomStylesButton.onchange = importCustomStyles;
+    importCustomStylesButton.appendChild(importCustomStylesInput);
+    titleHolder.appendChild(importCustomStylesButton);
+
     modalList.appendChild(titleHolder);
 
     function createNewStyle() {
@@ -88,6 +104,52 @@ function showEditor() {
         createStyleList();
     }
 
+	function validateCustomStyles(customStyles) {
+		if (!customStyles.styles) {
+			return false;
+		}
+		return customStyles.styles.every((style) => (
+			checkRegex(style.url)
+			&& typeof style.title === "string" && style.title.length
+			&& typeof style.style === "string" && style.style.length
+		));
+	}
+
+	function importCustomStyles(event) {
+        var reader = new FileReader();
+        reader.readAsText(event.target.files[0]);
+        reader.onload = function () {
+            try {
+                var importedStyles = JSON.parse(reader.result);
+            } catch (e) {
+                alert(chrome.i18n.getMessage('invalidCustomStyleJson'));
+				return;
+            }
+			if (validateCustomStyles(importedStyles)) {
+				chrome.runtime.sendMessage(
+					{
+						'type': 'ImportCustomStyles',
+						'customStyles': importedStyles
+					},
+					function () {
+						alert(chrome.i18n.getMessage('stylesImported'));
+						closeModal();
+					}
+				);
+			} else {
+				alert(chrome.i18n.getMessage('invalidCustomStyleJson'));
+			}
+			return;
+        };
+
+        reader.onerror = function () {
+			alert(chrome.i18n.getMessage('errorOnReadingFile'));
+			return;
+        };
+    }
+	function exportCustomStyles() {
+        chrome.runtime.sendMessage({'type': 'ExportCustomStyles'});
+    }
     //////
 
     var editorHolder = document.createElement('div');
@@ -246,7 +308,7 @@ function showEditor() {
     }
 
     function saveStyle() {
-        var isRegexValid = checkRegex();
+        var isRegexValid = checkRegex(document.getElementById('cssEditor-matchUrl').value);
         if (!isRegexValid) {
             alert(chrome.i18n.getMessage('invalidRegex'));
             return;
@@ -270,9 +332,11 @@ function showEditor() {
         alert(chrome.i18n.getMessage('styleSaved'));
     }
 
-    function checkRegex() {
-        var regexContent = document.getElementById('cssEditor-matchUrl').value;
+    function checkRegex(regexContent) {
         var isValid = true;
+		if (typeof regexContent !== "string") {
+			return false;
+		}
         try {
             new RegExp(regexContent);
         } catch(e) {

web-extension/manifest.json

@@ -11,8 +11,8 @@
     },
     "content_scripts": [{
         "matches": ["<all_urls>"],
-        "js": ["./libs/jquery.js", "./libs/jszip.js", "./libs/jszip-utils.js", 
-            "./libs/pure-parser.js", "./libs/cssjson.js", "./libs/filesaver.js", 
+        "js": ["./libs/jquery.js", "./libs/jszip.js", "./libs/jszip-utils.js",
+            "./libs/pure-parser.js", "./libs/cssjson.js", "./libs/filesaver.js",
             "saveEbook.js", "extractHtml.js", "utils.js"]
     }],
     "background": {
@@ -26,6 +26,7 @@
     "permissions": [
         "contextMenus",
         "activeTab",
+        "downloads",
         "storage",
         "unlimitedStorage",
         "notifications",