buckbanzai/talkdesk-useragent-switcher
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

optional parser

Browse source
This commit is contained in:
Ray Lothian 2019-11-05 11:02:26 +00:00
parent dd9c11948c
commit df861e16ca
8 changed files with 653 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

81
extension/data/popup/index.css
View file

@ -24,9 +24,10 @@
body {
background-color: #fff;
font-family: "Helvetica Neue",Helvetica,sans-serif;
font-family: "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
width: 600px;
width: 650px;
margin: 0;
}
table {
width: 100%;
@ -37,15 +38,21 @@ fieldset {
}
input[type=search],
input[type=text] {
width: 100%;
box-sizing: border-box;
margin-right: 2px;
text-indent: 5px;
padding-right: 5px;
}
input[type=text] {
width: 100%;
}
input[type=text]:read-only {
background-color: transparent;
}
input {
outline: none;
background-color: #fff;
color: #000;
color: #000;
border: solid 1px #e7e7e7;
box-sizing: border-box;
height: 24px;
@ -54,8 +61,9 @@ input {
}
input[type=button] {
cursor: pointer;
min-width: 100px;
border: none;
transition-delay: 0;
height: 32px;
}
input[type=button].active {
opacity: 0.5;
@ -68,25 +76,25 @@ input[type=button]:disabled {
select {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
user-select: none;
outline: none;
color: #000;
background: rgba(255,255,255,.5) url(list.svg) no-repeat center right 4px;
background: #fff url(list.svg) no-repeat center right 4px;
background-size: 8px;
font-size: 13px;
border-radius: 0;
padding: 2px 16px 2px 4px;
border: solid 1px #e7e7e7;
}
#list {
overflow: auto;
scroll-behavior: smooth;
height: 300px;
margin-bottom: 10px;
height: 200px;
margin-bottom: 16px;
color: #000;
background-color: #fdfafa;
background-position: top 120px center;
background-position: top 88px center;
background-repeat: no-repeat;
font-size: 11px;
}
#list[data-loading=true] {
background-image: url(loading.gif);
@ -96,9 +104,9 @@ select {
table-layout: fixed;
}
#list th {
height: 30px;
height: 32px;
color: #000;
background-color: #e7e7e7;
background-color: #f5f5f5;
white-space: nowrap;
padding-left: 10px;
}
@ -141,8 +149,15 @@ select {
margin: 3px 0 0 5px;
}
#filter td:first-child {
width: 100px;
#filter {
background-color: #f5f5f5;
}
#filter th {
height: 32px;
}
#filter th:first-of-type {
text-align: left;
padding-left: 10px;
}
#filter th:last-of-type {
text-align: right;
@ -150,9 +165,11 @@ select {
}
#agent {
padding: 10px 0;
white-space: nowrap;
}
#agent input:not(:last-child) {
margin-right: 1px;
}
#info {
padding: 0 5px;
@ -161,25 +178,19 @@ select {
display: none;
}
[data-cmd] {
margin-right: 2px;
}
[data-cmd="test"] {
background-color: #4d72b7;
border: solid 1px #4a6dad;
color: #fff;
}
[data-cmd="window"],
[data-cmd="apply"] {
color: #fff;
background-color: #3c923c;
border: solid 1px #327932;
}
[data-cmd="reset"] {
color: #fff;
background-color: #eea345;
border: solid 1px #ec9730;
background-color: #e6850b;
}
[data-cmd="reload"],
@ -197,3 +208,27 @@ body[data-android="true"] [data-cmd="reload"],
body[data-android="true"] [data-cmd="window"] {
display: none;
}
#view {
background-color: #f5f5f5;
}
#view td {
text-align: right;
white-space: nowrap;
}
#view td:nth-child(1),
#view td:nth-child(3) {
padding: 0 5px;
}
#toast {
position: fixed;
bottom: 50px;
right: 10px;
background-color: #e68509;
color: #fff;
padding: 2px 5px;
box-shadow: 0 0 2px #ca7403;
}
#toast:empty {
display: none;
}

155
extension/data/popup/index.html
View file

