alpha-explain/content.js at main · Alpha9584/alpha-explain · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
// α-explain Content Script
let explanationPopup = null;
let selectedText = '';

document.addEventListener('keydown', async (event) => {
  if (event.shiftKey && event.key === 'E') {
    event.preventDefault();

    const selection = window.getSelection();
    selectedText = selection.toString().trim();

    if (selectedText.length > 0) {
      const range = selection.getRangeAt(0);
      const rect = range.getBoundingClientRect();

      await showExplanation(selectedText, rect);
    }
  }

  if (event.key === 'Escape' && explanationPopup) {
    closePopup();
  }
});

async function showExplanation(text, rect) {
  closePopup();

  explanationPopup = document.createElement('div');
  explanationPopup.className = 'alpha-explain-popup';
  explanationPopup.innerHTML = `
    <div class="alpha-explain-header">
      <div class="alpha-explain-icon">α</div>
      <div class="alpha-explain-term">${escapeHtml(text)}</div>
      <button class="alpha-explain-close" aria-label="Close">×</button>
    </div>
    <div class="alpha-explain-content">
      <div class="alpha-explain-loading">
        <div class="alpha-explain-spinner"></div>
        <p>Explaining...</p>
      </div>
    </div>
  `;

  const scrollX = window.scrollX || window.pageXOffset;
  const scrollY = window.scrollY || window.pageYOffset;

  explanationPopup.style.left = `${rect.left + scrollX}px`;
  explanationPopup.style.top = `${rect.bottom + scrollY + 10}px`;

  document.body.appendChild(explanationPopup);

  const closeBtn = explanationPopup.querySelector('.alpha-explain-close');
  closeBtn.addEventListener('click', closePopup);

  setTimeout(() => {
    const popupRect = explanationPopup.getBoundingClientRect();

    if (popupRect.right > window.innerWidth) {
      explanationPopup.style.left = `${window.innerWidth - popupRect.width - 20 + scrollX}px`;
    }

    if (popupRect.bottom > window.innerHeight) {
      explanationPopup.style.top = `${rect.top + scrollY - popupRect.height - 10}px`;
    }
  }, 10);

  try {
    const response = await chrome.runtime.sendMessage({
      action: 'explain',
      text: text
    });

    if (response.success) {
      displayExplanation(response.explanation);
    } else {
      displayError(response.error || 'Failed to get explanation');
    }
  } catch (error) {
    displayError('Failed to connect to explanation service');
  }
}

function displayExplanation(explanation) {
  if (!explanationPopup) return;

  const content = explanationPopup.querySelector('.alpha-explain-content');
  content.innerHTML = `
    <div class="alpha-explain-explanation">
      ${escapeHtml(explanation).replace(/\n/g, '<br>')}
    </div>
  `;
}

function displayError(errorMsg) {
  if (!explanationPopup) return;

  const content = explanationPopup.querySelector('.alpha-explain-content');
  content.innerHTML = `
    <div class="alpha-explain-error">
      <p>⚠️ ${escapeHtml(errorMsg)}</p>
    </div>
  `;
}

function closePopup() {
  if (explanationPopup) {
    explanationPopup.remove();
    explanationPopup = null;
  }
}

document.addEventListener('click', (event) => {
  if (explanationPopup && !explanationPopup.contains(event.target)) {
    closePopup();
  }
});

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}