balta2ar · bjohas · Jul 4, 2023 · Aug 13, 2023
diff --git a/brotab/extension/background.js b/brotab/extension/background.js
@@ -192,7 +192,12 @@ class ChromeTabs extends BrowserTabs {
   }
 
   getBrowserName() {
-      return "chrome/chromium";
+      chrome.storage.sync.get({
+          instanceIdentifier: '[none]'
+        }, function(items) {
+          instanceIdentifier = items.instanceIdentifier;
+      });
+      return "chrome/chromium\t"+instanceIdentifier;
   }
 }
 
@@ -201,6 +206,7 @@ console.log("Detecting browser");
 var port = undefined;
 var tabs = undefined;
 var browserTabs = undefined;
+var instanceIdentifier = undefined;
 const NATIVE_APP_NAME = 'brotab_mediator';
 reconnect();
 

diff --git a/brotab/extension/chrome/background.js b/brotab/extension/chrome/background.js
@@ -192,7 +192,12 @@ class ChromeTabs extends BrowserTabs {
   }
 
   getBrowserName() {
-      return "chrome/chromium";
+      chrome.storage.sync.get({
+          instanceIdentifier: '[none]'
+        }, function(items) {
+          instanceIdentifier = items.instanceIdentifier;
+      });
+      return "chrome/chromium\t"+instanceIdentifier;
   }
 }
 
@@ -201,6 +206,7 @@ console.log("Detecting browser");
 var port = undefined;
 var tabs = undefined;
 var browserTabs = undefined;
+var instanceIdentifier = undefined;
 const NATIVE_APP_NAME = 'brotab_mediator';
 reconnect();
 

diff --git a/brotab/extension/chrome/manifest.json b/brotab/extension/chrome/manifest.json
@@ -8,9 +8,10 @@
   "background": {
     "scripts": ["background.js"]
   },
+  "options_page": "options.html",
   "icons": {
       "128": "brotab-icon-128x128.png"
   },
-  "permissions": ["nativeMessaging", "tabs", "activeTab", "<all_urls>"],
+  "permissions": ["nativeMessaging", "tabs", "activeTab", "<all_urls>", "storage"],
   "short_name": "BroTab"
 }
diff --git a/brotab/extension/chrome/options.css b/brotab/extension/chrome/options.css
@@ -0,0 +1,78 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 90vh;
+  }
+
+  .container {
+    width: 300px;
+    background-color: white;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+  }
+
+  h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    text-align: center;
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+  }
+
+  label {
+    font-weight: bold;
+    margin-bottom: 5px;
+  }
+
+  input[type="text"] {
+    width: 100%;
+    max-width: calc(100% - 16px);
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  button[type="submit"] {
+    padding: 8px 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    margin-top: 10px;
+    align-self: flex-end;
+  }
+
+  button[type="submit"]:hover {
+    background-color: #0056b3;
+  }
+
+  #status {
+    margin-bottom: 10px;
+    padding: 8px;
+    max-width: calc(100% - 16px);
+    border-radius: 5px;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  #status-text {
+    text-align: left;
+  }
+
+  #close-button {
+    text-align: right;
+  }
+
diff --git a/brotab/extension/chrome/options.html b/brotab/extension/chrome/options.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>BroTab Options</title>
+  <link rel="stylesheet" type="text/css" href="options.css">
+</head>
+<body>
+  <div class="container">
+    <h1>BroTab options</h1>
+    <form id="optionsForm">
+      <div id="status"></div>
+      <label for="instanceInput">Instance Identifier:</label>
+      <input type="text" id="instanceInput">
+      <button type="submit" id="save">Save</button>
+    </form>
+  </div>
+
+  <script src="options.js"></script>
+</body>
+</html>
diff --git a/brotab/extension/chrome/options.js b/brotab/extension/chrome/options.js
@@ -0,0 +1,65 @@
+// Displays a status message with the provided text and appropriate background color
+function showStatusMessage(message, isError) {
+  var status = document.getElementById('status');
+  status.textContent = message;
+
+  status.style.backgroundColor = isError ? '#FFC0C0' : '#C0FFC0'; // Light red or light green
+  status.style.padding = '10px';
+
+  var closeButton = document.createElement('button');
+  closeButton.innerHTML = '\u2715'; // ✕ symbol (Unicode)
+  closeButton.style.marginLeft = '10px';
+  closeButton.style.border = 'none';
+  closeButton.style.backgroundColor = 'transparent';
+  closeButton.style.cursor = 'pointer';
+
+  closeButton.addEventListener('click', function() {
+    status.textContent = '';
+    status.style.backgroundColor = 'transparent';
+  });
+
+  status.appendChild(closeButton);
+}
+
+
+
+// Saves options to chrome.storage
+function save_options() {
+  var newIdentifier = document.getElementById('instanceInput').value.trim();
+
+  // Check for valid characters (alphanumeric + "_" + ".")
+  var validCharacters = /^[a-zA-Z0-9_.]+$/;
+  if (!validCharacters.test(newIdentifier)) {
+    showStatusMessage('Invalid characters. Only alphanumeric, "_" and "." are allowed.', true);
+    return;
+  }
+
+  // Check maximum length
+  if (newIdentifier.length > 128) {
+    showStatusMessage('Value is too long. Maximum length is 128 characters.', true);
+    return;
+  }
+
+  chrome.storage.sync.set({
+    instanceIdentifier: newIdentifier
+  }, function() {
+    showStatusMessage('Options saved.', false);
+  });
+}
+
+// Restores text input using the preferences
+// stored in chrome.storage.
+function restore_options() {
+  // Use default value '[none]'.
+  chrome.storage.sync.get({
+    instanceIdentifier: '[none]'
+  }, function(items) {
+    document.getElementById('instanceInput').value = items.instanceIdentifier;
+  });
+}
+
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('optionsForm').addEventListener('submit', function(e) {
+  e.preventDefault();
+  save_options();
+});
diff --git a/brotab/extension/firefox/background.js b/brotab/extension/firefox/background.js
@@ -192,7 +192,12 @@ class ChromeTabs extends BrowserTabs {
   }
 
   getBrowserName() {
-      return "chrome/chromium";
+      chrome.storage.sync.get({
+          instanceIdentifier: '[none]'
+        }, function(items) {
+          instanceIdentifier = items.instanceIdentifier;
+      });
+      return "chrome/chromium\t"+instanceIdentifier;
   }
 }
 
