Export/ Import golinks (#19)

- Added export and import golinks functionalities - Updated extension layout and icon
hieupham7127 · May 14, 2021 · e432f48 · e432f48
1 parent d4cbc3c
commit e432f48
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 11 deletions.
diff --git a/.gitignore b/.gitignore
@@ -16,3 +16,4 @@
 
 # Dependency directories (remove the comment below to include it)
 # vendor/
+.DS_Store
diff --git a/popup/popup.css b/popup/popup.css
@@ -4,8 +4,7 @@ body {
 
 /* Setting button */
 .btn-setting {
-    font-size: 20px;
-    vertical-align: bottom;
+    font-size: 15px;
     float:right;
     color: lightgray;
     cursor: pointer;
@@ -137,3 +136,12 @@ body {
     background-color: #3bad74;
     color: white;
 }
+
+/* Button upload */
+input[type="file"] {
+    display: none;
+}
+
+.btn-upload {
+    padding: 1px 6px;
+}
diff --git a/popup/popup.html b/popup/popup.html
@@ -17,21 +17,33 @@
         <script type="module" src="popup.js"></script>
     </head>
     <body style="text-align: center;">
-        <div  style="padding: 15px; padding-bottom: 0;">
-            <img width="25" height="25" src="../icons/32.png">
-            <span style="font-size: 1em; font-weight: bold;">Go Links</span>
-            <button id="btn-help" class="btn-setting">
-                <i class="far fa-question-circle"></i>
-            </button>
+        <div class="mt-3 mb-2 mx-3 d-flex justify-content-center">
+            <div>
+                <img width="25" height="25" src="../icons/48x48.png">
+                <span class="ml-1" style="font-size: 1em; font-weight: bold;">Go Links</span>
+            </div>
+
+            <div class="ml-auto">
+                <button id="btn-help" class="btn-setting"><i class="far fa-question-circle"></i></button>
+                <label class="m-0 btn-setting px-2 btn-upload">
+                    <input id="btn-upload" type="file" name="file-import" accept="application/JSON">
+                    <i class="fas fa-upload"></i>
+                </label>
+                <button id="btn-download" class="btn-setting" title="export data"><i class="fas fa-download"></i></button>
+            </div>
+
         </div>
 
-        <hr/>
+
+        <hr class="m-0"/>
 
         <div class="form-inline d-flex justify-content-center" style="margin: 15px 20px; width: 300px; text-align: left;">
             <i class="fas fa-search" style="color: #3bad74" aria-hidden="true"></i>
             <input id="search" type="text" autocomplete="off" class="form-control search-box ml-3" style="width: 85%; padding-left: 0" placeholder="Search"></input>
         </div>
 
+        <ul id="item-list" class="list-group"></ul>
+
         <li id="btn-expand" class="list-group-item list-group-item-action" style="display: flex">
             <div class="icon-wrapper">
                 <i class="fas fa-angle-down plus-icon"></i>
@@ -62,8 +74,6 @@
             <button type="button" class="btn btn-sm button-outline" style="width: 100px; margin-bottom: 15px;" id="save">Save</button>
         </div>
 
-        <ul id="item-list" class="list-group"></ul>
-
         <!-- Autocomplete box template -->
         <template id="autocomplete">
             <li class="list-group-item list-group-item-action" style="display: flex">

diff --git a/popup/popup.js b/popup/popup.js
@@ -9,6 +9,8 @@ const itemList = document.getElementById("item-list")
 const expandSection = document.getElementById("section-expand");
 const expandBtn = document.getElementById("btn-expand");
 const collapseBtn = document.getElementById("btn-collapse");
+const fileInput = document.getElementById("btn-upload");
+const downloadButton = document.getElementById("btn-download");
 
 golinkInput.oninput = async () => {
     const golink = golinkInput.value
@@ -116,3 +118,57 @@ $(collapseBtn).on("click", function() {
     expandBtn.style.display = "flex";
     expandSection.style.display = "none";
 })
+
+downloadButton.onclick = function() {
+    const data = {};
+    try {
+        browser.storage.sync.get(null)
+        .then(items => {
+            const entries = Object.entries(items);
+            entries.forEach(entry => {
+                data[entry[0]] = entry[1].url;
+            });
+            exportGoLinks(data);
+        })
+    } catch (e) {
+        alert("Failed! Error: " + e.toString());
+    }
+};
+
+function exportGoLinks(data) {
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(new Blob([JSON.stringify(data, null, 2)], {
+      type: "application/JSON"
+    }));
+    a.setAttribute("download", "golinks.json");
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+}
+
+fileInput.onchange = () => {
+    const files = fileInput.files;
+    if (files.length > 0) {
+        const curFile = files.item(0);
+        curFile.text().then(async text => {
+            const data = JSON.parse(text);
+            var golink;
+            for (golink in data) {
+                let urlObj = await browser.storage.sync.get(golink);
+                // Save new golinks or overwrite existing golinks
+                if (!urlObj[golink] || (urlObj[golink].url != data[golink])) {
+                    let newUrlObj = {}
+                    newUrlObj[golink] = {
+                        "url": data[golink],
+                        "rules": "Nothing for now"
+                    };
+                    try {
+                        browser.storage.sync.set(newUrlObj)
+                    } catch (e) {
+                        alert("Failed! Error: " + e.toString());
+                    }
+                }
+            }
+        });
+    }
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,3 +16,4 @@

		# Dependency directories (remove the comment below to include it)
		# vendor/
		.DS_Store