version 0.2.0

common.js

@@ -2,12 +2,7 @@
 
 'use strict';
 
-var ua = {
+var ua = {};
-  userAgent: '',
-  appVersion: '',
-  platform: '',
-  vendor: ''
-};
 
 var prefs = {
   ua: '',
@@ -19,15 +14,15 @@ var prefs = {
 
 chrome.storage.local.get(prefs, ps => {
   Object.assign(prefs, ps);
-  update(prefs.mode === 'custom' ? 'Mapped from user\'s JSON object' : prefs.ua);
+  update();
 });
 chrome.storage.onChanged.addListener(ps => {
   Object.keys(ps).forEach(key => prefs[key] = ps[key].newValue);
   if (ps.ua) {
-    update(prefs.ua);
+    update();
   }
   if (ps.mode) {
-    update(ps.mode.newValue === 'custom' ? 'Mapped from user\'s JSON object' : prefs.ua);
+    update();
   }
 });
 
@@ -52,6 +47,7 @@ function hostname(url) {
     return url;
   }
 }
+// returns true, false or an object; true: ignore, false: use from ua object.
 function match(url) {
   if (prefs.mode === 'blacklist') {
     if (prefs.blacklist.length) {
@@ -70,7 +66,22 @@ function match(url) {
   }
   else {
     const h = hostname(url);
-    return prefs.custom[h];
+    const s = prefs.custom[h];
+    if (s) {
+      const o = {};
+      o.userAgent = s;
+      o.appVersion = s
+        .replace(/^Mozilla\//, '')
+        .replace(/^Opera\//, '');
+      const p = new UAParser(s);
+      o.platform = p.getOS().name || '';
+      o.vendor = p.getDevice().vendor || '';
+
+      return o;
+    }
+    else {
+      return ua.userAgent ? false : true;
+    }
   }
 }
 
@@ -84,58 +95,58 @@ var onBeforeSendHeaders = ({tabId, url, requestHeaders, type}) => {
   if (cache[tabId] === true) {
     return;
   }
+  const str = (cache[tabId] || ua).userAgent;
+  if (str) {
     for (let i = 0, name = requestHeaders[0].name; i < requestHeaders.length; i += 1, name = requestHeaders[i].name) {
       if (name === 'User-Agent' || name === 'user-agent') {
-      if (prefs.mode === 'custom') {
+        requestHeaders[i].value = str;
-        if (cache[tabId]) {
-          requestHeaders[i].value = cache[tabId];
-        }
-        else {
-          return;
-        }
-      }
-      else {
-        requestHeaders[i].value = ua.userAgent;
-      }
         return {
           requestHeaders
         };
       }
     }
+  }
 };
 
 var onCommitted = ({frameId, url, tabId}) => {
-  if (frameId === 0 && url && (url.startsWith('http') || url.startsWith('ftp'))) {
+  if (url && (url.startsWith('http') || url.startsWith('ftp')) || url === 'about:blank') {
-    if (cache[tabId]) {
+    if (cache[tabId] === true) {
       return;
     }
+    const o = cache[tabId] || ua;
+    if (o.userAgent) {
       chrome.tabs.executeScript(tabId, {
         runAt: 'document_start',
-      allFrames: true,
+        frameId,
         code: `{
           const script = document.createElement('script');
           script.textContent = \`{
-          navigator.__defineGetter__('userAgent', () => '${ua.userAgent}');
+            navigator.__defineGetter__('userAgent', () => '${o.userAgent}');
-          navigator.__defineGetter__('appVersion', () => '${ua.appVersion}');
+            navigator.__defineGetter__('appVersion', () => '${o.appVersion}');
-          navigator.__defineGetter__('platform', () => '${ua.platform}');
+            navigator.__defineGetter__('platform', () => '${o.platform}');
-          navigator.__defineGetter__('vendor', () => '${ua.vendor}');
+            navigator.__defineGetter__('vendor', () => '${o.vendor}');
           }\`;
           document.documentElement.appendChild(script);
         }`
       }, () => chrome.runtime.lastError);
     }
+  }
 };
 
-function update(str) {
+function update() {
-  ua.userAgent = str;
+  if (prefs.ua || prefs.mode === 'custom') {
-  ua.appVersion = str
+    if (prefs.ua) {
+      ua.userAgent = prefs.ua;
+      ua.appVersion = ua.userAgent
         .replace(/^Mozilla\//, '')
         .replace(/^Opera\//, '');
-  if (str) {
+      const p = new UAParser(prefs.ua);
-    const p = new UAParser(str);
       ua.platform = p.getOS().name || '';
       ua.vendor = p.getDevice().vendor || '';
-
+    }
+    else {
+      ua = {};
+    }
     chrome.webRequest.onBeforeSendHeaders.addListener(onBeforeSendHeaders, {
       'urls' : ['*://*/*']
     }, ['blocking', 'requestHeaders']);
@@ -145,18 +156,20 @@ function update(str) {
     chrome.webRequest.onBeforeSendHeaders.removeListener(onBeforeSendHeaders);
     chrome.webNavigation.onCommitted.removeListener(onCommitted);
   }
+
   chrome.browserAction.setIcon({
     path: {
-      16: 'data/icons/' + (str ? 'active/' : '') + '16.png',
+      16: 'data/icons/' + (prefs.ua ? 'active/' : '') + '16.png',
-      32: 'data/icons/' + (str ? 'active/' : '') + '32.png',
+      32: 'data/icons/' + (prefs.ua ? 'active/' : '') + '32.png',
-      48: 'data/icons/' + (str ? 'active/' : '') + '48.png',
+      48: 'data/icons/' + (prefs.ua ? 'active/' : '') + '48.png',
-      64: 'data/icons/' + (str ? 'active/' : '') + '64.png'
+      64: 'data/icons/' + (prefs.ua ? 'active/' : '') + '64.png'
     }
   });
+  const custom = 'Mapped from user\'s JSON object if found, otherwise uses "' + (prefs.ua || navigator.userAgent) + '"';
   chrome.browserAction.setTitle({
-    title: `UserAgent Switcher (${str ? 'enabled' : 'disabled'})
+    title: `UserAgent Switcher (${prefs.ua ? 'enabled' : 'disabled'})
 
-User-Agent String: ${str || navigator.userAgent}`
+User-Agent String: ${prefs.mode === 'custom' ? custom : prefs.ua || navigator.userAgent}`
   });
 }
 
@@ -194,3 +207,7 @@ chrome.storage.local.get({
     chrome.runtime.getManifest().homepage_url + '?rd=feedback&name=' + name + '&version=' + version
   );
 }
+
+chrome.tabs.create({
+  url: 'data/popup/index.html'
+})

data/inject.js

@@ -0,0 +1,45 @@
+'use strict';
+
+// iframe.contentWindow
+if (
+  window !== top &&
+  location.href === 'about:blank'
+) {
+  try {
+    top.document; // are we on the same frame?
+
+    const script = document.createElement('script');
+    script.textContent = `{
+      const nav = top.navigator;
+
+      navigator.__defineGetter__('userAgent', () => nav.userAgent);
+      navigator.__defineGetter__('appVersion', () => nav.appVersion);
+      navigator.__defineGetter__('platform', () => nav.platform);
+      navigator.__defineGetter__('vendor', () => nav.vendor);
+
+      document.documentElement.dataset.fgdvcre = true;
+    }`;
+    document.documentElement.appendChild(script);
+    // make sure the script is injected
+    if (document.documentElement.dataset.fgdvcre !== 'true') {
+      document.documentElement.dataset.fgdvcre = true;
+      const script = document.createElement('script');
+      Object.assign(script, {
+        textContent: `
+          [...document.querySelectorAll('iframe[sandbox]')]
+            .filter(i => i.contentDocument.documentElement.dataset.fgdvcre === 'true')
+            .forEach(i => {
+              const nav = i.contentWindow.navigator;
+              nav.__defineGetter__('userAgent', () => navigator.userAgent);
+              nav.__defineGetter__('appVersion', () => navigator.appVersion);
+              nav.__defineGetter__('platform', () => navigator.platform);
+              nav.__defineGetter__('vendor', () => navigator.vendor);
+            });
+        `
+      });
+      top.document.documentElement.appendChild(script);
+    }
+    delete document.documentElement.dataset.fgdvcre;
+  }
+  catch (e) {}
+}

data/options/index.html

@@ -3,12 +3,11 @@
 <head>
   <title>My Test Extension Options</title>
   <style>
-    body { padding: 10px; }
+    body {
-    textarea { width: 100%; }
+      min-width: 400px;
-    #custom {
+      padding: 10px;
-      white-space: nowrap;
-      overflow: auto;
     }
+    textarea { width: 100%; }
   </style>
 </head>
 
@@ -16,7 +15,7 @@
   <table width=100%>
     <tr>
       <td>
-        <label><input type="radio" name="mode" value="blacklist" id="mode-blacklist"> Black-list mode: Apply 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"> 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>
       </td>
     </tr>
     <tr>
@@ -24,7 +23,7 @@
     </tr>
     <tr>
       <td>
-        <label><input type="radio" name="mode" value="whitelist" id="mode-whitelist"> White-list mode: Only apply user-agent string to the tabs with following top-level hostnames</label>
+        <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>
       </td>
     </tr>
     <tr>
@@ -32,11 +31,11 @@
     </tr>
     <tr>
       <td>
-        <label><input type="radio" name="mode" value="custom" id="mode-custom"> Custom mode: Only apply user-agent string to the tabs with a matching top-level hostnames.</label> <a href="#" id="sample">Insert</a> a sample.
+        <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.
       </td>
     </tr>
     <tr>
-      <td><textarea id="custom" rows="5"></textarea></td>
+      <td><textarea id="custom" rows="5" wrap="off"></textarea></td>
     </tr>
     <tr>
       <td><label><input type="checkbox" id="faqs"> Open FAQs page on updates</label></td>
@@ -44,6 +43,7 @@
   </table>
   <p>
     <button id="donate">Support Development</button>
+    <button id="reset">Reset</button>
     <button id="save">Save</button>
     <span id="status"></span>
   </p>

data/options/index.js

@@ -54,7 +54,9 @@ function restore() {
 document.addEventListener('DOMContentLoaded', restore);
 document.getElementById('save').addEventListener('click', save);
 
-document.getElementById('sample').addEventListener('click', () => {
+document.getElementById('sample').addEventListener('click', e => {
+  e.preventDefault();
+
   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'
@@ -63,6 +65,19 @@ document.getElementById('sample').addEventListener('click', () => {
 
 document.getElementById('donate').addEventListener('click', () => {
   chrome.tabs.create({
-    url: 'https://www.paypal.me/addondonation/10usd'
+    url: chrome.runtime.getManifest().homepage_url + '?rd=donate'
   });
 });
+
+document.getElementById('reset').addEventListener('click', e => {
+  if (e.detail === 1) {
+    notify('Double-click to reset!');
+  }
+  else {
+    localStorage.clear();
+    chrome.storage.local.clear(() => {
+      chrome.runtime.reload();
+      window.close();
+    });
+  }
+});

data/popup/explore.js

@@ -0,0 +1 @@
+../../../explore.js

data/popup/index.css

@@ -26,7 +26,7 @@ body {
   background-color: #fff;
   font-family: "Helvetica Neue",Helvetica,sans-serif;
   font-size: 13px;
-  width: 700px;
+  width: 600px;
 }
 table {
   width: 100%;
@@ -35,7 +35,6 @@ table {
 fieldset {
   border: solid 1px #ccc;
 }
-select,
 input[type=search],
 input[type=text] {
   width: 100%;
@@ -43,15 +42,15 @@ input[type=text] {
   text-indent: 5px;
   padding-right: 5px;
 }
-select,
 input {
   outline: none;
   background-color: #fff;
   color:  #000;
-  border: solid 1px #ccc;
+  border: solid 1px #e7e7e7;
   box-sizing: border-box;
   height: 24px;
   border-radius: 0;
+  font-size: 11px;
 }
 input[type=button] {
   cursor: pointer;
@@ -64,29 +63,59 @@ input[type=button]:disabled {
   opacity: 0.2;
   cursor: default;
 }
-
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: none;
+  user-select: none;
+  outline: none;
+  background: rgba(255,255,255,.5) url(list.svg) no-repeat center right 4px;
+  background-size: 8px;
+  font-size: 13px;
+  border-radius: 0;
+  padding: 2px 16px 2px 4px;
+}
 #list {
-  margin: 20px 0;
   overflow: auto;
   height: 300px;
-  background-color: rgba(0, 0, 0, 0.05);
+  margin-bottom: 10px;
+  background-color: #fdfafa;
+  background-position: top 120px center;
+  background-repeat: no-repeat;
 }
 #list[data-loading=true] {
-  background: url(loading.gif) top 120px center no-repeat;
+  background-image: url(loading.gif);
   background-size: 64px;
 }
 #list table {
   table-layout: fixed;
 }
+#list th {
+  height: 30px;
+  background-color: #e7e7e7;
+}
 #list tr {
   cursor: pointer;
 }
 #list tr[data-matched=false] {
   opacity: 0.5;
 }
+#list tbody {
+  position: relative;
+}
 #list tbody tr:nth-child(odd) {
   background-color: #fff;
 }
+#list tbody tr:nth-child(even) {
+  background-color: #f5f5f5;
+}
+#list[data-loading=false] tbody:empty:before {
+  content: 'no user-agent string for this query!';
+  display: block;
+  position: absolute;
+  top: 50px;
+  left: 10px;
+}
 #list td:nth-child(1) {
   text-align: center;
 }
@@ -117,3 +146,26 @@ input[type=button]:disabled {
 #info:empty {
   display: none;
 }
+
+[data-cmd="apply"] {
+  color: #fff;
+  background-color: #3c923c;
+  border: solid 1px #327932;
+  margin-right: 2px;
+  margin-left: 2px;
+}
+
+[data-cmd="reset"] {
+  color: #fff;
+  background-color: #eea345;
+  border: solid 1px #ec9730;
+}
+
+[data-cmd="refresh"] {
+  background-color: #f5f5f5;
+}
+
+#explore:not([data-loaded="true"]) {
+  margin-top: -8px;
+  height: 16px;
+}

data/popup/index.html

@@ -5,52 +5,18 @@
     <link rel="stylesheet" href="index.css">
   </head>
   <body>
-    <div hbox id="filter">
+    <div id="list" data-loading=true>
-      <select id="os">
+      <table>
-        <option value="skipped">All (OS)</option>
+        <colgroup>
-        <optgroup label="Populars">
+          <col width="40">
-          <option value="windows">Windows</option>
+          <col width="150">
-          <option value="mac os">Mac OS</option>
+          <col width="100">
-          <option value="linux">Linux</option>
+          <col>
-          <option value="chromium os">Chromium OS</option>
+        </colgroup>
-          <option value="ubuntu">Ubuntu</option>
+        <thead id="filter">
-          <option value="debian">Debian</option>
+          <tr>
-          <option value="android">Android</option>
+            <th></th>
-          <option value="ios">iOS</option>
+            <th>
-        </optgroup>
-        <optgroup label="Others">
-          <option value="amigaos">AmigaOS</option>
-          <option value="openbsd">OpenBSD</option>
-          <option value="beos">BeOS</option>
-          <option value="haiku">Haiku</option>
-          <option value="solaris">Solaris</option>
-          <option value="netbsd">NetBSD</option>
-          <option value="freebsd">FreeBSD</option>
-          <option value="slackware">Slackware</option>
-          <option value="suse">SUSE</option>
-          <option value="gentoo">gentoo</option>
-          <option value="fedora">Fedora</option>
-          <option value="gentoo">Gentoo</option>
-          <option value="mageia">Mageia</option>
-          <option value="centos">CentOS</option>
-          <option value="mint">Mint</option>
-          <option value="dragonfly">DragonFly</option>
-          <option value="kubuntu">Kubuntu</option>
-          <option value="mandriva">Mandriva</option>
-          <option value="zenwalk">Zenwalk</option>
-          <option value="unix">Unix</option>
-          <option value="gnu">GNU</option>
-          <option value="os/2">OS/2</option>
-          <option value="aix">AIX</option>
-          <option value="qnx">QNX</option>
-          <option value="beos">BEOS</option>
-          <option value="risc os">RISC OS</option>
-          <option value="symbian">Symbian</option>
-          <option value="nintendo">Nintendo</option>
-          <option value="opensolaris">OpenSolaris</option>
-          <option value="kubuntu">kubuntu</option>
-        </optgroup>
-      </select>
               <select id="browser">
                 <option value="skipped">All (Browser)</option>
                 <optgroup label="Populars">
@@ -110,27 +76,61 @@
                 </optgroup>
               </select>
 
-      <select id="sort">
+            </th>
-        <option value="true">Browser version (descending)</option>
+            <th>
-        <option value="false">Browser version (ascending)</option>
+              <select id="os">
+                <option value="skipped">All (OS)</option>
+                <optgroup label="Populars">
+                  <option value="windows">Windows</option>
+                  <option value="mac os">Mac OS</option>
+                  <option value="linux">Linux</option>
+                  <option value="chromium os">Chromium OS</option>
+                  <option value="ubuntu">Ubuntu</option>
+                  <option value="debian">Debian</option>
+                  <option value="android">Android</option>
+                  <option value="ios">iOS</option>
+                </optgroup>
+                <optgroup label="Others">
+                  <option value="amigaos">AmigaOS</option>
+                  <option value="openbsd">OpenBSD</option>
+                  <option value="beos">BeOS</option>
+                  <option value="haiku">Haiku</option>
+                  <option value="solaris">Solaris</option>
+                  <option value="netbsd">NetBSD</option>
+                  <option value="freebsd">FreeBSD</option>
+                  <option value="slackware">Slackware</option>
+                  <option value="suse">SUSE</option>
+                  <option value="gentoo">gentoo</option>
+                  <option value="fedora">Fedora</option>
+                  <option value="gentoo">Gentoo</option>
+                  <option value="mageia">Mageia</option>
+                  <option value="centos">CentOS</option>
+                  <option value="mint">Mint</option>
+                  <option value="dragonfly">DragonFly</option>
+                  <option value="kubuntu">Kubuntu</option>
+                  <option value="mandriva">Mandriva</option>
+                  <option value="zenwalk">Zenwalk</option>
+                  <option value="unix">Unix</option>
+                  <option value="gnu">GNU</option>
+                  <option value="os/2">OS/2</option>
+                  <option value="aix">AIX</option>
+                  <option value="qnx">QNX</option>
+                  <option value="beos">BEOS</option>
+                  <option value="risc os">RISC OS</option>
+                  <option value="symbian">Symbian</option>
+                  <option value="nintendo">Nintendo</option>
+                  <option value="opensolaris">OpenSolaris</option>
+                  <option value="kubuntu">kubuntu</option>
+                </optgroup>
               </select>
-
+            </th>
-
+            <th>
-    </div>
+              User-Agent
-    <div id="list" data-loading=true>
+              <select id="sort">
-      <table>
+                <option value="true">descending</option>
-        <colgroup>
+                <option value="false">ascending</option>
-          <col width="40">
+              </select>
-          <col width="100">
+            </th>
-          <col width="100">
-          <col>
-        </colgroup>
-        <thead>
-          <tr>
-            <th></th>
-            <th>Browser</th>
-            <th>OS</th>
-            <th>String</th>
           </tr>
         </thead>
         <template>
@@ -146,17 +146,18 @@
     </div>
     <div hbox>
       <input type="search" id="custom" placeholder="Filter items">
-      <input type="button" value="Update" disabled="true">
+      <input type="button" value="Refresh Tab" title="Refresh the current page" style="margin-left: 2px;" data-cmd="refresh">
-      <input type="button" value="Refresh" title="Refresh the current page" style="margin-left: 2px;" data-cmd="refresh">
     </div>
     <div hbox id="agent" pack="center" align="center">
       User-Agent String:&nbsp;
-      <input id="ua" type="text" name="">
+      <input id="ua" type="text" placeholder="Your preferred user-agent string">
       <span id="info"></span>
       <input type="button" value="Apply" title="Set this string as the browser's User-Agent string" data-cmd="apply">
       <input type="button" value="Reset" title="Reset User-Agent string to the default one" style="margin-left: 2px;" data-cmd="reset">
     </div>
+    <div id="explore"></div>
     <script src="ua-parser.min.js"></script>
     <script src="index.js"></script>
+    <script async src="explore.js"></script>
   </body>
 </html>

data/popup/index.js

@@ -94,7 +94,7 @@ document.addEventListener('change', ({target}) => {
     localStorage.setItem(target.id, target.value);
     update();
   }
-  if (target.closest('#list')) {
+  if (target.type === 'radio') {
     document.getElementById('ua').value = target.closest('tr').querySelector('td:nth-child(4)').textContent;
   }
 });

data/popup/list.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg enable-background="new 0 0 48 48" height="48px" id="Layer_3" version="1.1" viewBox="0 0 48 48" width="48px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon fill="#241F20" points="0,12.438 48,12.438 24,35.562 "/></svg>

manifest.json

@@ -1,7 +1,8 @@
 {
   "manifest_version": 2,
   "name": "User-Agent Switcher",
-  "version": "0.1.4",
+  "short_name": "useragent-switcher",
+  "version": "0.2.0",
 
   "description": "Spoofs User-Agent strings of your browser",
 
@@ -42,10 +43,11 @@
     "page": "data/options/index.html",
     "chrome_style": true
   },
-  "applications": {
+  "content_scripts": [{
-    "gecko": {
+    "all_frames": true,
-      "id": "{a6c4a591-f1b2-4f03-b3ff-767e5bedf4e7}",
+    "run_at": "document_start",
-      "strict_min_version": "52.0"
+    "match_about_blank": true,
-    }
+    "matches": ["*://*/*"],
-  }
+    "js": ["data/inject.js"]
+  }]
 }