supports sibling hostnames. fixes #93

extension/data/options/index.css

@@ -52,6 +52,7 @@ textarea {
 .mode-2 {
   grid-template-columns: min-content min-content;
 }
+#toggle-sibling-desc,
 #toggle-parser-desc,
 #toggle-protected-desc,
 #toggle-custom-desc,

extension/data/options/index.html

@@ -29,7 +29,7 @@
     <span id="toggle-custom-desc">Description</span>
   </div>
   <p for="toggle-custom-desc" class="note hidden">Try to resolve the user-agent string from a JSON object; otherwise either use the default user-agent string or use the one that the user is set from the popup interface. Use "*" as the hostname to match all domains. You can randomly select from multiple user-agent strings by providing an array instead of a fixed string. If there is a "_" key in your JSON object which refers to an array of hostnames, then the extension only randomly selects the user-agent string once for each hostname inside this list. This is useful if you don't want the random user-agent to change until this browser session is over.</label> Press <a href="#" id="sample">here</a> to insert a sample JSON object.</p>
-  <textarea id="custom" rows="5" wrap="off"></textarea>
+  <textarea id="custom" rows="8" wrap="off"></textarea>
 
   <div class="checked">
     <input type="checkbox" id="cache">
@@ -56,6 +56,13 @@
   <p for="toggle-parser-desc" class="note hidden">A JSON object to bypass the internal user-agent string parsing method. The keys are the actual user-agent strings and the value of each key is an object of the keys that need to be set for the "navigator" object. You can use the "[delete]" keyword if you want a key in the "navigator" object to get deleted. Press <a href="#" id="sample-2">here</a> to insert a sample JSON object.</p>
   <textarea id="parser" rows="5" wrap="off"></textarea>
 
+  <div class="mode-2">
+    <h1>Sibling Hostnames</h1>
+    <span id="toggle-sibling-desc">Description</span>
+  </div>
+  <p for="toggle-sibling-desc" class="note hidden">A JSON array that contains one or more groups of hostnames to have a single user-agent string per group for the "Custom Mode". For all hostnames in one group, the user-agent string calculation only occurs once, and all the other members use the same calculated string. This is useful to make sure a group of connected websites only access to the same user-agent string. Press <a href="#" id="sample-3">here</a> to insert a sample JSON array.</p>
+  <textarea id="siblings" rows="5" wrap="off"></textarea>
+
   <div id="backup">
     <button id="import">Import Settings</button>
     <button id="export">Export Settings</button>

extension/data/options/index.js

@@ -36,10 +36,28 @@ function save() {
   catch (e) {
     window.setTimeout(() => {
       notify('Parser JSON error: ' + e.message, 5000);
-      document.getElementById('parser').value = c;
+      document.getElementById('parser').value = p;
     }, 1000);
   }
 
+  let siblings = {};
+  const s = document.getElementById('siblings').value;
+  try {
+    siblings = JSON.parse(s);
+    siblings = siblings.reduce((p, c, i) => {
+      c.forEach(hostname => p[hostname] = i);
+      return p;
+    }, {});
+  }
+  catch (e) {
+    window.setTimeout(() => {
+      notify('Sibling JSON error: ' + e.message, 5000);
+      document.getElementById('siblings').value = c;
+    }, 1000);
+  }
+  console.log(siblings);
+
+
   chrome.storage.local.set({
     exactMatch: document.getElementById('exactMatch').checked,
     faqs: document.getElementById('faqs').checked,
@@ -49,6 +67,7 @@ function save() {
     whitelist: prepare(document.getElementById('whitelist').value),
     custom,
     parser,
+    siblings,
     mode: document.querySelector('[name="mode"]:checked').value,
     protected: document.getElementById('protected').value.split(/\s*,\s*/).filter(s => s.length > 4)
   }, () => {
@@ -71,6 +90,10 @@ function restore() {
     blacklist: [],
     custom: {},
     parser: {},
+    siblings: {
+      'www.google.com': 0,
+      'www.youtube.com': 0
+    },
     protected: ['google.com/recaptcha', 'gstatic.com/recaptcha']
   }, prefs => {
     document.getElementById('exactMatch').checked = prefs.exactMatch;
@@ -82,6 +105,11 @@ function restore() {
     document.getElementById('whitelist').value = prefs.whitelist.join(', ');
     document.getElementById('custom').value = JSON.stringify(prefs.custom, null, 2);
     document.getElementById('parser').value = JSON.stringify(prefs.parser, null, 2);
+    document.getElementById('siblings').value = JSON.stringify(Object.entries(prefs.siblings).reduce((p, [hostname, index]) => {
+      p[index] = p[index] || [];
+      p[index].push(hostname);
+      return p;
+    }, []), null, 2);
     document.getElementById('protected').value = prefs.protected.join(', ');
   });
 }
@@ -114,6 +142,16 @@ document.getElementById('sample-2').addEventListener('click', e => {
   }, null, 2);
 });
 
+document.getElementById('sample-3').addEventListener('click', e => {
+  e.preventDefault();
+
+  document.getElementById('siblings').value = JSON.stringify([[
+    'www.google.com', 'www.youtube.com', 'www.youtube.be'
+  ], [
+    'www.gmx.com', 'www.mail.com'
+  ]], null, 2);
+});
+
 document.getElementById('donate').addEventListener('click', () => {
   chrome.tabs.create({
     url: chrome.runtime.getManifest().homepage_url + '?rd=donate'
@@ -205,3 +243,6 @@ document.getElementById('toggle-protected-desc').addEventListener('click', () =>
 document.getElementById('toggle-parser-desc').addEventListener('click', () => {
   document.querySelector('[for="toggle-parser-desc"]').classList.toggle('hidden');
 });
+document.getElementById('toggle-sibling-desc').addEventListener('click', () => {
+  document.querySelector('[for="toggle-sibling-desc"]').classList.toggle('hidden');
+});