@@ -201,6 +206,7 @@ console.log("Detecting browser");
 var port = undefined;
 var tabs = undefined;
 var browserTabs = undefined;
+var instanceIdentifier = undefined;
 const NATIVE_APP_NAME = 'brotab_mediator';
 reconnect();
 

diff --git a/brotab/extension/firefox/manifest.json b/brotab/extension/firefox/manifest.json
@@ -6,10 +6,11 @@
   "background": {
     "scripts": ["background.js"]
   },
+  "options_page": "options.html",
   "icons": {
       "128": "brotab-icon-128x128.png"
   },
-  "permissions": ["nativeMessaging", "tabs", "activeTab", "<all_urls>"],
+  "permissions": ["nativeMessaging", "tabs", "activeTab", "<all_urls>", "storage"],
   "applications": {
     "gecko": {
       "id": "brotab_mediator@example.org",

diff --git a/brotab/extension/firefox/options.html b/brotab/extension/firefox/options.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+<head><title>My Test Extension Options</title></head>
+<body>
+
+<select id="instanceIdentifier">
+ <option value="[none]">[none]</option>
+  <option value="chrome1">chrome1</option>
+ <option value="chrome2">chrome2</option>
+</select>
+
+<div id="status"></div>
+<button id="save">Save</button>
+
+<script src="options.js"></script>
+</body>
+</html>
diff --git a/brotab/extension/firefox/options.js b/brotab/extension/firefox/options.js
@@ -0,0 +1,28 @@
+// Saves options to chrome.storage
+function save_options() {
+  var instanceIdentifier = document.getElementById('instanceIdentifier').value;
+  chrome.storage.sync.set({
+    instanceIdentifier: instanceIdentifier
+  }, function() {
+    // Update status to let user know options were saved.
+    var status = document.getElementById('status');
+    status.textContent = 'Options saved.';
+    setTimeout(function() {
+      status.textContent = '';
+    }, 750);
+  });
+}
+
+// Restores select box using the preferences
+// stored in chrome.storage.
+function restore_options() {
+  // Use default value color = 'red' and likesColor = true.
+  chrome.storage.sync.get({
+    instanceIdentifier: '[none]'
+  }, function(items) {
+    document.getElementById('instanceIdentifier').value = items.instanceIdentifier;
+  });
+}
+document.addEventListener('DOMContentLoaded', restore_options);
+document.getElementById('save').addEventListener('click',
+    save_options);