@ -6,6 +6,47 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="toast"></div>
<table>
<thead id="filter">
<tr>
<th>
<select id="browser">
<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>
<option value="Vivaldi">Vivaldi</option>
</optgroup>
<optgroup label="Others"></optgroup>
</select>&nbsp;
<select id="os">
<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"></optgroup>
</select>
</th>
<th>
<input type="search" id="custom" placeholder="Filter items">&nbsp;
<select id="sort">
<option value="true">descending</option>
<option value="false">ascending</option>
</select>
</th>
</tr>
</thead>
</table>
<div id="list" data-loading=true>
<table>
<colgroup>
@ -14,44 +55,6 @@
<col width="100">
<col>
</colgroup>
<thead id="filter">
<tr>
<th colspan="3">
<select id="browser">
<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>
<option value="Vivaldi">Vivaldi</option>
</optgroup>
<optgroup label="Others"></optgroup>
</select>&nbsp;
<select id="os">
<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"></optgroup>
</select>
</th>
<th>
User-Agent&nbsp;
<select id="sort">
<option value="true">descending</option>
<option value="false">ascending</option>
</select>
</th>
</tr>
</thead>
<template>
<tr>
<td><input type="radio" name="select"></td>
@ -63,22 +66,70 @@
<tbody></tbody>
</table>
</div>
<div hbox>
<input type="search" id="custom" placeholder="Filter items">
<input type="button" value="Options" title="Open options page" style="margin-left: 2px;" data-cmd="options">
<input type="button" value="Refresh Tab" title="Refresh the current page" data-cmd="refresh">
<input type="button" value="Restart" title="Click to reload the extension. This will cause all the window-based user-agent strings to be cleared" data-cmd="reload">
<div id="view">
<table>
<colgroup>
<col width="10">
<col>
<col width="10">
<col>
</colgroup>
<tr>
<td>userAgent</td>
<td colspan="3">
<div hbox>
<input id="ua" type="text" placeholder="Your preferred user-agent string" title="To set blank user-agent string, use 'empty' keyword">
</div>
</td>
</tr>
<tr>
<td>appVersion</td>
<td colspan="3">
<div hbox>
<input readonly id="appVersion" type="text" title="This is a readonly field. Use options page for custom parsing.">
</div>
</td>
</tr>
<tr>
<td>platform</td>
<td>
<div hbox>
<input readonly id="platform" type="text" title="This is a readonly field. Use options page for custom parsing.">
</div>
</td>
<td>vendor</td>
<td>
<div hbox>
<input readonly id="vendor" type="text" title="This is a readonly field. Use options page for custom parsing.">
</div>
</td>
</tr>
<tr>
<td>product</td>
<td>
<div hbox>
<input readonly id="product" type="text" title="This is a readonly field. Use options page for custom parsing.">
</div>
</td>
<td>oscpu</td>
<td>
<div hbox>
<input readonly id="oscpu" type="text" title="This is a readonly field. Use options page for custom parsing.">
</div>
</td>
</tr>
</table>
</div>
<div hbox id="agent" pack="center" align="center">
<span id="info">User-Agent String:</span>&nbsp;
<span flex="1"></span>
<input type="button" value="Apply" title="Set this string as the browser's User-Agent string" data-cmd="apply">
<input type="button" value="Window" title="Set this string as this window's User-Agent string" data-cmd="window">
<input type="button" value="Reset" title="Reset User-Agent string to the default one. This will not reset window-based UA strings. To reset them, use the 'Restart' button" data-cmd="reset">
<input type="button" value="Test" title="Test your user-agent string" data-cmd="test">
</div>
<input id="ua" type="text" placeholder="Your preferred user-agent string" title="To set blank user-agent string, use 'empty' keyword">
<div id="explore" data-cols=4></div>
<div hbox id="agent" align="center">
<input flex="1" type="button" value="Options" title="Open options page" style="margin-left: 2px;" data-cmd="options">
<input flex="1" type="button" value="Restart" title="Click to reload the extension. This will cause all the window-based user-agent strings to be cleared" data-cmd="reload">
<input flex="1" type="button" value="Refresh Tab" title="Refresh the current page" data-cmd="refresh">
<input flex="1" type="button" value="Reset" title="Reset User-Agent string to the default one. This will not reset window-based UA strings. To reset them, use the 'Restart' button" data-cmd="reset">
<input flex="1" type="button" value="Test" title="Test your user-agent string" data-cmd="test">
<input flex="1" type="button" value="Window" title="Set this string as this window's User-Agent string" data-cmd="window">
<input flex="1" type="button" value="Apply" title="Set this string as the browser's User-Agent string" data-cmd="apply">
</div>
<script src="index.js"></script>
<script async src="matched.js"></script>
</body>

