feat: add DuckDuckGo Email Protection autofill settings
- Implemented a new content script for DuckDuckGo Email autofill functionality. - Enhanced email polling scripts (mail-163.js, qq-mail.js, signup-page.js, vps-panel.js) to handle user flow interruptions. - Updated utility functions to manage flow stopping and error handling. - Introduced a stop button in the side panel for user control over ongoing processes. - Improved UI elements and styles for better user experience, including new button states and messages. - Adjusted the side panel to fetch DuckDuckGo email automatically and display it in the input field.
This commit is contained in:
Jimmy
+27
-1
@@ -173,6 +173,12 @@ header {
|
||||
}
|
||||
.btn-success:hover { opacity: 0.9; box-shadow: 0 2px 8px var(--green-soft); }
|
||||
|
||||
.btn-danger {
|
||||
background: var(--red);
|
||||
color: #fff;
|
||||
}
|
||||
.btn-danger:hover { opacity: 0.9; box-shadow: 0 2px 8px var(--red-soft); }
|
||||
|
||||
.run-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -194,7 +200,7 @@ header {
|
||||
}
|
||||
.run-count-input:focus { border-color: var(--blue); }
|
||||
.run-count-input::-webkit-inner-spin-button { opacity: 0.5; }
|
||||
.btn-success:disabled, .btn-primary:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
|
||||
.btn-success:disabled, .btn-primary:disabled, .btn-danger:disabled { background: var(--bg-elevated); color: var(--text-muted); cursor: not-allowed; box-shadow: none; }
|
||||
.run-count-input:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
|
||||
.btn-ghost {
|
||||
@@ -238,6 +244,14 @@ header {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.data-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.data-label {
|
||||
width: 56px;
|
||||
font-size: 11px;
|
||||
@@ -283,6 +297,10 @@ header {
|
||||
.data-input::placeholder { color: var(--text-muted); }
|
||||
.data-input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
|
||||
|
||||
#btn-fetch-email {
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
.data-select {
|
||||
flex: 1;
|
||||
padding: 7px 10px;
|
||||
@@ -337,6 +355,9 @@ header {
|
||||
.status-bar.failed .status-dot { background: var(--red); }
|
||||
.status-bar.failed { color: var(--red); }
|
||||
|
||||
.status-bar.stopped .status-dot { background: var(--cyan); }
|
||||
.status-bar.stopped { color: var(--cyan); }
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.4; transform: scale(0.85); }
|
||||
@@ -433,6 +454,9 @@ header {
|
||||
.step-row.failed .step-indicator { border-color: var(--red); background: var(--red-soft); }
|
||||
.step-row.failed .step-num { color: var(--red); }
|
||||
|
||||
.step-row.stopped .step-indicator { border-color: var(--cyan); background: rgba(8, 145, 178, 0.08); }
|
||||
.step-row.stopped .step-num { color: var(--cyan); }
|
||||
|
||||
/* Step Button */
|
||||
.step-btn {
|
||||
flex: 1;
|
||||
@@ -455,6 +479,7 @@ header {
|
||||
.step-row.running .step-btn { border-color: var(--orange); color: var(--orange); }
|
||||
.step-row.completed .step-btn { border-color: var(--border-subtle); color: var(--text-secondary); opacity: 0.7; }
|
||||
.step-row.failed .step-btn { border-color: var(--red); color: var(--red); }
|
||||
.step-row.stopped .step-btn { border-color: var(--cyan); color: var(--cyan); }
|
||||
|
||||
.step-status {
|
||||
width: 20px;
|
||||
@@ -465,6 +490,7 @@ header {
|
||||
}
|
||||
.step-row.completed .step-status { color: var(--green); }
|
||||
.step-row.failed .step-status { color: var(--red); }
|
||||
.step-row.stopped .step-status { color: var(--cyan); }
|
||||
|
||||
/* ============================================================
|
||||
Log / Console Section
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>
|
||||
Auto
|
||||
</button>
|
||||
<button id="btn-stop" class="btn btn-danger" title="Stop current flow" disabled>Stop</button>
|
||||
</div>
|
||||
<button id="btn-reset" class="btn btn-ghost" title="Reset all steps">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
@@ -56,7 +57,10 @@
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">Email</span>
|
||||
<input type="text" id="input-email" class="data-input" placeholder="Paste DuckDuckGo email" />
|
||||
<div class="data-inline">
|
||||
<input type="text" id="input-email" class="data-input" placeholder="Paste DuckDuckGo email" />
|
||||
<button id="btn-fetch-email" class="btn btn-outline btn-sm" type="button">Auto</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-row">
|
||||
<span class="data-label">OAuth</span>
|
||||
@@ -73,7 +77,7 @@
|
||||
</div>
|
||||
<div id="auto-continue-bar" class="auto-continue-bar" style="display:none;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
|
||||
<span class="auto-hint">Paste email above, then continue</span>
|
||||
<span class="auto-hint">Use Auto to fetch Duck email, or paste manually, then continue</span>
|
||||
<button id="btn-auto-continue" class="btn btn-primary btn-sm">Continue</button>
|
||||
</div>
|
||||
</section>
|
||||
@@ -121,7 +125,7 @@
|
||||
</div>
|
||||
<div class="step-row" data-step="8">
|
||||
<div class="step-indicator" data-step="8"><span class="step-num">8</span></div>
|
||||
<button class="step-btn" data-step="8">Complete OAuth</button>
|
||||
<button class="step-btn" data-step="8">Manual OAuth Confirm</button>
|
||||
<span class="step-status" data-step="8"></span>
|
||||
</div>
|
||||
<div class="step-row" data-step="9">
|
||||
|
||||
+71
-3
@@ -5,6 +5,7 @@ const STATUS_ICONS = {
|
||||
running: '',
|
||||
completed: '\u2713', // ✓
|
||||
failed: '\u2717', // ✗
|
||||
stopped: '\u25A0', // ■
|
||||
};
|
||||
|
||||
const logArea = document.getElementById('log-area');
|
||||
@@ -13,6 +14,8 @@ const displayLocalhostUrl = document.getElementById('display-localhost-url');
|
||||
const displayStatus = document.getElementById('display-status');
|
||||
const statusBar = document.getElementById('status-bar');
|
||||
const inputEmail = document.getElementById('input-email');
|
||||
const btnFetchEmail = document.getElementById('btn-fetch-email');
|
||||
const btnStop = document.getElementById('btn-stop');
|
||||
const btnReset = document.getElementById('btn-reset');
|
||||
const stepsProgress = document.getElementById('steps-progress');
|
||||
const btnAutoRun = document.getElementById('btn-auto-run');
|
||||
@@ -132,6 +135,7 @@ function updateButtonStates() {
|
||||
if (row.classList.contains('completed')) statuses[step] = 'completed';
|
||||
else if (row.classList.contains('running')) statuses[step] = 'running';
|
||||
else if (row.classList.contains('failed')) statuses[step] = 'failed';
|
||||
else if (row.classList.contains('stopped')) statuses[step] = 'stopped';
|
||||
else statuses[step] = 'pending';
|
||||
});
|
||||
|
||||
@@ -148,9 +152,15 @@ function updateButtonStates() {
|
||||
} else {
|
||||
const prevStatus = statuses[step - 1];
|
||||
const currentStatus = statuses[step];
|
||||
btn.disabled = !(prevStatus === 'completed' || currentStatus === 'failed' || currentStatus === 'completed');
|
||||
btn.disabled = !(prevStatus === 'completed' || currentStatus === 'failed' || currentStatus === 'completed' || currentStatus === 'stopped');
|
||||
}
|
||||
}
|
||||
|
||||
updateStopButtonState(anyRunning || autoContinueBar.style.display !== 'none');
|
||||
}
|
||||
|
||||
function updateStopButtonState(active) {
|
||||
btnStop.disabled = !active;
|
||||
}
|
||||
|
||||
function updateStatusDisplay(state) {
|
||||
@@ -172,6 +182,13 @@ function updateStatusDisplay(state) {
|
||||
return;
|
||||
}
|
||||
|
||||
const stopped = Object.entries(state.stepStatuses).find(([, s]) => s === 'stopped');
|
||||
if (stopped) {
|
||||
displayStatus.textContent = `Step ${stopped[0]} stopped`;
|
||||
statusBar.classList.add('stopped');
|
||||
return;
|
||||
}
|
||||
|
||||
const lastCompleted = Object.entries(state.stepStatuses)
|
||||
.filter(([, s]) => s === 'completed')
|
||||
.map(([k]) => Number(k))
|
||||
@@ -214,6 +231,37 @@ function escapeHtml(text) {
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
async function fetchDuckEmail() {
|
||||
const defaultLabel = 'Auto';
|
||||
btnFetchEmail.disabled = true;
|
||||
btnFetchEmail.textContent = '...';
|
||||
|
||||
try {
|
||||
const response = await chrome.runtime.sendMessage({
|
||||
type: 'FETCH_DUCK_EMAIL',
|
||||
source: 'sidepanel',
|
||||
payload: { generateNew: true },
|
||||
});
|
||||
|
||||
if (response?.error) {
|
||||
throw new Error(response.error);
|
||||
}
|
||||
if (!response?.email) {
|
||||
throw new Error('Duck email was not returned.');
|
||||
}
|
||||
|
||||
inputEmail.value = response.email;
|
||||
showToast(`Fetched ${response.email}`, 'success', 2500);
|
||||
return response.email;
|
||||
} catch (err) {
|
||||
showToast(`Auto fetch failed: ${err.message}`, 'error');
|
||||
throw err;
|
||||
} finally {
|
||||
btnFetchEmail.disabled = false;
|
||||
btnFetchEmail.textContent = defaultLabel;
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// Button Handlers
|
||||
// ============================================================
|
||||
@@ -224,7 +272,7 @@ document.querySelectorAll('.step-btn').forEach(btn => {
|
||||
if (step === 3) {
|
||||
const email = inputEmail.value.trim();
|
||||
if (!email) {
|
||||
showToast('Please paste email address first', 'warn');
|
||||
showToast('Please paste email address or use Auto first', 'warn');
|
||||
return;
|
||||
}
|
||||
await chrome.runtime.sendMessage({ type: 'EXECUTE_STEP', source: 'sidepanel', payload: { step, email } });
|
||||
@@ -234,6 +282,16 @@ document.querySelectorAll('.step-btn').forEach(btn => {
|
||||
});
|
||||
});
|
||||
|
||||
btnFetchEmail.addEventListener('click', async () => {
|
||||
await fetchDuckEmail().catch(() => {});
|
||||
});
|
||||
|
||||
btnStop.addEventListener('click', async () => {
|
||||
btnStop.disabled = true;
|
||||
await chrome.runtime.sendMessage({ type: 'STOP_FLOW', source: 'sidepanel', payload: {} });
|
||||
showToast('Stopping current flow...', 'warn', 2000);
|
||||
});
|
||||
|
||||
// Auto Run
|
||||
btnAutoRun.addEventListener('click', async () => {
|
||||
const totalRuns = parseInt(inputRunCount.value) || 1;
|
||||
@@ -246,7 +304,7 @@ btnAutoRun.addEventListener('click', async () => {
|
||||
btnAutoContinue.addEventListener('click', async () => {
|
||||
const email = inputEmail.value.trim();
|
||||
if (!email) {
|
||||
showToast('Please paste DuckDuckGo email first!', 'warn');
|
||||
showToast('Please fetch or paste DuckDuckGo email first!', 'warn');
|
||||
return;
|
||||
}
|
||||
autoContinueBar.style.display = 'none';
|
||||
@@ -268,8 +326,10 @@ btnReset.addEventListener('click', async () => {
|
||||
document.querySelectorAll('.step-row').forEach(row => row.className = 'step-row');
|
||||
document.querySelectorAll('.step-status').forEach(el => el.textContent = '');
|
||||
btnAutoRun.disabled = false;
|
||||
inputRunCount.disabled = false;
|
||||
btnAutoRun.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Auto';
|
||||
autoContinueBar.style.display = 'none';
|
||||
updateStopButtonState(false);
|
||||
updateButtonStates();
|
||||
updateProgressCounter();
|
||||
}
|
||||
@@ -346,11 +406,15 @@ chrome.runtime.onMessage.addListener((message) => {
|
||||
logArea.innerHTML = '';
|
||||
document.querySelectorAll('.step-row').forEach(row => row.className = 'step-row');
|
||||
document.querySelectorAll('.step-status').forEach(el => el.textContent = '');
|
||||
updateStopButtonState(false);
|
||||
updateProgressCounter();
|
||||
break;
|
||||
}
|
||||
|
||||
case 'DATA_UPDATED': {
|
||||
if (message.payload.email) {
|
||||
inputEmail.value = message.payload.email;
|
||||
}
|
||||
if (message.payload.oauthUrl) {
|
||||
displayOauthUrl.textContent = message.payload.oauthUrl;
|
||||
displayOauthUrl.classList.add('has-value');
|
||||
@@ -369,21 +433,25 @@ chrome.runtime.onMessage.addListener((message) => {
|
||||
case 'waiting_email':
|
||||
autoContinueBar.style.display = 'flex';
|
||||
btnAutoRun.innerHTML = `Paused${runLabel}`;
|
||||
updateStopButtonState(true);
|
||||
break;
|
||||
case 'running':
|
||||
btnAutoRun.innerHTML = `Running${runLabel}`;
|
||||
updateStopButtonState(true);
|
||||
break;
|
||||
case 'complete':
|
||||
btnAutoRun.disabled = false;
|
||||
inputRunCount.disabled = false;
|
||||
btnAutoRun.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Auto';
|
||||
autoContinueBar.style.display = 'none';
|
||||
updateStopButtonState(false);
|
||||
break;
|
||||
case 'stopped':
|
||||
btnAutoRun.disabled = false;
|
||||
inputRunCount.disabled = false;
|
||||
btnAutoRun.innerHTML = '<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg> Auto';
|
||||
autoContinueBar.style.display = 'none';
|
||||
updateStopButtonState(false);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
|
||||
Reference in New Issue
Block a user