+
+ Nhập văn bản và chọn ngôn ngữ cần dịch. API translate lấy từ tab Config.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Nhập API của bạn. Dữ liệu được lưu trên trình duyệt này.
+ Cấu hình API. Nếu Translate URL để trống, sẽ dùng chung Comment URL.
-
+
-
+
+
+
+
+
@@ -306,6 +373,7 @@
const angleHint= drawer.querySelector('#ai-angle-hint');
const runBtn = drawer.querySelector('#ai-run');
const statusEl = drawer.querySelector('#ai-status');
+ const transViEl= drawer.querySelector('#ai-trans-vi');
const copyHint = drawer.querySelector('#ai-hint');
const typingOpts = drawer.querySelector('#ai-typing-opts');
const typingChk = drawer.querySelector('#ai-typing');
@@ -350,7 +418,9 @@
const angle = angleSel.value;
runBtn.disabled = true;
statusEl.style.display = 'block'; statusEl.className = 'status ok';
- statusEl.textContent = '⏳ Đang gọi API...'; copyHint.style.display = 'none';
+ statusEl.textContent = '⏳ Đang gọi API...';
+ transViEl.style.display = 'none'; transViEl.textContent = '';
+ copyHint.style.display = 'none';
typingOpts.classList.remove('visible');
chrome.runtime.sendMessage(
@@ -365,28 +435,19 @@
);
});
- // COPY BUTTON
+ // Comment buttons
copyBtn.addEventListener('click', async () => {
const text = statusEl.textContent;
if (!text || text.startsWith('⏳') || text.startsWith('Lỗi') || text.startsWith('⚠️')) {
- const old = copyBtn.textContent;
- copyBtn.textContent = '⚠️ Chưa có nội dung!';
- setTimeout(() => copyBtn.textContent = old, 1200);
+ flashBtn(copyBtn, '⚠️ Chưa có nội dung!');
return;
}
try {
await navigator.clipboard.writeText(text);
- const old = copyBtn.textContent;
- copyBtn.textContent = '✅ Đã copy!';
- setTimeout(() => copyBtn.textContent = old, 1200);
- } catch (e) {
- const old = copyBtn.textContent;
- copyBtn.textContent = '❌ Lỗi copy';
- setTimeout(() => copyBtn.textContent = old, 1200);
- }
+ flashBtn(copyBtn, '✅ Đã copy!');
+ } catch (e) { flashBtn(copyBtn, '❌ Lỗi copy'); }
});
- // PASTE BUTTON
pasteBtn.addEventListener('click', async () => {
const text = statusEl.textContent;
if (!text || text.startsWith('⏳') || text.startsWith('Lỗi') || text.startsWith('⚠️')) {
@@ -394,9 +455,7 @@
return;
}
if (isTyping) return;
- isTyping = true;
- pasteBtn.disabled = true;
-
+ isTyping = true; pasteBtn.disabled = true;
try {
if (typingChk.checked) {
pasteBtn.textContent = '⌨️ Đang gõ...';
@@ -410,51 +469,124 @@
console.error('Typing error:', err);
alert('Lỗi khi nhập: ' + err.message);
} finally {
- isTyping = false;
- pasteBtn.disabled = false;
+ isTyping = false; pasteBtn.disabled = false;
pasteBtn.textContent = '📥 Dán vào ô reply';
}
});
+ // ===== TRANSLATE TAB =====
+ const transInput = drawer.querySelector('#trans-input');
+ const transTarget= drawer.querySelector('#trans-target');
+ const transRun = drawer.querySelector('#trans-run');
+ const transStatus= drawer.querySelector('#trans-status');
+ const transHint = drawer.querySelector('#trans-hint');
+ const transCopy = drawer.querySelector('#trans-copy');
+ const transPaste = drawer.querySelector('#trans-paste');
+
+ transRun.addEventListener('click', () => {
+ const text = transInput.value.trim();
+ const target = transTarget.value;
+ if (!text) { flashBtn(transRun, '⚠️ Nhập văn bản!'); return; }
+ transRun.disabled = true;
+ transStatus.style.display = 'block'; transStatus.className = 'status ok';
+ transStatus.textContent = '⏳ Đang dịch...';
+ transHint.style.display = 'none';
+
+ chrome.runtime.sendMessage(
+ { action: 'TRANSLATE_TEXT', data: { text, target_lang: target } },
+ () => {
+ if (chrome.runtime.lastError) {
+ transStatus.className = 'status err';
+ transStatus.textContent = 'Lỗi kết nối: ' + chrome.runtime.lastError.message;
+ transRun.disabled = false;
+ }
+ }
+ );
+ });
+
+ transCopy.addEventListener('click', async () => {
+ const text = transStatus.textContent;
+ if (!text || text.startsWith('⏳')) { flashBtn(transCopy, '⚠️ Chưa có!'); return; }
+ try { await navigator.clipboard.writeText(text); flashBtn(transCopy, '✅ Đã copy!'); }
+ catch (e) { flashBtn(transCopy, '❌ Lỗi'); }
+ });
+
+ transPaste.addEventListener('click', async () => {
+ const text = transStatus.textContent;
+ if (!text || text.startsWith('⏳')) { alert('Chưa có kết quả dịch!'); return; }
+ if (isTyping) return;
+ isTyping = true; transPaste.disabled = true;
+ try {
+ transPaste.textContent = '⌨️ Đang gõ...';
+ const ok = await simulateHumanTyping(text);
+ if (ok) drawer.classList.remove('open');
+ } catch (err) {
+ alert('Lỗi khi nhập: ' + err.message);
+ } finally {
+ isTyping = false; transPaste.disabled = false;
+ transPaste.textContent = '📥 Dán vào ô reply';
+ }
+ });
+
// ===== CONFIG TAB =====
- const urlIn = drawer.querySelector('#cfg-url');
- const keyIn = drawer.querySelector('#cfg-key');
- const saveBtn = drawer.querySelector('#cfg-save');
- const testBtn = drawer.querySelector('#cfg-test');
- const cfgStatus= drawer.querySelector('#cfg-status');
- const cfgBadge = drawer.querySelector('#cfg-missing');
+ const urlIn = drawer.querySelector('#cfg-url');
+ const keyIn = drawer.querySelector('#cfg-key');
+ const transUrlIn= drawer.querySelector('#cfg-trans-url');
+ const transKeyIn= drawer.querySelector('#cfg-trans-key');
+ const saveBtn = drawer.querySelector('#cfg-save');
+ const testBtn = drawer.querySelector('#cfg-test');
+ const cfgStatus = drawer.querySelector('#cfg-status');
+ const cfgBadge = drawer.querySelector('#cfg-missing');
function showCfgStatus(msg, isErr) {
cfgStatus.style.display = 'block';
cfgStatus.className = 'status ' + (isErr ? 'err' : 'ok');
cfgStatus.textContent = msg;
}
- chrome.storage.local.get(['apiUrl', 'apiKey'], (cfg) => {
+
+ chrome.storage.local.get(['apiUrl','apiKey','translateUrl','translateKey'], (cfg) => {
if (cfg.apiUrl) urlIn.value = cfg.apiUrl;
if (cfg.apiKey) keyIn.value = cfg.apiKey;
+ if (cfg.translateUrl) transUrlIn.value = cfg.translateUrl;
+ if (cfg.translateKey) transKeyIn.value = cfg.translateKey;
cfgBadge.style.display = (!cfg.apiUrl || !cfg.apiKey) ? 'inline-block' : 'none';
});
+
saveBtn.addEventListener('click', () => {
const url = urlIn.value.trim(), key = keyIn.value.trim();
- if (!url || !key) { showCfgStatus('❌ URL và Key không được để trống!', true); return; }
+ if (!url || !key) { showCfgStatus('❌ Comment URL và Key không được để trống!', true); return; }
try { new URL(url); } catch { showCfgStatus('❌ URL không hợp lệ', true); return; }
- chrome.storage.local.set({ apiUrl: url, apiKey: key }, () => {
+ const tUrl = transUrlIn.value.trim() || url;
+ const tKey = transKeyIn.value.trim() || key;
+ chrome.storage.local.set({
+ apiUrl: url, apiKey: key,
+ translateUrl: tUrl === url ? '' : tUrl,
+ translateKey: transKeyIn.value.trim()
+ }, () => {
showCfgStatus('✅ Đã lưu!', false);
cfgBadge.style.display = 'none';
});
});
+
testBtn.addEventListener('click', () => {
- chrome.storage.local.get(['apiUrl', 'apiKey'], (cfg) => {
- showCfgStatus(`URL: ${cfg.apiUrl || '(trống)'}\nKey: ${cfg.apiKey ? cfg.apiKey.slice(0,8)+'...' : '(trống)'}`, !cfg.apiUrl || !cfg.apiKey);
+ chrome.storage.local.get(['apiUrl','apiKey','translateUrl','translateKey'], (cfg) => {
+ const tUrl = cfg.translateUrl || cfg.apiUrl || '(trống)';
+ showCfgStatus(
+ `Comment: ${cfg.apiUrl || '(trống)'}\n` +
+ `Translate: ${tUrl}\n` +
+ `Key: ${cfg.apiKey ? cfg.apiKey.slice(0,8)+'...' : '(trống)'}`,
+ !cfg.apiUrl || !cfg.apiKey
+ );
});
});
}
// ===== SHOW RESULT / ERROR =====
- function showResult(comment, model= '') {
+ function showResult(comment, model='', transVi='') {
if (!sidebarHost) return;
const s = sidebarHost.shadowRoot;
const statusEl = s.querySelector('#ai-status');
+ const transViEl= s.querySelector('#ai-trans-vi');
const copyHint = s.querySelector('#ai-hint');
const runBtn = s.querySelector('#ai-run');
const drawer = s.querySelector('.drawer');
@@ -465,28 +597,68 @@
statusEl.style.display = 'block';
statusEl.className = 'status ok';
statusEl.textContent = comment;
-
- copyHint.textContent = model;
}
- if (copyHint) copyHint.style.display = 'block';
+ if (transViEl) {
+ if (transVi) {
+ transViEl.style.display = 'block';
+ transViEl.textContent = '🇻🇳 ' + transVi;
+ } else {
+ transViEl.style.display = 'none';
+ transViEl.textContent = '';
+ }
+ }
+ if (copyHint) { copyHint.style.display = 'block'; copyHint.textContent = model || '📋 Copy kết quả và dán vào ô reply!'; }
if (runBtn) runBtn.disabled = false;
if (drawer) drawer.classList.add('open');
if (typingOpts) typingOpts.classList.add('visible');
}
+
function showError(msg) {
if (!sidebarHost) return;
const s = sidebarHost.shadowRoot;
const statusEl = s.querySelector('#ai-status');
+ const transViEl= s.querySelector('#ai-trans-vi');
const runBtn = s.querySelector('#ai-run');
const drawer = s.querySelector('.drawer');
if (statusEl) { statusEl.style.display = 'block'; statusEl.className = 'status err'; statusEl.textContent = msg; }
+ if (transViEl) { transViEl.style.display = 'none'; transViEl.textContent = ''; }
if (runBtn) runBtn.disabled = false;
if (drawer) drawer.classList.add('open');
}
+
+ function showTranslateResult(content) {
+ if (!sidebarHost) return;
+ const s = sidebarHost.shadowRoot;
+ const status = s.querySelector('#trans-status');
+ const hint = s.querySelector('#trans-hint');
+ const runBtn = s.querySelector('#trans-run');
+ const drawer = s.querySelector('.drawer');
+ if (status) { status.style.display = 'block'; status.className = 'status ok'; status.textContent = content; }
+ if (hint) hint.style.display = 'block';
+ if (runBtn) runBtn.disabled = false;
+ if (drawer) drawer.classList.add('open');
+ }
+
+ function showTranslateError(msg) {
+ if (!sidebarHost) return;
+ const s = sidebarHost.shadowRoot;
+ const status = s.querySelector('#trans-status');
+ const runBtn = s.querySelector('#trans-run');
+ if (status) { status.style.display = 'block'; status.className = 'status err'; status.textContent = msg; }
+ if (runBtn) runBtn.disabled = false;
+ }
+
function removeSidebar() {
if (sidebarHost) { sidebarHost.remove(); sidebarHost = null; }
}
+
function escapeHtml(text) {
const d = document.createElement('div'); d.textContent = text; return d.innerHTML;
}
+
+ function flashBtn(btn, msg) {
+ const old = btn.textContent;
+ btn.textContent = msg;
+ setTimeout(() => btn.textContent = old, 1200);
+ }
})();
\ No newline at end of file