36
extension/data/popup/index.js
View file

@ -71,7 +71,7 @@ function update(ua) {
inline: 'nearest'
});
}
document.getElementById('custom').placeholder = `Filter among ${list.length} "User-Agent" strings`;
document.getElementById('custom').placeholder = `Filter among ${list.length}`;
[...document.getElementById('os').querySelectorAll('option')].forEach(option => {
option.disabled = map.matching[browser.toLowerCase()].indexOf(option.value.toLowerCase()) === -1;
});
@ -85,6 +85,7 @@ function update(ua) {
}
document.addEventListener('change', ({target}) => {
console.log(target);
if (target.closest('#filter')) {
localStorage.setItem(target.id, target.value);
chrome.storage.local.get({
@ -125,15 +126,16 @@ document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r =
const ua = prefs.ua || navigator.userAgent;
update(ua);
document.getElementById('ua').value = ua;
document.getElementById('ua').dispatchEvent(new Event('input'));
});
}));
document.getElementById('list').addEventListener('click', ({target}) => {
const tr = target.closest('tr');
const tr = target.closest('tbody tr');
if (tr) {
const input = tr.querySelector('input');
if (input && input !== target) {
input.checked = !input.checked;
input.checked = true;
input.dispatchEvent(new Event('change', {
bubbles: true
}));
@ -143,7 +145,7 @@ document.getElementById('list').addEventListener('click', ({target}) => {
document.getElementById('custom').addEventListener('keyup', ({target}) => {
const value = target.value;
[...document.querySelectorAll('#list tr')]
[...document.querySelectorAll('#list tbody tr')]
.forEach(tr => tr.dataset.matched = tr.textContent.toLowerCase().indexOf(value.toLowerCase()) !== -1);
});
@ -155,9 +157,9 @@ chrome.storage.onChanged.addListener(prefs => {
});
function msg(msg) {
const info = document.getElementById('info');
info.textContent = msg;
window.setTimeout(() => info.textContent = 'User-Agent String:', 2000);
const toast = document.getElementById('toast');
toast.textContent = msg;
window.setTimeout(() => toast.textContent = '', 2000);
}
// commands
@ -170,7 +172,7 @@ document.addEventListener('click', ({target}) => {
msg('Default UA, press the reset button instead');
}
else {
msg('user-agent is set');
msg('User-Agent is Set');
}
chrome.storage.local.set({
ua: value === navigator.userAgent ? '' : value
@ -191,7 +193,7 @@ document.addEventListener('click', ({target}) => {
chrome.storage.local.set({
ua: ''
});
msg('reset to default');
msg('Reset to Default');
}
else if (cmd === 'refresh') {
chrome.tabs.query({
@ -223,6 +225,18 @@ document.addEventListener('click', ({target}) => {
});
document.getElementById('ua').addEventListener('input', e => {
document.querySelector('[data-cmd=apply]').disabled = e.target.value === '';
document.querySelector('[data-cmd=window]').disabled = e.target.value === '';
const value = e.target.value;
document.querySelector('[data-cmd=apply]').disabled = value === '';
document.querySelector('[data-cmd=window]').disabled = value === '';
if (value) {
chrome.runtime.getBackgroundPage(bg => {
const o = bg.ua.parse(value);
document.getElementById('appVersion').value = o.appVersion;
document.getElementById('platform').value = o.platform;
document.getElementById('vendor').value = o.vendor;
document.getElementById('product').value = o.product;
document.getElementById('oscpu').value = o.oscpu;
});
}
});