version 0.2.3

data/options/index.html

@@ -8,6 +8,10 @@
       padding: 10px;
     }
     textarea { width: 100%; }
+    .h {
+      text-decoration: underline;
+      text-decoration-style: dashed;
+    }
   </style>
 </head>
 
@@ -15,7 +19,7 @@
   <table width=100%>
     <tr>
       <td>
-        <label><input type="radio" name="mode" value="blacklist" id="mode-blacklist"> Black-list mode: Apply the custom user-agent string to all tabs except the tabs with the following top-level hostnames (comma-separated list of hostnames)</label>
+        <label><input type="radio" name="mode" value="blacklist" id="mode-blacklist"> <span class="h">Black-list mode</span>: Apply the custom user-agent string to all tabs except the tabs with the following top-level hostnames (comma-separated list of hostnames)</label>
       </td>
     </tr>
     <tr>
@@ -23,7 +27,7 @@
     </tr>
     <tr>
       <td>
-        <label><input type="radio" name="mode" value="whitelist" id="mode-whitelist"> White-list mode: Only apply the custom user-agent string to the tabs with following top-level hostnames</label>
+        <label><input type="radio" name="mode" value="whitelist" id="mode-whitelist"> <span class="h">White-list mode</span>: Only apply the custom user-agent string to the tabs with following top-level hostnames</label>
       </td>
     </tr>
     <tr>
@@ -31,7 +35,7 @@
     </tr>
     <tr>
       <td>
-        <label><input type="radio" name="mode" value="custom" id="mode-custom"> Custom mode: Try to resolve the user-agent string from the bellow JSON object; otherwise either use the default user-agent string or use the one that user is set from the popup.</label> <a href="#" id="sample">Insert</a> a sample JSON object.
+        <label><input type="radio" name="mode" value="custom" id="mode-custom"> <span class="h">Custom mode</span>: Try to resolve the user-agent string from a JSON object; otherwise either use the default user-agent string or use the one that user is set from the popup. Use "*" as the hostname to match all domains. You can randomly select from multiple user-agent strings by providing an array instead of a string.</label> <a href="#" id="sample">Insert</a> a sample JSON object.
       </td>
     </tr>
     <tr>

data/options/index.js

@@ -59,7 +59,9 @@ document.getElementById('sample').addEventListener('click', e => {
 
   document.getElementById('custom').value = JSON.stringify({
     'www.google.com': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36',
-    'www.bing.com': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0'
+    'www.bing.com': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0',
+    'www.example.com': ['random-useragent-1', 'random-user-agent-2'],
+    '*': 'useragent-for-all-hostnames'
   }, null, 2);
 });
 

data/popup/index.css

@@ -69,6 +69,7 @@ select {
   border: none;
   user-select: none;
   outline: none;
+  color: #000;
   background: rgba(255,255,255,.5) url(list.svg) no-repeat center right 4px;
   background-size: 8px;
   font-size: 13px;
@@ -147,6 +148,10 @@ select {
   display: none;
 }
 
+[data-cmd="refresh"] {
+  margin-left: 2px;
+  margin-right: 2px;
+}
 [data-cmd="apply"] {
   color: #fff;
   background-color: #3c923c;
@@ -161,6 +166,7 @@ select {
   border: solid 1px #ec9730;
 }
 
+[data-cmd="options"],
 [data-cmd="refresh"] {
   background-color: #f5f5f5;
 }

data/popup/index.html

@@ -146,7 +146,8 @@
     </div>
     <div hbox>
       <input type="search" id="custom" placeholder="Filter items">
-      <input type="button" value="Refresh Tab" title="Refresh the current page" style="margin-left: 2px;" data-cmd="refresh">
+      <input type="button" value="Refresh Tab" title="Refresh the current page" data-cmd="refresh">
+      <input type="button" value="Options" title="Open options page" style="margin-left: 2px;" data-cmd="options">
     </div>
     <div hbox id="agent" pack="center" align="center">
       User-Agent String:&nbsp;

data/popup/index.js

@@ -182,5 +182,8 @@ document.addEventListener('click', ({target}) => {
         bypassCache: true
       }));
     }
+    else if (cmd === 'options') {
+      chrome.runtime.openOptionsPage();
+    }
   }
 });