building the UA objects from multiple JSON lists to improve popup's startup performance
This commit is contained in:
parent
1a3038ed05
commit
7cfa8fb4db
300 changed files with 454 additions and 252 deletions
64
extension/data/options/index.html
Normal file
64
extension/data/options/index.html
Normal file
|
@ -0,0 +1,64 @@
|
|||
<!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;
|
||||
}
|
||||
</style>
|
||||
</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><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><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 user is set from the popup. Use "*" as the hostname to match all domains. You can randomly select from multiple user-agent strings by providing an array instead of a string.</label> <a href="#" id="sample">Insert</a> a sample JSON object.
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><textarea id="custom" rows="5" wrap="off"></textarea></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><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><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><label><input type="checkbox" id="faqs"> Open FAQs page on updates</label></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p>
|
||||
<button id="donate">Support Development</button>
|
||||
<button id="reset">Reset</button>
|
||||
<button id="save">Save</button>
|
||||
<span id="status"></span>
|
||||
</p>
|
||||
|
||||
<script src="index.js"></script>
|
||||
</body>
|
||||
</html>
|
95
extension/data/options/index.js
Normal file
95
extension/data/options/index.js
Normal file
|
@ -0,0 +1,95 @@
|
|||
'use strict';
|
||||
|
||||
function notify(msg, period = 750) {
|
||||
// Update status to let user know options were saved.
|
||||
const status = document.getElementById('status');
|
||||
status.textContent = msg;
|
||||
clearTimeout(notify.id);
|
||||
notify.id = setTimeout(() => status.textContent = '', period);
|
||||
}
|
||||
|
||||
function prepare(str) {
|
||||
return str.split(/\s*,\s*/)
|
||||
.map(s => s.replace('http://', '')
|
||||
.replace('https://', '').split('/')[0].trim())
|
||||
.filter((h, i, l) => h && l.indexOf(h) === i);
|
||||
}
|
||||
|
||||
function save() {
|
||||
let custom = {};
|
||||
const c = document.getElementById('custom').value;
|
||||
try {
|
||||
custom = JSON.parse(c);
|
||||
}
|
||||
catch (e) {
|
||||
window.setTimeout(() => {
|
||||
notify('Custom JSON error: ' + e.message, 5000);
|
||||
document.getElementById('custom').value = c;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
chrome.storage.local.set({
|
||||
exactMatch: document.getElementById('exactMatch').checked,
|
||||
faqs: document.getElementById('faqs').checked,
|
||||
cache: document.getElementById('cache').checked,
|
||||
blacklist: prepare(document.getElementById('blacklist').value),
|
||||
whitelist: prepare(document.getElementById('whitelist').value),
|
||||
custom,
|
||||
mode: document.querySelector('[name="mode"]:checked').value
|
||||
}, () => {
|
||||
restore();
|
||||
notify('Options saved.');
|
||||
});
|
||||
}
|
||||
|
||||
function restore() {
|
||||
chrome.storage.local.get({
|
||||
exactMatch: false,
|
||||
faqs: true,
|
||||
cache: true,
|
||||
mode: 'blacklist',
|
||||
whitelist: [],
|
||||
blacklist: [],
|
||||
custom: {}
|
||||
}, prefs => {
|
||||
document.getElementById('exactMatch').checked = prefs.exactMatch;
|
||||
document.getElementById('faqs').checked = prefs.faqs;
|
||||
document.getElementById('cache').checked = prefs.cache;
|
||||
document.querySelector(`[name="mode"][value="${prefs.mode}"`).checked = true;
|
||||
document.getElementById('blacklist').value = prefs.blacklist.join(', ');
|
||||
document.getElementById('whitelist').value = prefs.whitelist.join(', ');
|
||||
document.getElementById('custom').value = JSON.stringify(prefs.custom, null, 2);
|
||||
});
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', restore);
|
||||
document.getElementById('save').addEventListener('click', save);
|
||||
|
||||
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',
|
||||
'www.example.com': ['random-useragent-1', 'random-user-agent-2'],
|
||||
'*': 'useragent-for-all-hostnames'
|
||||
}, null, 2);
|
||||
});
|
||||
|
||||
document.getElementById('donate').addEventListener('click', () => {
|
||||
chrome.tabs.create({
|
||||
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();
|
||||
});
|
||||
}
|
||||
});
|
Loading…
Add table
Add a link
Reference in a new issue