feat: add browser extension language selector
This commit is contained in:
parent
766458d0a0
commit
cae140a348
|
|
@ -20,6 +20,10 @@ class Element {
|
|||
click() {
|
||||
if (this.listeners.click) this.listeners.click();
|
||||
}
|
||||
|
||||
change() {
|
||||
if (this.listeners.change) this.listeners.change({ target: this });
|
||||
}
|
||||
}
|
||||
|
||||
const elements = {};
|
||||
|
|
@ -32,10 +36,23 @@ const elements = {};
|
|||
'file-input',
|
||||
'pending-count',
|
||||
'status-dot',
|
||||
'subtitle',
|
||||
'receiver-label',
|
||||
'pending-label',
|
||||
'url-label',
|
||||
'capture-page',
|
||||
'capture-file',
|
||||
'retry',
|
||||
'file-label',
|
||||
'receiver-url-label',
|
||||
'receiver-token-label',
|
||||
'language-label',
|
||||
'language-select',
|
||||
'language-system-option',
|
||||
'language-en-option',
|
||||
'language-ru-option',
|
||||
'save-settings',
|
||||
'context-menu-hint',
|
||||
].forEach((id) => {
|
||||
elements[id] = new Element();
|
||||
});
|
||||
|
|
@ -45,12 +62,14 @@ const initialState = {
|
|||
settings: {
|
||||
receiverUrl: 'http://127.0.0.1:47731/api/browser-inbox/v1/captures',
|
||||
receiverToken: 'persisted-token',
|
||||
language: 'system',
|
||||
},
|
||||
pendingCount: 0,
|
||||
status: {},
|
||||
};
|
||||
const browser = {
|
||||
runtime: {
|
||||
getURL(relativePath) { return `extension://${relativePath}`; },
|
||||
sendMessage(message) {
|
||||
if (message.action === 'getState') return Promise.resolve(initialState);
|
||||
if (message.action === 'saveSettings') {
|
||||
|
|
@ -60,24 +79,56 @@ const browser = {
|
|||
return Promise.resolve(initialState);
|
||||
},
|
||||
},
|
||||
i18n: { getUILanguage() { return 'ru-RU'; } },
|
||||
};
|
||||
const document = {
|
||||
activeElement: null,
|
||||
documentElement: { lang: '' },
|
||||
getElementById(id) {
|
||||
return elements[id];
|
||||
},
|
||||
};
|
||||
const catalogs = {
|
||||
en: JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'shared', 'locales', 'en.json'), 'utf8')),
|
||||
ru: JSON.parse(fs.readFileSync(path.join(__dirname, '..', 'shared', 'locales', 'ru.json'), 'utf8')),
|
||||
};
|
||||
function fetchCatalog(url) {
|
||||
const locale = /\/ru\.json$/.test(url) ? 'ru' : 'en';
|
||||
return Promise.resolve({ ok: true, json: () => Promise.resolve(catalogs[locale]) });
|
||||
}
|
||||
const i18nPath = path.join(__dirname, '..', 'shared', 'i18n.js');
|
||||
const popupPath = path.join(__dirname, '..', 'shared', 'popup', 'popup.js');
|
||||
vm.runInNewContext(fs.readFileSync(popupPath, 'utf8'), { browser, console, document, Promise, btoa });
|
||||
const context = vm.createContext({ browser, console, document, Promise, btoa, fetch: fetchCatalog, navigator: { language: 'en-US' } });
|
||||
context.globalThis = context;
|
||||
vm.runInContext(fs.readFileSync(i18nPath, 'utf8'), context, { filename: i18nPath });
|
||||
vm.runInContext(fs.readFileSync(popupPath, 'utf8'), context, { filename: popupPath });
|
||||
|
||||
async function flush() {
|
||||
for (let i = 0; i < 4; i += 1) await Promise.resolve();
|
||||
for (let i = 0; i < 16; i += 1) await Promise.resolve();
|
||||
}
|
||||
|
||||
(async () => {
|
||||
await flush();
|
||||
assert.strictEqual(elements['receiver-input'].value, initialState.settings.receiverUrl);
|
||||
assert.strictEqual(elements['receiver-token-input'].value, initialState.settings.receiverToken);
|
||||
assert.strictEqual(elements['language-select'].value, 'system');
|
||||
assert.strictEqual(elements['capture-page'].textContent, 'Отправить страницу');
|
||||
assert.strictEqual(elements['receiver-state'].textContent, 'Неизвестно');
|
||||
assert.strictEqual(document.documentElement.lang, 'ru');
|
||||
elements['capture-file'].click();
|
||||
assert.strictEqual(elements.status.textContent, 'Сначала выберите файл');
|
||||
|
||||
elements['language-select'].value = 'en';
|
||||
elements['language-select'].change();
|
||||
await flush();
|
||||
|
||||
assert.strictEqual(elements['capture-page'].textContent, 'Send Page');
|
||||
assert.strictEqual(elements['receiver-state'].textContent, 'Unknown');
|
||||
assert.strictEqual(document.documentElement.lang, 'en');
|
||||
assert.ok(savedSettings);
|
||||
assert.strictEqual(savedSettings.language, 'en');
|
||||
assert.strictEqual(savedSettings.receiverUrl, initialState.settings.receiverUrl);
|
||||
assert.strictEqual(savedSettings.receiverToken, initialState.settings.receiverToken);
|
||||
|
||||
elements['receiver-input'].value = 'http://127.0.0.1:47731/api/browser-inbox/v1/captures';
|
||||
elements['receiver-token-input'].value = 'new-token';
|
||||
|
|
@ -87,7 +138,8 @@ async function flush() {
|
|||
assert.ok(savedSettings);
|
||||
assert.strictEqual(savedSettings.receiverUrl, 'http://127.0.0.1:47731/api/browser-inbox/v1/captures');
|
||||
assert.strictEqual(savedSettings.receiverToken, 'new-token');
|
||||
console.log('browser extension popup settings tests passed');
|
||||
assert.strictEqual(savedSettings.language, 'en');
|
||||
console.log('browser extension popup localization/settings tests passed');
|
||||
})().catch((error) => {
|
||||
console.error(error);
|
||||
process.exit(1);
|
||||
|
|
|
|||
|
|
@ -126,6 +126,17 @@ input {
|
|||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
select {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
border: 1px solid #374151;
|
||||
border-radius: 4px;
|
||||
padding: 7px 8px;
|
||||
background: #0f172a;
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!doctype html>
|
||||
<html lang="ru">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
|
@ -17,15 +17,15 @@
|
|||
|
||||
<section class="panel">
|
||||
<div class="row">
|
||||
<span>Receiver</span>
|
||||
<span id="receiver-label">Receiver</span>
|
||||
<strong id="receiver-state">Unknown</strong>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span>Pending</span>
|
||||
<span id="pending-label">Pending</span>
|
||||
<strong id="pending-count">0</strong>
|
||||
</div>
|
||||
<div class="row url-row">
|
||||
<span>URL</span>
|
||||
<span id="url-label">URL</span>
|
||||
<code id="receiver-url"></code>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -37,21 +37,28 @@
|
|||
</section>
|
||||
|
||||
<section class="file-picker">
|
||||
<label for="file-input">File</label>
|
||||
<label id="file-label" for="file-input">File</label>
|
||||
<input id="file-input" type="file">
|
||||
</section>
|
||||
|
||||
<section class="settings">
|
||||
<label for="receiver-input">Receiver URL</label>
|
||||
<label id="receiver-url-label" for="receiver-input">Receiver URL</label>
|
||||
<input id="receiver-input" type="url" spellcheck="false">
|
||||
<label for="receiver-token-input">Pairing token</label>
|
||||
<label id="receiver-token-label" for="receiver-token-input">Pairing token</label>
|
||||
<input id="receiver-token-input" type="password" spellcheck="false" autocomplete="off">
|
||||
<label id="language-label" for="language-select">Language</label>
|
||||
<select id="language-select">
|
||||
<option id="language-system-option" value="system">System</option>
|
||||
<option id="language-en-option" value="en">English</option>
|
||||
<option id="language-ru-option" value="ru">Русский</option>
|
||||
</select>
|
||||
<button id="save-settings" class="secondary">Save</button>
|
||||
</section>
|
||||
|
||||
<p class="hint">Selection and link captures are available from the page context menu.</p>
|
||||
<p id="context-menu-hint" class="hint">Selection and link captures are available from the page context menu.</p>
|
||||
<p id="status"></p>
|
||||
</main>
|
||||
<script src="../i18n.js"></script>
|
||||
<script src="popup.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,90 @@
|
|||
'use strict';
|
||||
|
||||
var ext = typeof browser !== 'undefined' ? browser : chrome;
|
||||
var i18n = globalThis.VerstakBrowserI18n;
|
||||
var statusEl = document.getElementById('status');
|
||||
var receiverStateEl = document.getElementById('receiver-state');
|
||||
var receiverUrlEl = document.getElementById('receiver-url');
|
||||
var receiverInputEl = document.getElementById('receiver-input');
|
||||
var receiverTokenInputEl = document.getElementById('receiver-token-input');
|
||||
var languageSelectEl = document.getElementById('language-select');
|
||||
var fileInputEl = document.getElementById('file-input');
|
||||
var pendingCountEl = document.getElementById('pending-count');
|
||||
var statusDotEl = document.getElementById('status-dot');
|
||||
var MAX_FILE_TEXT_LENGTH = 2 * 1024 * 1024;
|
||||
var MAX_FILE_BYTES = 8 * 1024 * 1024;
|
||||
var catalogs = { en: {}, ru: {} };
|
||||
var currentPreference = 'system';
|
||||
var currentState = {};
|
||||
var t = i18n.createTranslator(catalogs, 'en');
|
||||
|
||||
var staticText = {
|
||||
subtitle: 'popup.subtitle',
|
||||
'receiver-label': 'label.receiver',
|
||||
'pending-label': 'label.pending',
|
||||
'url-label': 'label.url',
|
||||
'file-label': 'label.file',
|
||||
'receiver-url-label': 'label.receiverUrl',
|
||||
'receiver-token-label': 'label.pairingToken',
|
||||
'language-label': 'label.language',
|
||||
'capture-page': 'action.sendPage',
|
||||
'capture-file': 'action.sendFile',
|
||||
retry: 'action.retryPending',
|
||||
'save-settings': 'action.save',
|
||||
'context-menu-hint': 'hint.contextMenu',
|
||||
'language-system-option': 'language.system',
|
||||
'language-en-option': 'language.en',
|
||||
'language-ru-option': 'language.ru'
|
||||
};
|
||||
|
||||
function browserLocale() {
|
||||
try {
|
||||
if (ext.i18n && ext.i18n.getUILanguage) return ext.i18n.getUILanguage();
|
||||
} catch (_) {}
|
||||
return typeof navigator !== 'undefined' ? navigator.language : 'en';
|
||||
}
|
||||
|
||||
function loadCatalogs() {
|
||||
return i18n.loadCatalogs(function (locale) {
|
||||
return fetch(ext.runtime.getURL('locales/' + locale + '.json')).then(function (response) {
|
||||
if (!response.ok) throw new Error('catalog load failed: ' + locale);
|
||||
return response.json();
|
||||
});
|
||||
}).catch(function (error) {
|
||||
console.warn('[verstak] localization catalogs unavailable:', error);
|
||||
return { en: {}, ru: {} };
|
||||
});
|
||||
}
|
||||
|
||||
function applyReceiverState(state) {
|
||||
var reachable = state && state.status && state.status.receiverReachable;
|
||||
if (reachable === true) {
|
||||
receiverStateEl.textContent = t('receiver.online', null, 'Online');
|
||||
receiverStateEl.className = 'online';
|
||||
statusDotEl.className = 'dot online';
|
||||
} else if (reachable === false) {
|
||||
receiverStateEl.textContent = t('receiver.offline', null, 'Offline');
|
||||
receiverStateEl.className = 'offline';
|
||||
statusDotEl.className = 'dot offline';
|
||||
} else {
|
||||
receiverStateEl.textContent = t('receiver.unknown', null, 'Unknown');
|
||||
receiverStateEl.className = '';
|
||||
statusDotEl.className = 'dot unknown';
|
||||
}
|
||||
}
|
||||
|
||||
function applyLocale(preference) {
|
||||
currentPreference = i18n.normalizePreference(preference);
|
||||
var locale = i18n.resolveLocale(currentPreference, browserLocale());
|
||||
t = i18n.createTranslator(catalogs, locale);
|
||||
document.documentElement.lang = locale;
|
||||
languageSelectEl.value = currentPreference;
|
||||
Object.keys(staticText).forEach(function (id) {
|
||||
var element = document.getElementById(id);
|
||||
if (element) element.textContent = t(staticText[id]);
|
||||
});
|
||||
applyReceiverState(currentState);
|
||||
}
|
||||
|
||||
function arrayBufferToBase64(buffer) {
|
||||
var bytes = new Uint8Array(buffer);
|
||||
|
|
@ -42,48 +116,58 @@
|
|||
}
|
||||
|
||||
function render(state) {
|
||||
state = state || {};
|
||||
var settings = state.settings || {};
|
||||
var status = state.status || {};
|
||||
var reachable = status.receiverReachable;
|
||||
pendingCountEl.textContent = String(state.pendingCount || 0);
|
||||
currentState = state || {};
|
||||
var settings = currentState.settings || {};
|
||||
pendingCountEl.textContent = String(currentState.pendingCount || 0);
|
||||
receiverUrlEl.textContent = settings.receiverUrl || '';
|
||||
if (document.activeElement !== receiverInputEl) {
|
||||
receiverInputEl.value = settings.receiverUrl || '';
|
||||
}
|
||||
if (document.activeElement !== receiverTokenInputEl) {
|
||||
receiverTokenInputEl.value = settings.receiverToken || '';
|
||||
}
|
||||
|
||||
if (reachable === true) {
|
||||
receiverStateEl.textContent = 'Online';
|
||||
receiverStateEl.className = 'online';
|
||||
statusDotEl.className = 'dot online';
|
||||
} else if (reachable === false) {
|
||||
receiverStateEl.textContent = 'Offline';
|
||||
receiverStateEl.className = 'offline';
|
||||
statusDotEl.className = 'dot offline';
|
||||
} else {
|
||||
receiverStateEl.textContent = 'Unknown';
|
||||
receiverStateEl.className = '';
|
||||
statusDotEl.className = 'dot unknown';
|
||||
}
|
||||
if (document.activeElement !== receiverInputEl) receiverInputEl.value = settings.receiverUrl || '';
|
||||
if (document.activeElement !== receiverTokenInputEl) receiverTokenInputEl.value = settings.receiverToken || '';
|
||||
applyReceiverState(currentState);
|
||||
}
|
||||
|
||||
function refresh() {
|
||||
return request({ type: 'verstak.capture', action: 'getState' }).then(render).catch(function (err) {
|
||||
setStatus(err && err.message ? err.message : String(err));
|
||||
return request({ type: 'verstak.capture', action: 'getState' }).then(function (state) {
|
||||
render(state);
|
||||
applyLocale(state.settings && state.settings.language || 'system');
|
||||
return state;
|
||||
}).catch(function (error) {
|
||||
setStatus(error && error.message ? error.message : String(error));
|
||||
});
|
||||
}
|
||||
|
||||
function currentSettings() {
|
||||
return {
|
||||
receiverUrl: receiverInputEl.value.trim(),
|
||||
receiverToken: receiverTokenInputEl.value.trim(),
|
||||
language: currentPreference
|
||||
};
|
||||
}
|
||||
|
||||
function saveCurrentSettings(successMessage) {
|
||||
return request({
|
||||
type: 'verstak.capture',
|
||||
action: 'saveSettings',
|
||||
settings: currentSettings()
|
||||
}).then(function (state) {
|
||||
render(state);
|
||||
if (successMessage) setStatus(t('status.saved', null, 'Saved'));
|
||||
return state;
|
||||
}).catch(function (error) {
|
||||
setStatus(error && error.message ? error.message : String(error));
|
||||
});
|
||||
}
|
||||
|
||||
function send(message) {
|
||||
setStatus('Sending...');
|
||||
setStatus(t('status.sending', null, 'Sending...'));
|
||||
request(message).then(function (state) {
|
||||
render(state);
|
||||
if (state.status && state.status.lastResult === 'queued') setStatus('Queued until Verstak is available');
|
||||
else setStatus('Done');
|
||||
}).catch(function (err) {
|
||||
setStatus(err && err.message ? err.message : String(err));
|
||||
if (state.status && state.status.lastResult === 'queued') {
|
||||
setStatus(t('status.queued', null, 'Queued until Verstak is available'));
|
||||
} else {
|
||||
setStatus(t('status.done', null, 'Done'));
|
||||
}
|
||||
}).catch(function (error) {
|
||||
setStatus(error && error.message ? error.message : String(error));
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -94,27 +178,26 @@
|
|||
document.getElementById('capture-file').addEventListener('click', function () {
|
||||
var file = fileInputEl.files && fileInputEl.files[0];
|
||||
if (!file) {
|
||||
setStatus('Choose a text file first');
|
||||
setStatus(t('error.chooseFile', null, 'Choose a file first'));
|
||||
return;
|
||||
}
|
||||
if (file.size > MAX_FILE_BYTES) {
|
||||
setStatus('File is too large for browser capture');
|
||||
setStatus(t('error.fileTooLarge', null, 'File is too large for browser capture'));
|
||||
return;
|
||||
}
|
||||
setStatus('Reading file...');
|
||||
setStatus(t('status.readingFile', null, 'Reading file...'));
|
||||
Promise.all([file.arrayBuffer(), readOptionalText(file)]).then(function (results) {
|
||||
var content = results[1] || '';
|
||||
send({
|
||||
type: 'verstak.capture',
|
||||
kind: 'file',
|
||||
fileName: file.name,
|
||||
fileMime: file.type || '',
|
||||
fileSize: file.size,
|
||||
fileText: content,
|
||||
fileText: results[1] || '',
|
||||
fileDataBase64: arrayBufferToBase64(results[0])
|
||||
});
|
||||
}).catch(function (err) {
|
||||
setStatus(err && err.message ? err.message : String(err));
|
||||
}).catch(function (error) {
|
||||
setStatus(error && error.message ? error.message : String(error));
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -122,24 +205,22 @@
|
|||
send({ type: 'verstak.capture', action: 'retryPending' });
|
||||
});
|
||||
|
||||
document.getElementById('save-settings').addEventListener('click', function () {
|
||||
var receiverUrl = receiverInputEl.value.trim();
|
||||
var receiverToken = receiverTokenInputEl.value.trim();
|
||||
if (!/^https?:\/\//.test(receiverUrl)) {
|
||||
setStatus('Receiver URL must start with http:// or https://');
|
||||
return;
|
||||
}
|
||||
request({
|
||||
type: 'verstak.capture',
|
||||
action: 'saveSettings',
|
||||
settings: { receiverUrl: receiverUrl, receiverToken: receiverToken }
|
||||
}).then(function (state) {
|
||||
render(state);
|
||||
setStatus('Saved');
|
||||
}).catch(function (err) {
|
||||
setStatus(err && err.message ? err.message : String(err));
|
||||
});
|
||||
languageSelectEl.addEventListener('change', function () {
|
||||
applyLocale(languageSelectEl.value);
|
||||
saveCurrentSettings(true);
|
||||
});
|
||||
|
||||
refresh();
|
||||
document.getElementById('save-settings').addEventListener('click', function () {
|
||||
if (!/^https?:\/\//.test(receiverInputEl.value.trim())) {
|
||||
setStatus(t('error.invalidReceiverUrl', null, 'Receiver URL must start with http:// or https://'));
|
||||
return;
|
||||
}
|
||||
saveCurrentSettings(true);
|
||||
});
|
||||
|
||||
loadCatalogs().then(function (loadedCatalogs) {
|
||||
catalogs = loadedCatalogs;
|
||||
applyLocale('system');
|
||||
return refresh();
|
||||
});
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue