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

mobile-friendly options page

Browse source
This commit is contained in:
Ray Lothian 2020-03-15 10:44:52 +01:00
parent 61a13d5962
commit 9502e64f5f
4 changed files with 180 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extension/common.js
View file

@ -78,7 +78,7 @@ chrome.storage.onChanged.addListener(ps => {
if (ps.ua || ps.mode) { if (ps.ua || ps.mode) {
ua.update(); ua.update();
} }
else if (ps.custom) { if (ps.custom) {
expand(); expand();
} }
}); });

105
extension/data/options/index.css Normal file
View file

@ -0,0 +1,105 @@
body {
min-width: 600px;
}
@media (pointer: none), (pointer: coarse) {
body {
min-width: unset;
}
}
@supports (-moz-appearance:none) {
body {
font-size: 13px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
margin: 10px;
min-width: unset;
}
textarea {
padding: 5px;
border: solid 1px #ccc;
}
button,
input[type=submit],
input[type=button] {
height: 24px;
color: rgb(68, 68, 68);
background-image: linear-gradient(rgb(237, 237, 237), rgb(237, 237, 237) 38%, rgb(222, 222, 222));
box-shadow: rgba(0, 0, 0, 0.08) 0 1px 0, rgba(255, 255, 255, 0.75) 0 1px 2px inset;
text-shadow: rgb(240, 240, 240) 0 1px 0;
border: solid 1px rgba(0, 0, 0, 0.25);
}
input[type=button]:disabled {
opacity: 0.5;
}
}
h1 {
font-size: 15px;
font-weight: normal;
}
textarea {
width: 100%;
}
.mode-2,
.mode {
display: grid;
white-space: nowrap;
align-items: center;
grid-gap: 5px;
}
.mode {
grid-template-columns: min-content min-content min-content;
}
.mode-2 {
grid-template-columns: min-content min-content;
}
#toggle-parser-desc,
#toggle-protected-desc,
#toggle-custom-desc,
#toggle-whitelist-desc,
#toggle-blacklist-desc {
cursor: pointer;
color: #2f2f2f;
background-color: #e8e8e8;
padding: 1px 4px;
}
.note {
background: #e8e8e8;
color: #2f2f2f;
padding: 5px;
margin: 0 0 10px 0;
}
.hidden {
display: none;
}
.checked {
display: grid;
grid-template-columns: min-content 1fr;
grid-gap: 5px;
margin: 10px 0;
}
#tools,
#backup {
display: grid;
white-space: nowrap;
grid-gap: 5px;
}
#backup {
margin: 10px 0;
grid-template-columns: min-content min-content;
}
#tools {
grid-template-columns: repeat(4, min-content) 1fr;
align-items: center;
}
@media screen and (max-width: 600px) {
body {
min-width: unset;
}
#backup {
grid-template-columns: 1fr 1fr;
}
#tools {
grid-template-columns: 1fr 1fr;
}
}

131
extension/data/options/index.html
View file

