73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
/**
|
|
* TradeMate Content Script
|
|
* Displays translation results on the page via a floating tooltip.
|
|
*/
|
|
|
|
chrome.runtime.onMessage.addListener((request) => {
|
|
if (request.action === 'showTranslation') {
|
|
showTooltip(request.original, request.translated);
|
|
}
|
|
});
|
|
|
|
function showTooltip(original, translated) {
|
|
const existing = document.getElementById('trademate-tooltip');
|
|
if (existing) existing.remove();
|
|
|
|
const tooltip = document.createElement('div');
|
|
tooltip.id = 'trademate-tooltip';
|
|
tooltip.style.cssText = `
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 999999;
|
|
max-width: 400px;
|
|
padding: 16px;
|
|
background: #fff;
|
|
border: 1px solid #e0e0e0;
|
|
border-radius: 12px;
|
|
box-shadow: 0 8px 24px rgba(0,0,0,0.15);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
animation: slideIn 0.3s ease;
|
|
`;
|
|
|
|
tooltip.innerHTML = `
|
|
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;">
|
|
<strong style="color:#2563eb;">TradeMate 翻译</strong>
|
|
<button id="trademate-close" style="
|
|
background:none;border:none;font-size:18px;cursor:pointer;color:#999;padding:0 4px;
|
|
">×</button>
|
|
</div>
|
|
<div style="margin-bottom:8px;color:#666;font-size:13px;">${escapeHtml(original)}</div>
|
|
<div style="color:#333;font-size:15px;font-weight:500;">${escapeHtml(translated)}</div>
|
|
`;
|
|
|
|
document.body.appendChild(tooltip);
|
|
|
|
document.getElementById('trademate-close').onclick = () => tooltip.remove();
|
|
|
|
// Auto-remove after 15 seconds
|
|
setTimeout(() => { if (tooltip.parentNode) tooltip.remove(); }, 15000);
|
|
|
|
// Add animation style
|
|
if (!document.getElementById('trademate-style')) {
|
|
const style = document.createElement('style');
|
|
style.id = 'trademate-style';
|
|
style.textContent = `
|
|
@keyframes slideIn {
|
|
from { opacity: 0; transform: translateY(-10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
}
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|