building the UA objects from multiple JSON lists to improve popup's startup performance

This commit is contained in:
Ray Lothian 2019-03-12 10:50:52 +01:00
parent 1a3038ed05
commit 7cfa8fb4db
300 changed files with 454 additions and 252 deletions

View 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>

View 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();
});
}
});