mobile-friendly options page
This commit is contained in:
Ray Lothian
parent
61a13d5962
commit
9502e64f5f
4 changed files with 180 additions and 75 deletions
|
|
@ -78,7 +78,7 @@ chrome.storage.onChanged.addListener(ps => {
|
|||
if (ps.ua || ps.mode) {
|
||||
ua.update();
|
||||
}
|
||||
else if (ps.custom) {
|
||||
if (ps.custom) {
|
||||
expand();
|
||||
}
|
||||
});
|
||||
|
|
|
|||
105
extension/data/options/index.css
Normal file
105
extension/data/options/index.css
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,89 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>My Test Extension Options</title>
|
||||
<style>
|
||||
body {
|
||||
min-width: 600px;
|
||||
}
|
||||
textarea {
|
||||
width: 100%;
|
||||
}
|
||||
.h {
|
||||
text-decoration: underline;
|
||||
text-decoration-style: dashed;
|
||||
font-weight: bold;
|
||||
}
|
||||
.spacer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<title>User-Agent Switcher and Manager :: Options</title>
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<table width=100%>
|
||||
<tr>
|
||||
<td>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<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>
|
||||
<div class="mode">
|
||||
<input type="radio" name="mode" value="blacklist" id="mode-blacklist">
|
||||
<label for="mode-blacklist"><h1>Black-List Mode</h1></label>
|
||||
<span id="toggle-blacklist-desc">Description</span>
|
||||
</div>
|
||||
<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>
|
||||
<textarea id="blacklist" rows="3" placeholder="e.g.: www.google.com, www.bing.com"></textarea>
|
||||
|
||||
<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="export">Export Settings</button>
|
||||
</p>
|
||||
<p>
|
||||
</div>
|
||||
<div id="tools">
|
||||
<button id="help">FAQs Page (Help)</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>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in a new issue