version 0.2.0

2018-04-10 12:20:58 +04:30 · 2018-04-10 12:20:58 +04:30 · 1213fff7b3
commit 1213fff7b3
parent 6cdf075737
11 changed files with 339 additions and 205 deletions
--- a/common.js
+++ b/common.js
@ -2,12 +2,7 @@

 'use strict';

-var ua = {
-  userAgent: '',
-  appVersion: '',
-  platform: '',
-  vendor: ''
-};
+var ua = {};

 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;
  }
-  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') {
-        if (cache[tabId]) {
-          requestHeaders[i].value = cache[tabId];
-        }
-        else {
-          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') {
+        requestHeaders[i].value = str;
+        return {
+          requestHeaders
+        };
      }
-      else {
-        requestHeaders[i].value = ua.userAgent;
-      }
-      return {
-        requestHeaders
-      };
    }
  }
 };

 var onCommitted = ({frameId, url, tabId}) => {
-  if (frameId === 0 && url && (url.startsWith('http') || url.startsWith('ftp'))) {
-    if (cache[tabId]) {
+  if (url && (url.startsWith('http') || url.startsWith('ftp')) || url === 'about:blank') {
+    if (cache[tabId] === true) {
      return;
    }
-    chrome.tabs.executeScript(tabId, {
-      runAt: 'document_start',
-      allFrames: true,
-      code: `{
-        const script = document.createElement('script');
-        script.textContent = \`{
-          navigator.__defineGetter__('userAgent', () => '${ua.userAgent}');
-          navigator.__defineGetter__('appVersion', () => '${ua.appVersion}');
-          navigator.__defineGetter__('platform', () => '${ua.platform}');
-          navigator.__defineGetter__('vendor', () => '${ua.vendor}');
-        }\`;
-        document.documentElement.appendChild(script);
-      }`
-    }, () => chrome.runtime.lastError);
+    const o = cache[tabId] || ua;
+    if (o.userAgent) {
+      chrome.tabs.executeScript(tabId, {
+        runAt: 'document_start',
+        frameId,
+        code: `{
+          const script = document.createElement('script');
+          script.textContent = \`{
+            navigator.__defineGetter__('userAgent', () => '${o.userAgent}');
+            navigator.__defineGetter__('appVersion', () => '${o.appVersion}');
+            navigator.__defineGetter__('platform', () => '${o.platform}');
+            navigator.__defineGetter__('vendor', () => '${o.vendor}');
+          }\`;
+          document.documentElement.appendChild(script);
+        }`
+      }, () => chrome.runtime.lastError);
+    }
  }
 };

-function update(str) {
-  ua.userAgent = str;
-  ua.appVersion = str
-    .replace(/^Mozilla\//, '')
-    .replace(/^Opera\//, '');
-  if (str) {
-    const p = new UAParser(str);
-    ua.platform = p.getOS().name || '';
-    ua.vendor = p.getDevice().vendor || '';
-
+function update() {
+  if (prefs.ua || prefs.mode === 'custom') {
+    if (prefs.ua) {
+      ua.userAgent = prefs.ua;
+      ua.appVersion = ua.userAgent
+        .replace(/^Mozilla\//, '')
+        .replace(/^Opera\//, '');
+      const p = new UAParser(prefs.ua);
+      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',
-      32: 'data/icons/' + (str ? 'active/' : '') + '32.png',
-      48: 'data/icons/' + (str ? 'active/' : '') + '48.png',
-      64: 'data/icons/' + (str ? 'active/' : '') + '64.png'
+      16: 'data/icons/' + (prefs.ua ? 'active/' : '') + '16.png',
+      32: 'data/icons/' + (prefs.ua ? 'active/' : '') + '32.png',
+      48: 'data/icons/' + (prefs.ua ? 'active/' : '') + '48.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'
+})
--- a/data/inject.js
+++ b/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) {}
+}
--- a/data/options/index.html
+++ b/data/options/index.html
@ -3,12 +3,11 @@
 <head>
  <title>My Test Extension Options</title>
  <style>
-    body { padding: 10px; }
-    textarea { width: 100%; }
-    #custom {
-      white-space: nowrap;
-      overflow: auto;
+    body {
+      min-width: 400px;
+      padding: 10px;
    }
+    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>
--- a/data/options/index.js
+++ b/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();
+    });
+  }
+});
--- a/data/popup/explore.js
+++ b/data/popup/explore.js
@ -0,0 +1 @@
+../../../explore.js
--- a/data/popup/index.css
+++ b/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;
+}
--- a/data/popup/index.html
+++ b/data/popup/index.html
@ -5,132 +5,132 @@
    <link rel="stylesheet" href="index.css">
  </head>
  <body>
-    <div hbox id="filter">
-      <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>
-      <select id="browser">
-        <option value="skipped">All (Browser)</option>
-        <optgroup label="Populars">
-          <option value="ie">Internet Explorer</option>
-          <option value="safari">Safari</option>
-          <option value="chrome">Chrome</option>
-          <option value="firefox">Firefox</option>
-          <option value="opera">Opera</option>
-          <option value="edge">Edge</option>
-        </optgroup>
-        <optgroup label="Others">
-          <option value="webkit">WebKit</option>
-          <option value="avant">Avant</option>
-          <option value="maxthon">Maxthon</option>
-          <option value="arora">Arora</option>
-          <option value="mozilla">Mozilla</option>
-          <option value="epiphany">Epiphany</option>
-          <option value="camino">Camino</option>
-          <option value="chimera">Chimera</option>
-          <option value="chromium">Chromium</option>
-          <option value="comodo dragon">Dragon</option>
-          <option value="conkeror">conkeror</option>
-          <option value="conkeror">Conkeror</option>
-          <option value="dillo">Dillo</option>
-          <option value="links">Links</option>
-          <option value="firebird">Firebird</option>
-          <option value="swiftfox">Swiftfox</option>
-          <option value="netscape">Netscape</option>
-          <option value="flock">Flock</option>
-          <option value="icab">iCab</option>
-          <option value="iceape">Iceape</option>
-          <option value="icecat">icecat</option>
-          <option value="icecat">IceCat</option>
-          <option value="iceweasel">IceWeasel</option>
-          <option value="iron">Iron</option>
-          <option value="k-meleon">Meleon</option>
-          <option value="konqueror">Konqueror</option>
-          <option value="lunascape">Lunascape</option>
-          <option value="lynx">Lynx</option>
-          <option value="maxthon">MAXTHON</option>
-          <option value="midori">midori</option>
-          <option value="midori">Midori</option>
-          <option value="khtml">KHTML</option>
-          <option value="mosaic">Mosaic</option>
-          <option value="netsurf">NetSurf</option>
-          <option value="omniweb">OmniWeb</option>
-          <option value="opera tablet">Tablet</option>
-          <option value="opera mini">Mini</option>
-          <option value="phoenix">Phoenix</option>
-          <option value="rockmelt">RockMelt</option>
-          <option value="mobile safari">Safari</option>
-          <option value="android browser">Browser</option>
-          <option value="seamonkey">SeaMonkey</option>
-          <option value="slim">Slim</option>
-          <option value="webkit">Webkit</option>
-          <option value="w3m">w3m</option>
-        </optgroup>
-      </select>
-
-      <select id="sort">
-        <option value="true">Browser version (descending)</option>
-        <option value="false">Browser version (ascending)</option>
-      </select>
-
-
-    </div>
    <div id="list" data-loading=true>
      <table>
        <colgroup>
          <col width="40">
-          <col width="100">
+          <col width="150">
          <col width="100">
          <col>
        </colgroup>
-        <thead>
+        <thead id="filter">
          <tr>
            <th></th>
-            <th>Browser</th>
-            <th>OS</th>
-            <th>String</th>
+            <th>
+              <select id="browser">
+                <option value="skipped">All (Browser)</option>
+                <optgroup label="Populars">
+                  <option value="ie">Internet Explorer</option>
+                  <option value="safari">Safari</option>
+                  <option value="chrome">Chrome</option>
+                  <option value="firefox">Firefox</option>
+                  <option value="opera">Opera</option>
+                  <option value="edge">Edge</option>
+                </optgroup>
+                <optgroup label="Others">
+                  <option value="webkit">WebKit</option>
+                  <option value="avant">Avant</option>
+                  <option value="maxthon">Maxthon</option>
+                  <option value="arora">Arora</option>
+                  <option value="mozilla">Mozilla</option>
+                  <option value="epiphany">Epiphany</option>
+                  <option value="camino">Camino</option>
+                  <option value="chimera">Chimera</option>
+                  <option value="chromium">Chromium</option>
+                  <option value="comodo dragon">Dragon</option>
+                  <option value="conkeror">conkeror</option>
+                  <option value="conkeror">Conkeror</option>
+                  <option value="dillo">Dillo</option>
+                  <option value="links">Links</option>
+                  <option value="firebird">Firebird</option>
+                  <option value="swiftfox">Swiftfox</option>
+                  <option value="netscape">Netscape</option>
+                  <option value="flock">Flock</option>
+                  <option value="icab">iCab</option>
+                  <option value="iceape">Iceape</option>
+                  <option value="icecat">icecat</option>
+                  <option value="icecat">IceCat</option>
+                  <option value="iceweasel">IceWeasel</option>
+                  <option value="iron">Iron</option>
+                  <option value="k-meleon">Meleon</option>
+                  <option value="konqueror">Konqueror</option>
+                  <option value="lunascape">Lunascape</option>
+                  <option value="lynx">Lynx</option>
+                  <option value="maxthon">MAXTHON</option>
+                  <option value="midori">midori</option>
+                  <option value="midori">Midori</option>
+                  <option value="khtml">KHTML</option>
+                  <option value="mosaic">Mosaic</option>
+                  <option value="netsurf">NetSurf</option>
+                  <option value="omniweb">OmniWeb</option>
+                  <option value="opera tablet">Tablet</option>
+                  <option value="opera mini">Mini</option>
+                  <option value="phoenix">Phoenix</option>
+                  <option value="rockmelt">RockMelt</option>
+                  <option value="mobile safari">Safari</option>
+                  <option value="android browser">Browser</option>
+                  <option value="seamonkey">SeaMonkey</option>
+                  <option value="slim">Slim</option>
+                  <option value="webkit">Webkit</option>
+                  <option value="w3m">w3m</option>
+                </optgroup>
+              </select>
+
+            </th>
+            <th>
+              <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>
+              User-Agent
+              <select id="sort">
+                <option value="true">descending</option>
+                <option value="false">ascending</option>
+              </select>
+            </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" title="Refresh the current page" style="margin-left: 2px;" data-cmd="refresh">
+      <input type="button" value="Refresh Tab" 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>
--- a/data/popup/index.js
+++ b/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;
  }
 });
--- a/data/popup/list.json
+++ b/data/popup/list.json
--- a/data/popup/list.svg
+++ b/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>
--- a/manifest.json
+++ b/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": {
-    "gecko": {
-      "id": "{a6c4a591-f1b2-4f03-b3ff-767e5bedf4e7}",
-      "strict_min_version": "52.0"
-    }
-  }
+  "content_scripts": [{
+    "all_frames": true,
+    "run_at": "document_start",
+    "match_about_blank": true,
+    "matches": ["*://*/*"],
+    "js": ["data/inject.js"]
+  }]
 }
				`@ -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>`