@ -1,89 +1,72 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>My Test Extension Options</title> <title>User-Agent Switcher and Manager :: Options</title>
<style> <link rel="stylesheet" type="text/css" href="index.css">
body { <meta name="viewport" content="width=device-width, initial-scale=1">
min-width: 600px;
}
textarea {
width: 100%;
}
.h {
text-decoration: underline;
text-decoration-style: dashed;
font-weight: bold;
}
.spacer {
padding-bottom: 10px;
}
</style>
</head> </head>
<body> <body>
<table width=100%> <div class="mode">
<tr> <input type="radio" name="mode" value="blacklist" id="mode-blacklist">
<td> <label for="mode-blacklist"><h1>Black-List Mode</h1></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). Note that even if a window-based user-agent string is set from the toolbar popup, your browser's default user-agent string is used.</label> <span id="toggle-blacklist-desc">Description</span>
</td> </div>
</tr> <p for="toggle-blacklist-desc" class="note hidden">Apply the custom user-agent string to all tabs except the tabs with the following top-level hostnames (comma-separated list of hostnames). Note that even if a window-based user-agent string is set from the toolbar popup, your browser's default user-agent string is used.</p>
<tr> <textarea id="blacklist" rows="3" placeholder="e.g.: www.google.com, www.bing.com"></textarea>
<td class="spacer"><textarea id="blacklist" rows="3" placeholder="e.g.: www.google.com, www.bing.com"></textarea></td>
</tr>
<tr>
<td>
<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. Note that if a window-based user-agent string is set from the toolbar popup, this user-agent will overwrite the global one.</label>
</td>
</tr>
<tr>
<td class="spacer"><textarea id="whitelist" rows="3" placeholder="e.g.: www.google.com, www.bing.com"></textarea></td>
</tr>
<tr>
<td>
<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 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.
</td>
</tr>
<tr>
<td class="spacer"><textarea id="custom" rows="5" wrap="off"></textarea></td>
</tr>
<tr>
<td class="spacer"><label><input type="checkbox" id="cache"> Use caching to improve performance (recommended value is true). Uncheck this option only if you are using the custom mode and also you need the user-agent string to be altered from the provided list on every single request.</label></td>
</tr>
<tr>
<td class="spacer"><label><input type="checkbox" id="exactMatch"> Use exact matching (if checked, you will need to insert all sub-domains in the white-list and black-list modes to be considered. If unchecked, all the sub-domains are passing the matching condition (e.g: www.google.com passes the matching if google.com is in the list))</label></td>
</tr>
<tr>
<td class="spacer"><label><input type="checkbox" id="faqs"> Open FAQs page on updates</label></td>
</tr>
<tr>
<td class="spacer"><label><input type="checkbox" id="log"> Display debuging info in the browser console</label></td>
</tr>
<tr>
<td><span class="h">Disable Spoofing</span> A comma-separated list of keywords that the extension should not spoof the user-agent header. Use this list to protect URLs that contain these protected keywords. Each keyword need to be at least 5 char long.</td>
</tr>
<tr>
<td><textarea id="protected" rows="3" wrap="off"></textarea></td>
</tr>
<tr>
<td>
<span class="h">Custom User-Agent Parsing</span>: 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.
</td>
</tr>
<tr>
<td class="spacer"><textarea id="parser" rows="5" wrap="off"></textarea></td>
</tr>
</table>
<p> <div class="mode">
<input type="radio" name="mode" value="whitelist" id="mode-whitelist">
<label for="mode-whitelist"><h1>White-List Mode</h1></label>
<span id="toggle-whitelist-desc">Description</span>
</div>
<p for="toggle-whitelist-desc" class="note hidden">Only apply the custom user-agent string to the tabs with following top-level hostnames. Note that if a window-based user-agent string is set from the toolbar popup, this user-agent will overwrite the global one.</p>
<textarea id="whitelist" rows="3" placeholder="e.g.: www.google.com, www.bing.com"></textarea>
<div class="mode">
<input type="radio" name="mode" value="custom" id="mode-custom">
<label for="mode-custom"><h1>Custom Mode</h1></label>
<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>
<div class="checked">
<input type="checkbox" id="cache">
<label for="cache">Use caching to improve performance (recommended value is true). Uncheck this option only if you are using the custom mode and also you need the user-agent string to be altered from the provided list on every single request.</label>
<input type="checkbox" id="exactMatch">
<label for="exactMatch">Use exact matching (if checked, you will need to insert all sub-domains in the white-list and black-list modes to be considered. If unchecked, all the sub-domains are passing the matching condition (e.g: www.google.com passes the matching if google.com is in the list))</label>
<input type="checkbox" id="faqs">
<label for="faqs">Open FAQs page on updates</label>
<input type="checkbox" id="log">
<label for="log">Display debugging info in the browser console</label>
</div>
<div class="mode-2">
<h1>Disable Spoofing</h1>
<span id="toggle-protected-desc">Description</span>
</div>
<p for="toggle-protected-desc" class="note hidden">A comma-separated list of keywords that the extension should not spoof the user-agent header. Use this list to protect URLs that contain these protected keywords. Each keyword need to be at least 5 char long.</p>
<textarea id="protected" rows="3" wrap="off"></textarea>
<div class="mode-2">
<h1>Custom User-Agent Parsing</h1>
<span id="toggle-parser-desc">Description</span>
</div>
<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 id="backup">
<button id="import">Import Settings</button> <button id="import">Import Settings</button>
<button id="export">Export Settings</button> <button id="export">Export Settings</button>
</p> </div>
<p> <div id="tools">
<button id="help">FAQs Page (Help)</button> <button id="help">FAQs Page (Help)</button>
<button id="donate">Support Development</button> <button id="donate">Support Development</button>
<button id="reset">Reset</button> - <button id="save">Save</button> <button id="reset">Reset</button>
<button id="save">Save</button>
<span id="status"></span> <span id="status"></span>
</p> </div>
<script src="index.js"></script> <script src="index.js"></script>
</body> </body>

17
extension/data/options/index.js
View file

@ -188,3 +188,20 @@ document.getElementById('import').addEventListener('click', () => {
} }
} }
}); });
/* toggle */
document.getElementById('toggle-blacklist-desc').addEventListener('click', () => {
document.querySelector('[for="toggle-blacklist-desc"]').classList.toggle('hidden');
});
document.getElementById('toggle-whitelist-desc').addEventListener('click', () => {
document.querySelector('[for="toggle-whitelist-desc"]').classList.toggle('hidden');
});
document.getElementById('toggle-custom-desc').addEventListener('click', () => {
document.querySelector('[for="toggle-custom-desc"]').classList.toggle('hidden');
});
document.getElementById('toggle-protected-desc').addEventListener('click', () => {
document.querySelector('[for="toggle-protected-desc"]').classList.toggle('hidden');
});
document.getElementById('toggle-parser-desc').addEventListener('click', () => {
document.querySelector('[for="toggle-parser-desc"]').classList.toggle('hidden');
});