Skip to content

Commit 66d0282

Browse files
kiing-domkiing-dom
committed
feat: popup styling and added early options page
1 parent 3ccf6c9 commit 66d0282

File tree

7 files changed

+165
-27
lines changed

7 files changed

+165
-27
lines changed

‎content.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ function getProblemData() {
6363
}
6464

6565
waitForContentAndStore();
66-
66+
6767
const { slug } = getProblemData();
6868
waitForSubmissionResult(slug);
6969

‎manifest.json‎

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
11
{
2-
"manifest_version" : 2,
3-
"name": "LeetCode Tracker",
4-
"version": "0.1.0",
5-
"description": "Track your leetcode activity to improve faster",
6-
"permissions": ["storage", "tabs", "activeTab", "scripting"],
7-
"host_permissions": ["https://leetcode.com/*"],
8-
"background": {
9-
"scripts": ["background.js"],
10-
"persistent": false
11-
},
12-
"browser_action": {
13-
"default_popup": "popup/popup.html",
14-
"default_icon": "placeholder.png"
15-
},
16-
"content_scripts": [
17-
{
18-
"matches": ["https://leetcode.com/problems/*"],
19-
"js": ["content.js"]
20-
}
21-
]
22-
}
2+
"manifest_version": 2,
3+
"name": "KeepCode",
4+
"version": "0.1.0",
5+
"description": "Track your leetcode activity to improve faster",
6+
"permissions": ["storage", "tabs", "activeTab", "scripting"],
7+
"host_permissions": ["https://leetcode.com/*"],
8+
"background": {
9+
"scripts": ["background.js"],
10+
"persistent": false
11+
},
12+
"browser_action": {
13+
"default_popup": "popup/popup.html",
14+
"default_icon": "placeholder.png"
15+
},
16+
"content_scripts": [
17+
{
18+
"matches": ["https://leetcode.com/problems/*"],
19+
"js": ["content.js"]
20+
}
21+
],
22+
"options_ui": {
23+
"page": "options/options.html",
24+
"open_in_tab": true
25+
}
26+
}

‎options/options.css‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background: #f8fafc;
4+
margin: 0;
5+
padding: 24px;
6+
min-width: 350px;
7+
}
8+
9+
h1 {
10+
color: #8868bd;
11+
margin-bottom: 18px;
12+
}
13+
14+
section {
15+
background: #f8f8ff;
16+
border-radius: 8px;
17+
padding: 16px;
18+
margin-bottom: 18px;
19+
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
20+
}
21+
22+
a {
23+
color: #2563eb;
24+
text-decoration: none;
25+
}
26+
a:hover {
27+
text-decoration: underline;
28+
}

‎options/options.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>KeepCode Options</title>
6+
<link rel="stylesheet" href="options.css">
7+
</head>
8+
<body>
9+
<h1>KeepCode Extension Settings</h1>
10+
<section>
11+
<h2>Settings (Coming Soon)</h2>
12+
<p>Here you’ll be able to customize your experience in future updates.</p>
13+
</section>
14+
<section>
15+
<h2>About &amp; Support</h2>
16+
<p>
17+
Made by <a href="https://linktr.ee/267dngi" target="_blank">@_dngi</a>.<br>
18+
Star the project on <a href="https://github.com/kiing-dom/leetcode-tracker" target="_blank">GitHub</a>!<br>
19+
If you find this useful, consider <a href="https://ko-fi.com/267dngi" target="_blank">buying me a kebab 😏</a>.
20+
</p>
21+
</section>
22+
<script src="options.js"></script>
23+
</body>
24+
</html>

‎popup/popup.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
background: #f8fafc;
4+
margin: 0;
5+
padding: 16px;
6+
min-width: 300px;
7+
}
8+
9+
h1 {
10+
font-size: 1.5em;
11+
color: #8868bd;
12+
margin-bottom: 12px;
13+
}
14+
15+
#popupContent {
16+
background: #f8f8ff;
17+
border-radius: 8px;
18+
padding: 12px;
19+
margin-bottom: 16px;
20+
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
21+
}
22+
23+
#solvedList {
24+
margin-top: 10px;
25+
}
26+
27+
.problem-item {
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
background: #e0e7ef;
32+
border-radius: 6px;
33+
padding: 8px 12px;
34+
margin-bottom: 8px;
35+
}
36+
37+
.problem-item a {
38+
color: #1e293b;
39+
text-decoration: none;
40+
font-weight: 500;
41+
}
42+
43+
.difficulty {
44+
padding: 2px 8px;
45+
border-radius: 4px;
46+
font-size: 0.9em;
47+
font-weight: bold;
48+
}
49+
50+
.difficulty.easy {
51+
background: #d1fae5;
52+
color: #059669;
53+
}
54+
.difficulty.medium {
55+
background: #fef3c7;
56+
color: #b45309;
57+
}
58+
.difficulty.hard {
59+
background: #fee2e2;
60+
color: #b91c1c;
61+
}

‎popup/popup.html‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,17 @@
11
<!DOCTYPE html>
22
<html xml:lang="en">
33
<head>
4-
<title>Leetcode Tracker</title>
4+
<title>KeepCode</title>
55
<link rel="stylesheet" href="popup.css">
66
</head>
77

88
<body>
9-
<h1>LeetCode Tracker</h1>
9+
<div style="display: flex; align-items: center; justify-content: space-between;">
10+
<h1>KeepCode</h1>
11+
<button id="optionsBtn" title="Settings" style="background: none; border: none; cursor: pointer; padding: 0; margin-left: 8px;">
12+
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#8868bd" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 8 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09A1.65 1.65 0 0 0 16 4.6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 8c.14.31.22.65.22 1v.09A1.65 1.65 0 0 0 21 12c0 .35-.08.69-.22 1z"/></svg>
13+
</button>
14+
</div>
1015
<div id="popupContent">
1116
<p>
1217
Loading problem info...

‎popup/popup.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ document.addEventListener("DOMContentLoaded", () => {
1818
}
1919
const container = document.getElementById("popupContent");
2020
container.innerHTML = `
21-
<h2>${data.title}</h2>
21+
<h3>Problem: ${data.title}</h3>
2222
<p>Difficulty: ${data.difficulty} </p>
23-
<p id="status">${data.status || "Unsolved"}</p>
23+
<p id="status"><strong>${data.status || "Unsolved"}</strong></p>
2424
`;
2525

2626
// Listen for problem solved message
@@ -50,11 +50,27 @@ document.addEventListener("DOMContentLoaded", () => {
5050
problems.forEach(problem => {
5151
const item = document.createElement("div");
5252
item.className = "problem-item";
53+
// Add difficulty as a class for color styling
54+
const difficultyClass = problem.difficulty ? problem.difficulty.toLowerCase() : "";
5355
item.innerHTML = `
5456
<a href="${problem.url}" target="_blank">${problem.title}</a>
55-
<span class="difficulty">${problem.difficulty}</span>
57+
<span class="difficulty ${difficultyClass}">${problem.difficulty}</span>
5658
`;
5759
list.appendChild(item);
5860
})
5961
})
6062
})
63+
64+
document.addEventListener("DOMContentLoaded", () => {
65+
const optionsBtn = document.getElementById("optionsBtn");
66+
if (optionsBtn) {
67+
optionsBtn.addEventListener("click", () => {
68+
if (browser.runtime && browser.runtime.openOptionsPage) {
69+
browser.runtime.openOptionsPage();
70+
} else {
71+
// fallback for browsers that don't support openOptionsPage
72+
window.open("../options/options.html", "_blank");
73+
}
74+
});
75+
}
76+
});

0 commit comments

Comments
 (0)