Skip to content

Commit ba498af

Browse files
OhFeelOhFeel
committed
Add user error handling and improve UI feedback for emoji fetching
1 parent e1813a0 commit ba498af

File tree

5 files changed

+125
-230
lines changed

5 files changed

+125
-230
lines changed

‎source/content.css‎

Whitespace-only changes.

‎source/content.js‎

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,21 +19,61 @@ const STYLES = {
1919
}
2020
};
2121

22+
function showUserError(searchResult, message) {
23+
if (searchResult.querySelector('.emoji-error-box')) return;
24+
25+
const errorBox = document.createElement('div');
26+
errorBox.className = 'emoji-error-box';
27+
28+
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
29+
const theme = isDark ? STYLES.box.dark : STYLES.box.light;
30+
31+
errorBox.style.cssText = `
32+
width: 100%;
33+
display: flex;
34+
justify-content: center;
35+
align-items: center;
36+
gap: 8px;
37+
padding: 8px 12px;
38+
margin-top: 0px;
39+
margin-bottom: 20px;
40+
border-radius: 6px;
41+
font-size: 14px;
42+
border: 1px solid #ea4335;
43+
background-color: ${isDark ? '#2d1b1e' : '#fce8e6'};
44+
color: #ea4335;
45+
box-sizing: border-box;
46+
`;
47+
48+
errorBox.innerHTML = `
49+
<span>⚠️</span>
50+
<span>${message}</span>
51+
`;
52+
53+
searchResult.appendChild(errorBox);
54+
55+
setTimeout(() => {
56+
if (errorBox.parentNode) {
57+
errorBox.parentNode.removeChild(errorBox);
58+
}
59+
}, 5000);
60+
}
61+
2262
async function getEmojiFromEmojipedia(url) {
2363
return new Promise((resolve, reject) => {
2464
chrome.runtime.sendMessage({ type: "fetchEmojipedia", url }, (response) => {
2565
if (chrome.runtime.lastError) {
26-
reject(chrome.runtime.lastError.message);
66+
reject(`Connection error: ${chrome.runtime.lastError.message}`);
2767
return;
2868
}
2969

3070
if (response?.error) {
31-
reject(response.error);
71+
reject(`Fetch error: ${response.error}`);
3272
return;
3373
}
3474

3575
if (!response?.html) {
36-
reject('No HTML content received');
76+
reject('No content received from Emojipedia');
3777
return;
3878
}
3979

@@ -51,7 +91,7 @@ async function getEmojiFromEmojipedia(url) {
5191

5292
reject('Emoji not found on page');
5393
} catch (error) {
54-
reject(`Parsing error: ${error.message}`);
94+
reject(`Page parsing failed: ${error.message}`);
5595
}
5696
});
5797
});
@@ -87,11 +127,9 @@ function createBox(emoji, searchResult) {
87127

88128
const emojiSpan = document.createElement('span');
89129
emojiSpan.textContent = emoji;
90-
emojiSpan.setAttribute('aria-label', `Emoji: ${emoji}`);
91130

92131
const copyButton = document.createElement('button');
93132
copyButton.textContent = 'Copy';
94-
copyButton.setAttribute('aria-label', `Copy emoji ${emoji}`);
95133
copyButton.style.cssText = `
96134
background-color: #1a73e8;
97135
border: none;
@@ -125,7 +163,7 @@ function createBox(emoji, searchResult) {
125163
}, 1200);
126164
} catch (err) {
127165
console.error('Clipboard error:', err);
128-
copyButton.textContent = 'Error';
166+
copyButton.textContent = 'Failed';
129167
copyButton.style.backgroundColor = '#ea4335';
130168

131169
setTimeout(() => {
@@ -153,7 +191,10 @@ function processSearchResults() {
153191
if (link.href?.startsWith("https://emojipedia.org")) {
154192
getEmojiFromEmojipedia(link.href)
155193
.then(emoji => createBox(emoji, searchResult))
156-
.catch(err => console.warn('Failed to fetch emoji:', err));
194+
.catch(err => {
195+
console.warn('Failed to fetch emoji:', err);
196+
showUserError(searchResult, 'Failed to load emoji');
197+
});
157198
}
158199
});
159200
}

‎source/extension.html‎

Lines changed: 10 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,16 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
1+
<html>
32
<head>
4-
<meta charset="UTF-8">
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<title>Emoji Copy Extension</title>
73
<link rel="stylesheet" href="style.css">
4+
<meta charset="UTF-8">
5+
<script src="toggle.js"></script>
86
</head>
97
<body>
10-
<main>
11-
<header>
12-
<h1>Emoji Copy Extension</h1>
13-
</header>
14-
15-
<section class="controls">
16-
<p>Enable/disable the extension:</p>
17-
<label class="switch" for="toggle">
18-
<input id="toggle" type="checkbox" aria-describedby="toggle-description">
19-
<span class="slider round" aria-hidden="true"></span>
20-
</label>
21-
<p id="toggle-description" class="sr-only">Toggle to enable or disable emoji copy functionality</p>
22-
</section>
23-
24-
<footer>
25-
<p>Report issues on <a href="https://github.com/redbackspider77/EmojiCopyExtension/issues/new" target="_blank" rel="noopener noreferrer">GitHub</a></p>
26-
</footer>
27-
</main>
28-
29-
<script src="toggle.js"></script>
8+
<h1>Emoji Copy Extension</h1>
9+
<p>Toggle below:</p>
10+
<label class="switch">
11+
<input id="toggle" type="checkbox">
12+
<span class="slider round"></span>
13+
</label>
14+
<p>Report any issues <a target="_blank" href="https://github.com/redbackspider77/EmojiCopyExtension/issues/new">on the Github.</a></p>
3015
</body>
3116
</html>

‎source/style.css‎

Lines changed: 57 additions & 148 deletions
Original file line numberDiff line numberDiff line change
@@ -1,178 +1,87 @@
1-
:root {
2-
--bg-light: #f8f9fa;
3-
--bg-dark: #303134;
4-
--text-light: #000;
5-
--text-dark: #fff;
6-
--link-light: #1a73e8;
7-
--link-dark: #4f8cff;
8-
--switch-bg: #ccc;
9-
--switch-active: #2196F3;
10-
--switch-focus: rgba(33, 150, 243, 0.3);
11-
}
12-
13-
* {
14-
box-sizing: border-box;
15-
}
16-
171
body {
182
margin: 0;
19-
padding: 16px;
20-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
21-
line-height: 1.5;
22-
text-align: center;
23-
min-width: 300px;
24-
max-width: 400px;
25-
}
26-
27-
.sr-only {
28-
position: absolute;
29-
width: 1px;
30-
height: 1px;
31-
padding: 0;
32-
margin: -1px;
33-
overflow: hidden;
34-
clip: rect(0, 0, 0, 0);
3+
padding: 8px;
4+
font-family: Calibri;
355
white-space: nowrap;
36-
border: 0;
37-
}
38-
39-
main {
40-
display: flex;
41-
flex-direction: column;
42-
gap: 16px;
43-
}
44-
45-
h1 {
46-
margin: 0 0 8px 0;
47-
font-size: 1.25rem;
48-
font-weight: 600;
49-
}
50-
51-
.controls {
52-
display: flex;
53-
flex-direction: column;
54-
align-items: center;
55-
gap: 12px;
56-
}
57-
58-
.controls p {
59-
margin: 0;
60-
font-size: 0.9rem;
61-
}
62-
63-
footer {
64-
margin-top: 8px;
65-
padding-top: 16px;
66-
border-top: 1px solid;
67-
}
68-
69-
footer p {
70-
margin: 0;
71-
font-size: 0.8rem;
6+
text-align: center;
727
}
738

74-
a {
75-
text-decoration: none;
76-
border-radius: 4px;
77-
padding: 2px 4px;
78-
transition: background-color 0.2s ease;
9+
@media (prefers-color-scheme: light) {
10+
body {
11+
background: #f8f9fa;
12+
color: black;
13+
}
7914
}
8015

81-
a:hover,
82-
a:focus {
83-
text-decoration: underline;
84-
outline: 2px solid currentColor;
85-
outline-offset: 2px;
16+
@media (prefers-color-scheme: dark) {
17+
body {
18+
background: #303134;
19+
color: white;
20+
}
21+
a {
22+
color: #4f8cff;
23+
}
8624
}
8725

26+
/* The switch - the box around the slider */
8827
.switch {
89-
position: relative;
90-
display: inline-block;
91-
width: 60px;
92-
height: 32px;
28+
position: relative;
29+
display: inline-block;
30+
width: 100px;
31+
height: 34px;
9332
}
9433

34+
/* Hide default HTML checkbox */
9535
.switch input {
96-
opacity: 0;
97-
width: 0;
98-
height: 0;
99-
position: absolute;
36+
opacity: 0;
37+
width: 0;
38+
height: 0;
10039
}
10140

41+
/* The slider */
10242
.slider {
103-
position: absolute;
104-
cursor: pointer;
105-
top: 0;
106-
left: 0;
107-
right: 0;
108-
bottom: 0;
109-
background-color: var(--switch-bg);
110-
transition: all 0.3s ease;
111-
border-radius: 32px;
43+
position: absolute;
44+
cursor: pointer;
45+
top: 0;
46+
left: 0;
47+
right: 0;
48+
bottom: 0;
49+
background-color: #ccc;
50+
-webkit-transition: .4s;
51+
transition: .4s;
11252
}
11353

11454
.slider:before {
115-
position: absolute;
116-
content: "";
117-
height: 24px;
118-
width: 24px;
119-
left: 4px;
120-
bottom: 4px;
121-
background-color: white;
122-
transition: all 0.3s ease;
123-
border-radius: 50%;
124-
}
125-
126-
.switch input:checked + .slider {
127-
background-color: var(--switch-active);
128-
}
129-
130-
.switch input:focus + .slider {
131-
box-shadow: 0 0 0 3px var(--switch-focus);
55+
position: absolute;
56+
content: "";
57+
height: 26px;
58+
width: 26px;
59+
left: 4px;
60+
bottom: 4px;
61+
background-color: white;
62+
-webkit-transition: .4s;
63+
transition: .4s;
13264
}
13365

134-
.switch input:checked + .slider:before {
135-
transform: translateX(28px);
66+
input:checked + .slider {
67+
background-color: #2196F3;
13668
}
13769

138-
.switch:hover .slider {
139-
opacity: 0.8;
70+
input:focus + .slider {
71+
box-shadow: 0 0 1px #2196F3;
14072
}
14173

142-
@media (prefers-color-scheme: light) {
143-
body {
144-
background: var(--bg-light);
145-
color: var(--text-light);
146-
}
147-
148-
a {
149-
color: var(--link-light);
150-
}
151-
152-
footer {
153-
border-color: #e0e0e0;
154-
}
74+
input:checked + .slider:before {
75+
-webkit-transform: translateX(66px);
76+
-ms-transform: translateX(66px);
77+
transform: translateX(66px);
15578
}
15679

157-
@media (prefers-color-scheme: dark) {
158-
body {
159-
background: var(--bg-dark);
160-
color: var(--text-dark);
161-
}
162-
163-
a {
164-
color: var(--link-dark);
165-
}
166-
167-
footer {
168-
border-color: #5f6368;
169-
}
80+
/* Rounded sliders */
81+
.slider.round {
82+
border-radius: 34px;
17083
}
17184

172-
@media (prefers-reduced-motion: reduce) {
173-
* {
174-
animation-duration: 0.01ms !important;
175-
animation-iteration-count: 1 !important;
176-
transition-duration: 0.01ms !important;
177-
}
85+
.slider.round:before {
86+
border-radius: 50%;
17887
}

0 commit comments

Comments
 (0)