browser-extension/extension/popup.js

258 lines
6.6 KiB
JavaScript
Raw Permalink Normal View History

/*
Loaded into popup index.html
*/
2022-12-03 02:57:04 +00:00
'use strict';
let browserType = getBrowser();
// boilerplate to dedect browser type api
function getBrowser() {
2022-12-03 02:51:15 +00:00
if (typeof chrome !== 'undefined') {
if (typeof browser !== 'undefined') {
return browser;
} else {
2022-12-03 02:51:15 +00:00
return chrome;
}
} else {
console.log('failed to detect browser');
2022-12-03 02:51:15 +00:00
throw 'browser detection error';
}
}
async function sendMessage(message) {
let { success, value } = await browserType.runtime.sendMessage(message);
if (!success) {
throw value;
}
return value;
}
let errorOut = document.getElementById('error-out');
function setError(message) {
errorOut.style.display = 'initial';
errorOut.innerText = message;
}
function clearError() {
errorOut.style.display = 'none';
}
2023-11-09 13:07:32 +00:00
function clearTempLocalStorage() {
browserType.storage.local.remove('popupApiKey');
browserType.storage.local.remove('popupFullUrl');
}
// store access details
2022-12-03 02:51:15 +00:00
document.getElementById('save-login').addEventListener('click', function () {
let url = document.getElementById('full-url').value;
if (!url.includes('://')) {
url = 'http://' + url;
}
try {
clearError();
let parsed = new URL(url);
let toStore = {
access: {
url: `${parsed.protocol}//${parsed.hostname}`,
port: parsed.port || (parsed.protocol === 'https:' ? '443' : '80'),
apiKey: document.getElementById('api-key').value,
},
};
browserType.storage.local.set(toStore, function () {
console.log('Stored connection details: ' + JSON.stringify(toStore));
pingBackend();
});
} catch (e) {
setError(e.message);
}
2022-12-03 02:51:15 +00:00
});
2022-12-03 02:51:15 +00:00
// verify connection status
document.getElementById('status-icon').addEventListener('click', function () {
pingBackend();
});
2022-06-20 10:35:57 +00:00
// send cookie
2022-12-03 02:51:15 +00:00
document.getElementById('sendCookies').addEventListener('click', function () {
sendCookie();
});
2022-06-20 10:35:57 +00:00
2023-05-10 13:39:40 +00:00
// autostart
document.getElementById('autostart').addEventListener('click', function () {
toggleAutostart();
});
let fullUrlInput = document.getElementById('full-url');
fullUrlInput.addEventListener('change', () => {
browserType.storage.local.set({
popupFullUrl: fullUrlInput.value,
});
});
let apiKeyInput = document.getElementById('api-key');
apiKeyInput.addEventListener('change', () => {
browserType.storage.local.set({
popupApiKey: apiKeyInput.value,
});
});
2022-06-20 10:35:57 +00:00
function sendCookie() {
2022-12-03 02:51:15 +00:00
console.log('popup send cookie');
clearError();
2022-12-03 02:51:15 +00:00
function handleResponse(message) {
console.log('handle cookie response: ' + JSON.stringify(message));
let cookie_validated = message.cookie_validated;
document.getElementById('sendCookiesStatus').innerText = 'validated: ' + cookie_validated;
}
function handleError(error) {
console.log(`Error: ${error}`);
setError(error);
2022-12-03 02:51:15 +00:00
}
let checked = document.getElementById('sendCookies').checked;
let toStore = {
sendCookies: {
checked: checked,
},
};
browserType.storage.local.set(toStore, function () {
console.log('stored option: ' + JSON.stringify(toStore));
});
if (checked === false) {
return;
}
let sending = sendMessage({ type: 'sendCookie' });
2022-12-03 02:51:15 +00:00
sending.then(handleResponse, handleError);
2022-06-20 10:35:57 +00:00
}
2023-05-10 13:39:40 +00:00
function toggleAutostart() {
let checked = document.getElementById('autostart').checked;
let toStore = {
autostart: {
checked: checked,
},
};
browserType.storage.local.set(toStore, function () {
console.log('stored option: ' + JSON.stringify(toStore));
});
}
// send ping message to TA backend
function pingBackend() {
clearError();
2023-11-09 13:07:32 +00:00
clearTempLocalStorage();
function handleResponse() {
console.log('connection validated');
setStatusIcon(true);
2022-12-03 02:51:15 +00:00
}
2022-12-03 02:51:15 +00:00
function handleError(error) {
console.log(`Verify got error: ${error}`);
2022-12-03 02:51:15 +00:00
setStatusIcon(false);
setError(error);
2022-12-03 02:51:15 +00:00
}
2022-12-03 02:51:15 +00:00
console.log('ping TA server');
let sending = sendMessage({ type: 'verify' });
2022-12-03 02:51:15 +00:00
sending.then(handleResponse, handleError);
}
2022-05-30 11:32:12 +00:00
// add url to image
function addUrl(access) {
2022-12-03 02:51:15 +00:00
const url = `${access.url}:${access.port}`;
document.getElementById('ta-url').setAttribute('href', url);
2022-05-30 11:32:12 +00:00
}
2022-06-25 13:15:19 +00:00
function setCookieState() {
clearError();
2022-12-03 02:51:15 +00:00
function handleResponse(message) {
console.log(message);
document.getElementById('sendCookies').checked = message.cookie_enabled;
if (message.validated_str) {
document.getElementById('sendCookiesStatus').innerText = message.validated_str;
2022-06-25 13:15:19 +00:00
}
2022-12-03 02:51:15 +00:00
}
2022-06-25 13:15:19 +00:00
2022-12-03 02:51:15 +00:00
function handleError(error) {
console.log(`Error: ${error}`);
setError(error);
2022-12-03 02:51:15 +00:00
}
2022-06-25 13:15:19 +00:00
2022-12-03 02:51:15 +00:00
console.log('set cookie state');
let sending = sendMessage({ type: 'cookieState' });
2022-12-03 02:51:15 +00:00
sending.then(handleResponse, handleError);
document.getElementById('sendCookies').checked = true;
2022-06-25 13:15:19 +00:00
}
// change status icon based on connection status
2022-04-01 08:30:49 +00:00
function setStatusIcon(connected) {
2022-12-03 02:51:15 +00:00
let statusIcon = document.getElementById('status-icon');
2022-12-03 02:57:04 +00:00
if (connected) {
2022-12-03 02:51:15 +00:00
statusIcon.innerHTML = '☑';
statusIcon.style.color = 'green';
} else {
statusIcon.innerHTML = '☒';
statusIcon.style.color = 'red';
}
2022-04-01 08:30:49 +00:00
}
// fill in form
2022-12-03 02:51:15 +00:00
document.addEventListener('DOMContentLoaded', async () => {
function onGot(item) {
if (!item.access) {
console.log('no access details found');
if (item.popupFullUrl != null && fullUrlInput.value === '') {
fullUrlInput.value = item.popupFullUrl;
}
if (item.popupApiKey != null && apiKeyInput.value === '') {
apiKeyInput.value = item.popupApiKey;
}
2022-12-03 02:51:15 +00:00
setStatusIcon(false);
return;
2022-06-25 13:15:19 +00:00
}
2022-12-03 02:51:15 +00:00
let { url, port } = item.access;
let fullUrl = url;
if (!(url.startsWith('http://') && port === '80')) {
fullUrl += `:${port}`;
}
document.getElementById('full-url').value = fullUrl;
document.getElementById('api-key').value = item.access.apiKey;
pingBackend();
addUrl(item.access);
}
2022-11-28 03:21:13 +00:00
2022-12-03 02:51:15 +00:00
function setCookiesOptions(result) {
if (!result.sendCookies || result.sendCookies.checked === false) {
console.log('sync cookies not set');
return;
}
console.log('set options: ' + JSON.stringify(result));
setCookieState();
}
2023-05-10 13:39:40 +00:00
function setAutostartOption(result) {
console.log(result);
if (!result.autostart || result.autostart.checked === false) {
console.log('autostart not set');
return;
}
console.log('set options: ' + JSON.stringify(result));
document.getElementById('autostart').checked = true;
}
browserType.storage.local.get(['access', 'popupFullUrl', 'popupApiKey'], function (result) {
2022-12-03 02:51:15 +00:00
onGot(result);
});
browserType.storage.local.get('sendCookies', function (result) {
setCookiesOptions(result);
});
2023-05-10 13:39:40 +00:00
browserType.storage.local.get('autostart', function (result) {
setAutostartOption(result);
});
2022-12-03 02:51:15 +00:00
});