v0.0.1

- Move the link device in options page ( Settings )
kiwibrowser · Sep 30, 2020 · 4625b12 · 4625b12
1 parent 70c49b6
commit 4625b12
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 28 deletions.
diff --git a/background.js b/background.js
@@ -205,4 +205,10 @@ async function main() {
   }
 }
 
+//Message listener
+chrome.runtime.onMessage.addListener((request) => {
+  if (request === "showOptions") {//Check the request
+    chrome.runtime.openOptionsPage();//Open the settings page 
+  }
+});
 main();
diff --git a/options.html b/options.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sync - Sttings</title>
+</head>
+<body>
+    <main>
+        <a href="#" id="add_new_device_button"><u>Link new device</u></a>
+        <div id="content"></div>
+    </main>
+</body>
+<script src="options.js"></script>
+</html>
diff --git a/options.js b/options.js
@@ -0,0 +1,26 @@
+
+document.getElementById('add_new_device_button').addEventListener('click', function (e) {
+    var generated_html = '';
+    generated_html += '<h3>To sync a new device enter the same key on all the devices:</h3>Your current key is: ';
+    generated_html += '<div style="width: 200px; padding: 3px; border: 2px dotted; word-break: break-all;"><i>' + localStorage.passphrase + '</i></div>';
+  //  generated_html += '<br /><input type="button" id="action_key" value="Enter a new key" style="font-size: 28px; font-weight: bold;" />';
+    document.getElementById('content').innerHTML = generated_html;
+    alert('You are about to share bookmarks and tabs with other devices');
+    var passphrase = prompt("Copy-paste the same key on all your devices", localStorage.passphrase);
+    if (passphrase == null || !window.atob(passphrase))
+    {
+      alert('Incorrect key');
+      return;
+    }
+    localStorage.passphrase = passphrase;
+    var default_devicename = "Device-" + Math.random();
+    if (typeof localStorage.deviceId != 'undefined')
+      default_devicename = localStorage.deviceId;
+    var deviceid = prompt("Enter device name", default_devicename);
+    if (deviceid == null)
+    {
+      alert('Incorrect device name');
+      return;
+    }
+    localStorage.deviceId = deviceid;
+  });
diff --git a/popup.css b/popup.css
@@ -17,6 +17,7 @@ body {
   width: 100%;
   padding: .5rem;
 }
+
 .search:not(focus) {
   padding: 5px;
   border-radius: 5px; 

diff --git a/popup.html b/popup.html
@@ -4,7 +4,8 @@
 <link href="popup.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
-&nbsp;<input type="text" value="" autofocus id="searchField" tabindex="0" class="search" /> <a href="#" id="add_new_device_button"><u>Link new device</u></a>
+    <span id="settings-icon"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg></span>
+&nbsp;<input type="text" value="" autofocus id="searchField" tabindex="0" class="search" />
 <div id="root"></div>
 <script src="popup.js"></script>
 </body>

diff --git a/popup.js b/popup.js
@@ -17,8 +17,14 @@ console.log('Initializing popup');
 var selected = 0;
 var data = [];
 
-function currently_selected_elem()
-{
+//Event listener for button to open settings page
+let btt = document.querySelector("#settings-icon");
+btt.addEventListener("click", () => {
+    chrome.runtime.sendMessage("showOptions");
+});
+
+
+function currently_selected_elem(){
   return document.querySelector('li.selected');
 }
 
@@ -283,28 +289,4 @@ document.getElementById('searchField').addEventListener('keydown', function (e)
   }
 });
 
-document.getElementById('add_new_device_button').addEventListener('click', function (e) {
-  var generated_html = '';
-  generated_html += '<h3>To sync a new device enter the same key on all the devices:</h3>Your current key is: ';
-  generated_html += '<div style="width: 200px; padding: 3px; border: 2px dotted; word-break: break-all;"><i>' + localStorage.passphrase + '</i></div>';
-//  generated_html += '<br /><input type="button" id="action_key" value="Enter a new key" style="font-size: 28px; font-weight: bold;" />';
-  document.getElementById('root').innerHTML = generated_html;
-  alert('You are about to share bookmarks and tabs with other devices');
-  var passphrase = prompt("Copy-paste the same key on all your devices", localStorage.passphrase);
-  if (passphrase == null || !window.atob(passphrase))
-  {
-    alert('Incorrect key');
-    return;
-  }
-  localStorage.passphrase = passphrase;
-  var default_devicename = "Device-" + Math.random();
-  if (typeof localStorage.deviceId != 'undefined')
-    default_devicename = localStorage.deviceId;
-  var deviceid = prompt("Enter device name", default_devicename);
-  if (deviceid == null)
-  {
-    alert('Incorrect device name');
-    return;
-  }
-  localStorage.deviceId = deviceid;
-});
+