+
+
+
+
+
+
+
+
+
+
+
+ Nhập API của bạn. Dữ liệu được lưu trên trình duyệt này.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`;
+
shadow.appendChild(style);
shadow.appendChild(fab);
shadow.appendChild(drawer);
+ // Toggle drawer
const toggleDrawer = () => drawer.classList.toggle('open');
fab.addEventListener('click', toggleDrawer);
drawer.querySelector('.btn-x').addEventListener('click', () => drawer.classList.remove('open'));
requestAnimationFrame(() => drawer.classList.add('open'));
- // Refs
+ // Tab switching
+ const tabBtns = drawer.querySelectorAll('.tab-btn');
+ const tabContents = drawer.querySelectorAll('.tab-content');
+ tabBtns.forEach(btn => {
+ btn.addEventListener('click', () => {
+ tabBtns.forEach(b => b.classList.remove('active'));
+ tabContents.forEach(c => c.classList.remove('active'));
+ btn.classList.add('active');
+ drawer.querySelector(`#tab-${btn.dataset.tab}`).classList.add('active');
+ });
+ });
+
+ // ===== COMMENT TAB LOGIC =====
const langSel = drawer.querySelector('#ai-lang');
const toneSel = drawer.querySelector('#ai-tone');
const toneHint = drawer.querySelector('#ai-tone-hint');
@@ -206,38 +226,26 @@
const statusEl = drawer.querySelector('#ai-status');
const copyHint = drawer.querySelector('#ai-hint');
- function buildLangOptions() {
- return LANGS.map(l => `
`).join('');
- }
-
function populateSelect(sel, items, selectedValue) {
- sel.innerHTML = items.map(it =>
- `
`
- ).join('');
- if (selectedValue && items.find(i => i.value === selectedValue)) {
- sel.value = selectedValue;
- }
+ sel.innerHTML = items.map(it => `
`).join('');
+ if (selectedValue && items.find(i => i.value === selectedValue)) sel.value = selectedValue;
}
-
function updateTone(lang, keepValueIfValid) {
const items = getTones(lang);
const old = toneSel.value;
populateSelect(toneSel, items, keepValueIfValid && items.find(i => i.value === old) ? old : null);
onToneChange();
}
-
function onToneChange() {
const lang = langSel.value;
const tone = toneSel.value;
const tItem = getTones(lang).find(i => i.value === tone);
toneHint.textContent = tItem ? tItem.text : '';
-
const oldAngle = angleSel.value;
const aItems = getAngles(tone);
populateSelect(angleSel, aItems, aItems.find(i => i.value === oldAngle) ? oldAngle : null);
onAngleChange();
}
-
function onAngleChange() {
const tone = toneSel.value;
const angle = angleSel.value;
@@ -245,44 +253,75 @@
angleHint.textContent = aItem ? aItem.text : '';
}
- // Events
- langSel.addEventListener('change', () => {
- // Đổi lang: rebuild tone, nếu tone cũ không tồn tại trong list mới thì reset
- updateTone(langSel.value, true);
- });
-
+ langSel.addEventListener('change', () => updateTone(langSel.value, true));
toneSel.addEventListener('change', onToneChange);
angleSel.addEventListener('change', onAngleChange);
-
- // Init
updateTone(langSel.value, false);
- // Generate
runBtn.addEventListener('click', () => {
const lang = langSel.value;
const tone = toneSel.value;
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.style.display = 'block'; statusEl.className = 'status ok'; statusEl.textContent = '⏳ Đang gọi API...'; copyHint.style.display = 'none';
chrome.runtime.sendMessage(
{ action: 'GENERATE_COMMENT', data: { text: tweetText, lang, tone, angle } },
() => {
if (chrome.runtime.lastError) {
statusEl.className = 'status err';
- statusEl.textContent = 'Lỗi kết nối background: ' + chrome.runtime.lastError.message;
+ statusEl.textContent = 'Lỗi kết nối: ' + chrome.runtime.lastError.message;
runBtn.disabled = false;
}
}
);
});
+
+ // ===== CONFIG TAB LOGIC =====
+ 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');
+
+ function showCfgStatus(msg, isErr) {
+ cfgStatus.style.display = 'block';
+ cfgStatus.className = 'status ' + (isErr ? 'err' : 'ok');
+ cfgStatus.textContent = msg;
+ }
+
+ // Đọc config hiện tại
+ chrome.storage.local.get(['apiUrl', 'apiKey'], (cfg) => {
+ if (cfg.apiUrl) urlIn.value = cfg.apiUrl;
+ if (cfg.apiKey) keyIn.value = cfg.apiKey;
+ cfgBadge.style.display = (!cfg.apiUrl || !cfg.apiKey) ? 'inline-block' : 'none';
+ });
+
+ saveBtn.addEventListener('click', () => {
+ const url = urlIn.value.trim();
+ const key = keyIn.value.trim();
+ if (!url || !key) {
+ showCfgStatus('❌ URL và Key không được để trống!', true);
+ return;
+ }
+ try { new URL(url); } catch {
+ showCfgStatus('❌ URL không hợp lệ (cần có https://)', true);
+ return;
+ }
+ chrome.storage.local.set({ apiUrl: url, apiKey: key }, () => {
+ showCfgStatus('✅ Đã lưu! Bạn có thể đóng tab này và bấm Tạo Comment.', 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);
+ });
+ });
}
- // ===== D. RESULT / ERROR =====
+ // ===== RESULT / ERROR =====
function showResult(comment) {
if (!sidebarHost) return;
const s = sidebarHost.shadowRoot;
@@ -290,29 +329,24 @@
const copyHint = s.querySelector('#ai-hint');
const runBtn = s.querySelector('#ai-run');
const drawer = s.querySelector('.drawer');
-
if (statusEl) { statusEl.style.display = 'block'; statusEl.className = 'status ok'; statusEl.textContent = comment; }
if (copyHint) copyHint.style.display = 'block';
if (runBtn) runBtn.disabled = false;
if (drawer) drawer.classList.add('open');
}
-
function showError(msg) {
if (!sidebarHost) return;
const s = sidebarHost.shadowRoot;
const statusEl = s.querySelector('#ai-status');
const runBtn = s.querySelector('#ai-run');
const drawer = s.querySelector('.drawer');
-
- if (statusEl) { statusEl.style.display = 'block'; statusEl.className = 'status err'; statusEl.textContent = 'Lỗi: ' + msg; }
+ if (statusEl) { statusEl.style.display = 'block'; statusEl.className = 'status err'; statusEl.textContent = msg; }
if (runBtn) runBtn.disabled = false;
if (drawer) drawer.classList.add('open');
}
-
function removeSidebar() {
if (sidebarHost) { sidebarHost.remove(); sidebarHost = null; }
}
-
function escapeHtml(text) {
const d = document.createElement('div'); d.textContent = text; return d.innerHTML;
}
diff --git a/chrom-ext/manifest.json b/chrom-ext/manifest.json
index 14fcb30..4ea958b 100644
--- a/chrom-ext/manifest.json
+++ b/chrom-ext/manifest.json
@@ -1,16 +1,14 @@
{
"manifest_version": 3,
"name": "X Comment AI",
- "version": "1.0.0",
- "description": "Tạo comment cho X.com bằng AI của bạn",
+ "version": "1.2.0",
+ "description": "AI Comment cho X.com — có cấu hình",
"permissions": [
"contextMenus",
"storage"
],
"host_permissions": [
- "https://x.com/*",
- "https://twitter.com/*",
- "https://api.yoursite.com/*"
+ "https://x.com/*"
],
"background": {
"service_worker": "background.js"
@@ -18,8 +16,7 @@
"content_scripts": [
{
"matches": [
- "https://x.com/*",
- "https://twitter.com/*"
+ "https://x.com/*"
],
"js": [
"content.js"
@@ -28,8 +25,8 @@
}
],
"icons": {
- "16": "icons/icon.webp",
- "48": "icons/icon.webp",
- "128": "icons/icon.webp"
+ "16": "icons/icon.png",
+ "48": "icons/icon.png",
+ "128": "icons/icon.png"
}
}
\ No newline at end of file